최근에 Bookmarklet의 존재를 알았습니다. 브라우저 AddOn만 개발해서 써오던 저에겐 나름대로 신세계 였네요. 오늘은 Bookmarklet에 대한 이야기를 하려합니다.
Bookmarklet
Bookmarklet은 즐겨찾기, 즉 북마크 주소에 자바스크립트를 구문을 추가한 형태로 북마크를 클릭하여 링크 이동이 아닌 원하는 Javascript 구문을 처리하도록 구성한 것을 말합니다. 브라우저에서도 이를 공식적으로 지원하고 있기 때문에 마치 Browser Extension을 쓰는것과 비슷한 효과를 낼 수 있습니다.
JS를 이용해 처리할 수 있는 모든 부분은 Bookmarklet으로 만들 수 있겠죠.
재미있는점은 Bookmarklet은 Browser Extension과 동일하게 페이지 자체에 Javascript가 Inject 됩니다. 그래서 다른 보안적인 정책을 피해 현재 보이는 페이지의 Object를 제어할 수 있습니다.
Bookmarklet vs Browser Extension
둘다 비슷하지만 서로 장단점이 확실하게 존재합니다. 일단 Javascript base로 동작하고 현재 페이지에 Injection 되서 동작한다는 점은 공통적이고 아주 좋습니다.
굳이 차이를 보자면..
- Bookmarklet
- 만들기 쉬움 (단순히 Javascript 코드를 끌어서 Bookmark 공간에 넣어주면 됩니다)
- UI 구성이 어려움, 북마크에만 넣을 수 있음 (물론 Javascirpt 단으로 만들 수도 있으나 AddOn에 비해 비효율적)
- Browser Extension
- 만들기 위해서 JS 이외에 부가적인 코딩이 필요함(해봤자 HTML/CSS)
- 코딩 후 압축, Extension 항목에서 로드하여야 사용할 수 있습니다. 코드를 변경할때마다 번거로움이 따라옵니다.
- UI 구성이 편리하고, HTML 영역 구성이 가능
- 이외 브라우저에서 제공하는 API를 사용할 수 있음
가벼운 기능이라면 Bookmarklet이 압도적으로 편리할 것이고 여러 기능과 UI 구성이 필요하다면 Extension쪽이 좋을 것 같습니다.
Write code
작성은 간단합니다. a 태그의 href에 javasciprt:를 포함하여 스크립트가 실행되로록 앵커 태그를 구성한 후 bookmark 영역으로 드래그 엔 드랍하여 사용할 수 있습니다.
<a href="javascript:/* 실행할 구문 작성 */">Bookmarklet</a>
한가지 예를 들어보면, jsonip.com에 IP를 조회하는 코드를 작성해봅시다.
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == XMLHttpRequest.DONE) {
if(xmlhttp.status == 200) {
prompt('Public IP:', JSON.parse(xmlhttp.responseText).ip);
} else {
alert('eee')
}
}
};
xmlhttp.open("GET", "//jsonip.com", true); xmlhttp.send();
이를 한줄로 만들어서 앵커태그에 넣어보면..
<a href="javascript:var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if(xmlhttp.readyState == XMLHttpRequest.DONE) { if(xmlhttp.status == 200) { prompt('Public IP:', JSON.parse(xmlhttp.responseText).ip); } else { alert('eee') } } }; xmlhttp.open('GET', '//jsonip.com', true); xmlhttp.send();">
MyIP
</a>
