확장기능만 개발해서 써오던 저에겐.. 나름대로 신세계 였네요.
(이 좋은걸 모르고 썼었다니 =_=)
오늘은 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/BookmarkletHAHWULSecurity engineer, Gopher and H4cker! |
0 개의 댓글:
Post a Comment