[Browser] Bookmarklet

Web 2014. 8. 23. 00:35

브라우져의 북마크를 응용하는 기술인 Bookmarklet 에 대해 알아보도록 하자.


  • Bookmarklet
    • 북마크(Bookmark)와 애플릿(Applet)의 합성어.
    • 웹브라우저의 북마크를 활용한 작은 어플리케이션
    • 브라우져가 로딩된이후 북마크를 클릭하여 내부 자바스크립트가 동작는 플로우를 가진다.
  • Usage
    • 로딩된 브라우져의 정보를 외부 URL 의 Query 로 날려서 RestAPI 를 호출하거나 Dictionary lookup 등으로 영어사전등으로 활용가능하다.
    • 로딩된 DOM 등의 정보를 얻거나 수정하여 현재 배경화면 색등을 자신의 Theme 으로 변환가능하다.
    • Browser 의 window, document 등의 객체 정보와 외부 REST API 등을 활용한 다양한 방면으로 응용가능하다.


  • Basic
    • Previous knowledge for Bookmarklet
      • 다음과 같은 코드를 Browser 에서는 URL 에 "javascript" prefix 문자를 가진 contents 에 대해서는 자체적으로 파싱해서 처리

      •  <a href="javascript:alert('this is not uri');">link</a>

        Browser에서는 Bookmarklet 의 URL 정보에 기술된 Bookmarklet script 를 page 로드가 완료된뒤에 실행

      • Anonymous function 을 사용하여 namespace 충돌을 방지한다.

    • Simple Bookmarklet

      • 북마크를 클릭하였을경우 현재 브라우져의 엔진정보를 확인하는 북마클릿을 만들어보자.
        • Bookmarklet 생성 및 URI 수정
          • 임의의 북마크를 생성
          • 생성된 북마크를 수정하여 URL 에 다음과 같이 입력


          •  javascript:(function (){ alert(navigator.product);})();  

  • Advanced
    • External javascript library 삽입
      • 현재로딩된 페이지에 새로운 javascript 를 주입하는 기법
      • 기존 code symbol 과의 conflict 에 주의
      • 과한 용량의 파일을 주입하면 페이지가 멈출 수 있다

      •  javascript: (function () {

            var jsCode = document.createElement('script');
            jsCode.setAttribute('src', 'http://path/to/external/file.js');                 
          document.body.appendChild(jsCode);
         }());
    • HTML, Javascript 라이브러리나 REST 라이브러리 등의 테스트에 사용가능
      • Bookmarklet 만 배포 후 외부 URL 로 REST API 에 인자를 전달하여 테스트 가능
      • Cross-browser Test 가능
    • Validator 연동가능
    • 사용자 정의 Theme 가능
      • 사용자가 원하는 Theme 정의 가능

      •  javascript:void(document.body.style.background = 'black');


  • Practice
    • 구글검색기

      •  javascript:(function() {

        function se(d) {
         return d.selection ? d.selection.createRange().text : d.getSelection()
        }
        s = se(document);
        for (i=0; i<frames.length && !s; i++) s = se(frames[i].document);
        if (!s || s=='') s = prompt('Enter%20search%20terms%20for%20Google','');
        open('https://www.google.co.kr' + (s ? '#newwindow=1&q=' + encodeURIComponent(s) : '')).focus();
        })();
    • 메모장
      • Twitter 에 Mike Francis 가 bookmarklet code snippet 을 올린것이 화재
      • https://twitter.com/_mikefrancis/status/469788991668383744

      •  data:text/html, <body contenteditable style="font: 2rem/1.5 monospace; max-width:60rem; margin:0 auto; padding:4rem; ">
    • 게임
      • http://kathack.com/

      •  javascript:var i,s,ss=['http://kathack.com/js/kh.js','http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'];for(i=0;i!=ss.length;i++){s=document.createElement('script');s.src=ss[i];document.body.appendChild(s);}void(0);
    • The Printliminator
      • http://css-tricks.com/examples/ThePrintliminator/



저작자표시

'Web' 카테고리의 다른 글

Concurrency Programming of Web  (0) 2014.11.27
[Chrome] Your profile could not be opened correctly  (0) 2014.10.24
Browser Object Model  (0) 2014.02.03
[Browserling] Cross Browser Testing Service  (0) 2013.12.10
[Brackets] Open source code editor for the web  (2) 2013.12.10
Posted by leechwin
,

티스토리툴바