자주 쓰는 Bookmarklet

Bookmarklet을 활용하여 생산성 향상하기

웹브라우저의 Bookmark는 자주 가는 사이트를 등록해두는 기능입니다.

이 Bookmark에 JavaScript 코드를 등록해둔다면 생산성 향상을 기대할 수 있습니다.

Bookmarklet 생성

간단합니다.

웹브라우저에서 Bookmark를 등록할 때, URL에 'javascript:'로 시작하는 간단한 스크립트를 입력합니다.

혹은 웹 페이지에 있는 링크를 브라우저의 Bookmark Bar로 끌어다 놓아도 추가할 수 있습니다.

1. 직접 스크립트 입력해서 추가

2. 끌어다 놓아서 추가

자주 사용하는 Bookmarklet

주로 참고 문서를 열거나 WebApp을 실행할 때 이용합니다.

아래 자주 사용하는 Bookmarklet을 공유합니다. 각 항목의 항목명을 끌어서 북마크바에 추가할 수 있습니다.

• 다음 사전
  - javascript:window.open('http://small.dic.daum.net/index.do', 'smalldic', 'left=150, top=150, width=411, height=560, toolbar=no, scrollbars=no, status=no, resizable=no');void(0);
  - 다음에서 제공하는 작은창 사전을 엽니다.
  
  
• DevDocs API Documentation
  - javascript:window.open('https://devdocs.io', 'devdocs', 'toolbar=0, status=0, resizable=1, width=1080, height=768, top=0, left=0');void(0);
  - 다양한 API 문서를 한 창에서 열람할 수 있는 DevDocs 페이지를 엽니다.
  
  
• Can I Use
  - javascript:window.open('http://caniuse.com/#search='+prompt("Type a tag"), 'caniuse', 'left=150, top=150, width=800, height=600, toolbar=no, scrollbars=no, status=no, resizable=no');void(0);
  - 사용하려는 HTML 요소나 CSS 문법이 각 브라우저의 어떤 버전부터 호환되는지 확인할 수 있는 Can I Use 사이트를 엽니다.
  
  
• Instant SQL Formatter
  - javascript:window.open('http://www.dpriver.com/pp/sqlformat.htm', 'isf', 'toolbar=0, status=0, resizable=1, width=1080, height=768, top=0, left=0');void(0);
  - SQL 구문을 보기 좋게 변환해주는 페이지를 엽니다.
  
  
• JSON Formatter
  - javascript:window.open('http://jsonformatter.curiousconcept.com', 'jf', 'toolbar=0, status=0, resizable=1, width=1080, height=768, top=0, left=0');void(0);
  - JSON 문자열을 보기 좋게 변환해주는 페이지를 엽니다.
  
  
• JavaScript Beautifier
  - javascript:window.open('http://jsbeautifier.org/', 'jsb', 'toolbar=0, status=0, resizable=1, width=800, height=600, top=0, left=0');void(0);
  - JavaScript 코드를 보기 좋게 변환해주는 페이지를 엽니다.
  
  
• CSS Formatter
  - javascript:window.open('http://www.cleancss.com/css-beautify', 'cf', 'toolbar=0, status=0, resizable=1, width=991, height=768, top=0, left=0');void(0);
  - CSS 코드를 보기 좋게 변환해주는 페이지를 엽니다.
  
  
• RegExr
  - javascript:window.open('https://regexr.com/', 'regexr', 'toolbar=0, status=0, resizable=1, width=1080, height=768, top=0, left=0');void(0);
  - 정규식을 작성하고 테스트 할 수 있는 RegExr 사이트를 엽니다.
  
  
• 외부 IP 주소 조회
  - javascript:var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if(xmlhttp.readyState == XMLHttpRequest.DONE) { if(xmlhttp.status == 200) { prompt('%EC%99%B8%EB%B6%80 IP %EC%A3%BC%EC%86%8C:', JSON.parse(xmlhttp.responseText).ip); } else { alert('%ED%99%95%EC%9D%B8%ED%95%A0 %EC%88%98 %EC%97%86%EC%8A%B5%EB%8B%88%EB%8B%A4.') } } }; xmlhttp.open("GET", "//jsonip.com", true); xmlhttp.send();
  - 현재 연결된 네트워크의 공인 IP 주소를 조회합니다.
  
  
• Online hash calculator
  - javascript:window.open('https://www.tools4noobs.com/online_tools/hash/', 'ohc', 'toolbar=0, status=0, resizable=1, width=800, height=600, top=0, left=0');void(0);
  - 간단히 문자열 Hash 값을 조회할 수 있는 페이지를 엽니다.
  
  
• 맞춤법 검사기
  - javascript:window.open('http://speller.cs.pusan.ac.kr/PnuWebSpeller/', 'colorhex', 'left=150, top=150, width=850 height=701, toolbar=no, scrollbars=no, status=no, resizable=no');void(0);
  - 부산대 맞춤법 검사기를 엽니다.