사실 팁이라고 하기에도 부끄러운 간단한 장치지만 살짝 소개해봅니다.
북마클릿 : Bookmarklet
북마크[1. 익스플로러 사용자에겐 ‘즐겨찾기’라는 이름이 더 익숙하지만, 대부분의 다른 브라우저들은 북마크(책갈피)라고 하니 이렇게 부르도록 합니다.]는 보통 인터넷 주소(http:// 로 시작하지요)를 저장해둡니다. 하지만 웹 주소 대신에 자바스크립트를 등록해 두고 쓸 수도 있습니다. 페이스북 공유 북마클릿과 같은 것들이 대표적이지요. 별도의 플러그인을 설치하지 않고서도 간단히 웹 브라우저에 부가적인 기능을 더할 수 있고 또 (대부분) 브라우저 별 특성을 타지 않기 때문에 제가 무척 좋아하는 방식이기도 합니다.
이러한 북마클릿을 북마크 도구모음 (북마크가 표시된 툴 바, 보통은 주소창 아래에 있지요)에 등록해 두고 쓴다면 웹 서핑시 유용하게 쓸 수 있습니다. 인터넷 익스플로러에서도 사용 가능하므로 확장기능이 거의 없다고 봐도 좋은[3. 물론 일부 있긴합니다만, 별도의 프로그램(BHO)으로 설치해야 하고 또 그만큼 브라우저 안정성도 떨어질 수 있습니다.] IE에서 부족한 기능을 조금이나마 채울 수 있다고나 할까요. (물론 active하게 동작하는 크롬/파이어폭스의 확장 기능을 대신할 수는 없지만 말이지요.)
북마클릿 예시
북마클릿은 자바 스크립트를 조금만 할 줄 알면 아주 쉽게 만들 수 있습니다. 아래 북마클릿은 사실 별 것 아니지만, 제가 유용하게 쓰고 있는 것들 중 일부입니다. 특히 페이스북 쓸 때 스크롤을 미친 듯이 위로 올릴 필요 없이 간단히 복귀하게 해주니까 편리하게 쓸 수 있더군요.
- 화면 최상단으로 스크롤하기 – javascript:window.scroll(0,0);
- 화면 최하단으로 스크롤하기 – javascript:window.scroll(0,document.body.clientHeight);
북마클릿 만들기
북마클릿 그 자체는 북마크와 완전히 동일하다고 할 수 있으므로, 이것을 만드는 방법은 파이어폭스 및 구글 크롬에서는 북마크를 추가하는 것과 똑같으며 아주 쉽습니다. 북마클릿이 될 자바스크립트 링크를 북마크 툴바로 끌어다 놓으면 됩니다. 예시로 소개한 위의 두 북마클릿을 그냥 북마크 도구 막대에 끌어다 놓기만하면, 됩니다.
만약 완전히 새로 작성하고자 한다면, 역시 북마크 도구 막대에서 마우스 오른쪽 클릭을 한 다음 ‘새 북마크’를 만들고 주소 대신에 자바 스크립트 코드를 입력해 주면 됩니다.
인터넷 익스플로러는 이런 점에서는 조금 불편합니다. 1) 링크를 끌어다 옮기는 것이 아예 불가능하며[2. 윈도XP IE8 기준. 비스타 이상에서는 잘 모르겠습니다.] 2)현재 페이지만을 즐겨찾기에 추가할 수 있는 구조이기 때문입니다. 그리하여 편법을 쓰는 수 밖에 없습니다.
- 먼저 추가할 스크립트 코드를 복사해 둡니다. 북마클릿으로 동작하기 위해서는 javascript: 로 시작해야 하므로, 이 부분까지 복사합니다. 링크를 우클릭해서 “바로가기 복사”를 하면 모두 복사됩니다.
- ctrl+D를 눌러서 현재 페이지를 즐겨찾기에 우선 추가합니다. 즐겨찾기를 추가할 위치는 “즐겨찾기 모음”으로 하면 됩니다.
- 만들어진 즐겨찾기를 마우스 오른쪽 클릭하여 “속성”을 선택합니다.
- 즐겨찾기 속성창에서 웹 문서 탭내에 URL에 아까 복사한 자바스크립트를 붙여 넣습니다.
- 일반 탭을 클릭하고 북마클릿 이름을 입력해줍니다. 이 때, javascript 프로토콜이 지정된 응용 프로그램이 없다고 경고가 나옵니다. 가볍게 무시하고 ‘확인’ 버튼을 클릭합니다.
보너스
몇 가지 북마클릿을 더 소개해 봅니다. 페이스북, bit.ly를 제외하고는 자작 북마클릿입니다.
- 화면에 이미지를 모두 없애기
- javascript:var%20e=%20document.getElementsByTagName(“IMG”);for(i=0;i<e.length;1){e[i].parentNode.removeChild(e[i]);}alert(“done”);
- 화면에 이미지만 모두 모아 보기
- javascript:Ai7Mg6P=”;for%20(i7M1bQz=0;i7M1bQz%3Cdocument.images.length;i7M1bQz++){Ai7Mg6P+=’%3Cimg%20src=’+document.images[i7M1bQz].src+’%3E%3Cbr%3E’};if(Ai7Mg6P!=”){document.write(‘%3Ccenter%3E’+Ai7Mg6P+’%3C/center%3E’);void(document.close())}else{alert(‘No%20images!’)}
- 화면에 EMBED를 모두 없애기 (플래시, 동영상 등을 모두 날려버립니다.)
- javascript:var%20e=%20document.getElementsByTagName(“OBJECT”);for(i=0;i<e.length;1){e[i].parentNode.removeChild(e[i]);}var%20e=%20document.getElementsByTagName(“EMBED”);for(i=0;i<e.length;1){e[i].parentNode.removeChild(e[i]);}alert(“done”);
- 현재 보고 있는 페이지를 페이스북에서 공유하기 (페이스북 공식 북마클릿)
- javascript:var%20d=document,f=’http://www.facebook.com/share’,l=d.location,e=encodeURIComponent,p=’.php?src=bm&v=4&i=1269233809&u=’+e(l.href)+’&t=’+e(d.title);1;try{if%20(!/^(.*\.)?facebook\.[^.]*$/.test(l.host))throw(0);share_internal_bookmarklet(p)}catch(z)%20{a=function()%20{if%20(!window.open(f+’r’+p,’sharer’,’toolbar=0,status=0,resizable=1,width=626,height=436′))l.href=f+p};if%20(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else{a()}}void(0)
- 현재 보고 있는 페이지의 단축 URL 만들기 (bit.ly 공식 북마클릿)
- javascript:var%20e=document.createElement(‘script’);e.setAttribute(‘language’,’javascript’);e.setAttribute(‘src’,’http://bit.ly/bookmarklet/load.js’);document.body.appendChild(e);void(0);
- tumblr에서 mp3를 바로 내려받기 (mp3 다운로드 링크가 화면에 생성됩니다.)
updates
- 이미지만 추출해서 보기 추가 (2011.04.23)