Bookmarklet이란?

최근에 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 영역으로 드래그 엔 드랍하여 사용할 수 있습니다.

1
<a href="javascript:/* 실행할 구문 작성 */">Bookmarklet</a>

한가지 예를 들어보면, jsonip.com에 IP를 조회하는 코드를 작성해봅시다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
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();

이를 한줄로 만들어서 앵커태그에 넣어보면..

1
2
3
<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>

Reference

https://en.wikipedia.org/wiki/Bookmarklet

Licensed under CC BY-NC-SA 4.0
Last updated on May 15, 2022 00:23 +0900