12/05/2017

[CODING] bookmarklet을 이용한 브라우저 내 기능 추가하기(vs Browser Extension)

한 1~2개월 전 쯤 Bookmarklet의 존재를 알았습니다.
확장기능만 개발해서 써오던 저에겐.. 나름대로 신세계 였네요.
(이 좋은걸 모르고 썼었다니 =_=)

오늘은 Bookmarklet에 대한 이야기를 하려합니다.

Bookmarklet?

즐겨찾기, 즉 Bookmark를 이용해서 자바스크립트를 실행할 수 있습니다. 이를 공식적으로 지원하고 있기 때문에 마치 Browser Extension을 쓰는것과 같은 효과를 낼 수 있습니다.

JS를 이용해 처리할 수 있는 모든 부분은 Bookmarklet으로 만들 수 있겠죠.

재미있는점은.. Bookmarklet은 Browser Extension과 동일하게 페이지 자체에 Javascript가 Inject 됩니다.

그래서 다른 보안적인 정책을 피해 현재 보이는 페이지의 Object를 제어할 수 있습니다.


Bookmarklet vs Browser Extension


둘다 비슷하지만 서로 장단점이 확실하게 존재합니다.
일단 Javascript base로 동작하고 현재 페이지에 Injection 되서 동작한다는 점은 공통적이고 아주 좋습니다.

굳이 차이를 보자면..

Bookmarklet
 - 만들기 쉬움
단순히 Javascript 코드를 끌어서 Bookmark 공간에 넣어주면 됩니다. 아주 쉽지요.
 - UI 구성이 어려움, 북마크에만 넣을 수 있음
JS 코딩을 아주 열심히 한다면.. UI 구성도 가능하겠지만, 이 과정 자체가 Extension보단 불편합니다.

Browser Extension
 - 만들기 위해서 JS 이외에 부가적인 코딩이 필요함(해봤자 HTML/CSS)
코딩 후 압축, Extension 항목에서 로드하여야 사용할 수 있습니다. 코드를 변경할때마다 번거로움이 따라옵니다.
 - UI 구성이 편리하고, 북마크 이외에도 넣을 수 있음
HTML 구간을 직접 작성할 수 있기 때문에 한 Extension안에 여러가지 기능을 넣기 좋습니다. 그래서 기능의 복잡도가 커진다면 Extension이 확실히 좋습니다.

이정도일 것 같습니다. 가벼운 기능이라면 Bookmarklet이 압도적으로 편리할 것이고 여러 기능과 UI 구성이 필요하다면 Extension쪽이 좋을 것 같습니다.

만들어보자


<html>

<a href="javascript:alert(document.cookie);">COOKIE</a>

</html>

alert으로 cookie 데이터를 보는 코드를 a 태그에 넣어줍니다. 그리고 해당 페이지를 로드한 후 COOKIE(이름) 을 드래그앤드롭하여 북마크 영역에 놓아줍니다.


Reference

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


HAHWUL

Security engineer, Gopher and H4cker!

Share: | Coffee Me:

0 개의 댓글:

Post a Comment