크롬, 파이어폭스, 익스플로러등에서 북마클릿(bookmarklet)을 이용해보자.

  요즘은 익스플로러 외에도 크롬, 파이어폭스, 오페라, 사파리등 다양한 브라우저를 사용하는 분들이 많으실 겁니다. 저는 개인적으로 크롬(chrome) 브라우저를 주로 사용합니다. 아시다시피 크롬에는 크롬웹스토어를 통해 다양한 확장프로그램을 설치하여 사용할 수 있는데, 너무 많은 확장프로그램을 설치했을 경우 브라우저에 부담을 주어 속도 저하의 원인이 되기도 하죠. 그래서 저는 되도록 가용 확장프로그램의 수를 줄이고 pig toolbox 외에는 주로 북마클릿을 이용합니다.

 일단 북마클릿이란 북마크(즐겨찾기)와 애플릿(applet)의 합성어로 웹브라우저의 북마크를 활용한 작은 어플리케이션이라 보면 됩니다. 크롬은 물론 파이어폭스, 익스플로러, 오페라, 사파리등 다양한 브라우저에서 사용 가능합니다.

 사용법은 아주 간단합니다. 해당 북마클릿을 마우스로 드래그 하여 북마크바에 고대로 추가하는 방법과, 북마크에 하나의 새 북마크를 생성 후 url 주소에 해당 북마클릿의 소스 코드를 입력해주는 방법이 있습니다.

                                                  (첫번째 방법 예시)

                                                  (두번째 방법 예시)

 유용한 북마클릿 몇개만 소개해 드리겠습니다. 새 북마크를 생성한 후 url에 소스 코드를 붙여넣기 해주면 됩니다.


1. 네이버 영어사전: 팝업 형태의 네이버 영어사전으로, 해당 북마크를릿 클릭후 찾고자 하는 단어를 더블클릭하거나 드래그하면 됩니다.

 소스 코드(소스 코드 출처: http://me2.do/5cit8D2M):
 javascript:(function() {if (document.getElementById('endicIframe')) {return;}var iframe = document.createElement('iframe'),closeBtn = document.createElement('button'),endicUrl = 'http://endic.naver.com/popManager.nhn?m=search';iframe.id = 'endicIframe';iframe.src = endicUrl;iframe.style.position = 'fixed';iframe.style.top = 0;iframe.style.right = 0;iframe.style.width = '400px';iframe.style.height = '500px';    iframe.style.border = '1px solid #ddd';    iframe.style.background = 'white';    iframe.style.zIndex = 10000;        closeBtn.type = 'button';    closeBtn.innerHTML = '닫기';    closeBtn.onclick = function () {    document.body.removeChild(iframe);    document.body.removeChild(closeBtn);    };    closeBtn.style.position = 'fixed';closeBtn.style.top = 0;closeBtn.style.right = 0;closeBtn.style.padding = '7px 10px';closeBtn.style.zIndex = 11000;        document.body.appendChild(iframe);    document.body.appendChild(closeBtn);        document.addEventListener('mouseup', function () {    var query = document.getSelection().toString();    if (query) {    iframe.src = endicUrl + '&query=' + query;    }    }, false);})();

2. 구글 번역: 선택한 문장이나 단어를 번역해줍니다.

 소스 코드(소스 코드 출처:  http://ufx.kr/blog/822):
 javascript:void(q=prompt('Google Translate :',getSelection()));if(q)void(window.open('http://translate.google.co.kr/?hl=ko#en|ko|'+encodeURIComponent(q)))

3. 사이트 번역: 사이트 전체를 번역해줍니다.

 소스 코드(소스 코드 출처: http://me2.do/5xYoqfmE):
javascript: void(window.open('http://translate.google.com/translate?hl=ko&sl=auto&tl=ko&u=' + document.location.href));

4. Evernote Web Clipper: 관심사에서 조사에 이르기까지 텍스트, 링크 및 이미지를 포함하여 온라인으로 표시되는 모든 내용을 클릭 한 번으로 Evernote 계정에 저장 할 수 있습니다.

 소스 코드(소스 코드 출처:  http://me2.do/FiG6CLf0):
 javascript:(function(){EN_CLIP_HOST='http://www.evernote.com';try{var x=document.createElement('SCRIPT');x.type='text/javascript';x.src=EN_CLIP_HOST+'/public/bookmarkClipper.js?'+(new Date().getTime()/100000);document.getElementsByTagName('head')[0].appendChild(x);}catch(e){location.href=EN_CLIP_HOST+'/clip.action?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title);}})();

5. me2.do 단축하기: 복잡하고 긴 url을 짧게 줄여줍니다.

 소스 코드(소스 코드 출처:  http://me2.do/):
javascript:var d=document,w=window,enc=encodeURIComponent,f='http://me2.do/bookmarklet/',l=d.location,p='?u='+enc(l.href) ,u=f+p;try{a =function(){w.open(u,'','width=980px,height=530px')};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else a();}catch(z){alert('error')}void(0)

6. 유튜브 다운로드: 이름 그대로 유튜브 영상을 다운로드 할 수 있습니다. 북마클릿 클릭시 다운로드 버튼이 생성됩니다.

 소스 코드(소스 코드 출처:  http://me2.do/FyLYgJds):

javascript:(function(){document.body.appendChild(document.createElement('script')).src='http://userscripts.org/scripts/source/25105.user.js'})();

7.  Page Reboot: 해당 페이지를 일정 간격으로 자동으로 새로 고침 해줍니다.

 소스 코드(소스 코드 출처: http://me2.do/xoBmmfeY):

javascript:location.href = 'http://www.pagereboot.com/?url=' + location.href;

8. Save Page as PDF: 해당 페이지를 다운로드 가능한 PDF로 변환해줍니다. 이메일을 통해 변환된 PDF 파일을 다운로드 할 수 있습니다. 

 소스 코드(소스 코드 출처: http://me2.do/GZTkD9e2):

 javascript:void(window.open('http://www.pdfdownload.org/web2pdf/Default.aspx?left=0&right=0&top=0&bottom=0&page=0&cURL='+document.location.href));

 9. BugMeNot: 자주 방문하는 사이트가 아닌 경우나 우연히 들른 사이트의 경우 회원가입을 해야 사이트를 이용할 수 있는데 회원가입을 하기에는 뭔가 꺼림칙할 때가 있을 겁니다. 해당 북마클릿 클릭시 임의의 아이디와 비밀번호를 제공해줍니다.

 소스 코드(소스 코드 출처:  웹초보님 블로그):

javascript:(function(){w=open(('http://www.bugmenot.com/view/'+escape(location)),'w','location=no,status=yes,menubar=no,scrollbars=yes,resizable=yes,width=500,height=400,modal=yes,dependent=yes');if(w){setTimeout('w.focus()',1000)}else{location='http://www.bugmenot.com/view/'+escape(location)}})();

10. Ultimate Highlight: 해당 페이지에서 특정 단어나 문장을 강조해줍니다.

 소스 코드(소스 코드 출처: 웹초보님 블로그):

javascript:var AlwaysAsk=0,ShowFollowUp=1,UseCookies=1,ShowStats=1;var gCount,gText,gKeywords,gRE;var d1=new Array(),d2=new Array(),d3=new Array();var colors=new Array('#ff6','#A0FFFF','#9f9','#f99','#f6f','coral','lime','chartreuse','deepskyblue','fuchsia','gold','indianred','silver','lightsteelblue','olive','orange','lightblue');function hhGoto(here){var a=document.getElementById('anch'+d1[here]);a.href='#g7z'+d1[here]+d3[here];a.childNodes[1].firstChild.data=' / '+(d3[here]+1);d3[here]++;if(d3[here]>=d2[here])d3[here]=0;}function hhCloseDiv(){if(ar=document.getElementById('divz7rx8v')){if(window.opera){ar.removeNode(true)}else{var arL=ar.childNodes.length;for(i=0;i<arL;i++){ar.removeChild(ar.childNodes[0]);}ar.parentNode.removeChild(ar);}}}function hhCreateDiv(){if(ShowFollowUp){var divel=document.createElement('div');var bza='';br='<br style=\'display:inline\'/>';divel.id='divz7rx8v';divel.style.position='fixed';divel.style.top=0;divel.style.right=0;divel.style.padding='5px 14px';divel.style.backgroundColor='#fff';divel.style.border='1px solid #aaa';divel.style.zIndex=9000;bza+='<a href=\'javascript:Highlight();Highlight();\'>new</a> / <a href=\'javascript:hhCloseDiv();\'>close</a> / <a href=\'javascript:Highlight();\'>exit</a>'+br;for(i=0;i<d1.length;i++)bza+=(d2[i]==0?'':'<a href=\'#\' id=\'anch'+d1[i]+'\' onclick=hhGoto(\''+i+'\')>')+d1[i]+' : '+d2[i]+'<span> </span>'+(d2[i]==0?'':'</a>')+br;divel.innerHTML=bza;document.body.appendChild(divel);}}function hhGetCookie(){if(UseCookies){if(document.URL.indexOf('.google.')==-1){var search='AgoHighlight=';if(document.cookie.length>0){offset=document.cookie.indexOf(search);if(offset!=-1){offset+=search.length;end=document.cookie.indexOf(';',offset);if(end==-1)end=document.cookie.length;gText=decodeURIComponent(document.cookie.substring(offset,end));}}}}}function hhSetCookie(){if(UseCookies)document.cookie='AgoHighlight='+encodeURIComponent(gText)+';path=/;';}function CheckSearchString(text){var x=text;if(text==null)return;if(text.length==0)return;text='|'+text.replace(/([\x00-\x20\x28-\x29\x7B-\xBF]|\+)+/g,'|')+'|';text=text.replace(/\|+/g,'|');if(!text.length>1)return;gKeywords=null;gRE=null;gText=x;hhSetCookie();gCount=null;d1.length=0;d2.length=0;d3.length=0;text=text.substring(1,text.length-1).toLowerCase();gCount=text.split('|');gKeywords=text.split('|');for (var i=gCount.length-1;i>=0;i--){d1[i]=gKeywords[i];d2[i]=0;d3[i]=0;gKeywords[gKeywords[i]]=i;gCount[gCount[i]]=0;}try{temp='(('+gKeywords.join(')|(')+'))';temp=temp.replace(/\\/g,'\\\\');temp=temp.replace(/\-/g,'\\-');temp=temp.replace(/\*/g,'\\/');temp=temp.replace(/\$/g,'\\$');temp=temp.replace(/\^/g,'\\^');temp=temp.replace(/\./g,'\\.');gRE=new RegExp(temp,'i');}catch(er){alert('Unable to make regular expression with: '+text+'.\n\n'+er);return;}return true;}function ClearWindowHighlights(w){var i,result=false;if(framed){for (i=0;i<w.frames.length;i++){result=ClearWindowHighlights(w.frames[i])||result;}}else{result=ClearNodeHighlights(w.document.body);}return result;}function ClearNodeHighlights(node){var child,result=false,r;if(node.nodeType==1){if(node.agohighlight){result=true;node.parentNode.replaceChild(node.firstChild,node);}else if(node.childNodes&&node.tagName.toUpperCase()!='SCRIPT'&&node.tagName.toUpperCase!='STYLE'){for (child=0;child<node.childNodes.length;child++){r=ClearNodeHighlights(node.childNodes[child]);result=result||r;}}}return result;}function ShowWindowHighlights(w){var j=0;if(framed){for (j=0;j<w.frames.length;j++){ShowWindowHighlights(w.frames[j],j);}}else{ShowNodeHighlights(w.document.body,w.document);}return true;}function ShowNodeHighlights(node,mydoc){var nkeyw,match,pos=0,skip=0,spannode,middlebit,endbit,middleclone;if(node.nodeType==3&&node.data){tmpdata=node.data.replace(/(\<SELECT.+\<\/SELECT.?\>|\<TEXTAREA.+\<\/TEXTAREA.?\>)/gi,'');pos=tmpdata.search(gRE);if(pos>=0){match=RegExp.$1.toLowerCase();nkeyw=gKeywords[match];gCount[match]++;spannode=mydoc.createElement('SPAN');spannode.agohighlight=true;spannode.style.border='dashed black 1px';spannode.style.fontWeight='bold';spannode.style.color='black';spannode.style.backgroundColor=colors[nkeyw];middlebit=node.splitText(pos);endbit=middlebit.splitText(match.length);middleclone=middlebit.cloneNode(true);spannode.appendChild(middleclone);middlebit.parentNode.replaceChild(spannode,middlebit);skip=1;if(ShowFollowUp){anch=mydoc.createElement('a');anch.class_gz5rt7vw='true';anch.id='g7z'+d1[nkeyw]+d2[nkeyw];spannode.parentNode.insertBefore(anch,spannode);d2[nkeyw]++;skip=2;}}}else if(node.nodeType==1&&node.childNodes&&node.tagName.toUpperCase()!='SCRIPT'&&node.tagName.toUpperCase!='STYLE'){for (var child=0;child<node.childNodes.length;++child){child=child+ShowNodeHighlights(node.childNodes[child],mydoc);}}return skip;}function Highlight(){var text,i;var f=window.top.frames;if(framed=(f.length>document.getElementsByTagName('iframe').length))ShowFollowUp=0;if(ClearWindowHighlights(window)||document.getElementById('divz7rx8v')){hhCloseDiv();return;}if(gText==null)hhGetCookie();if(gText==null){if(document.referrer.indexOf('google')!=-1&&document.referrer.indexOf('q=')!=-1){var queryTermsRegExp=new RegExp('q=([^&]+)');if(queryTermsRegExp.test(document.referrer)){text=RegExp.$1.replace(/\+/g,' ');text=decodeURI(text);}}if(document.URL.indexOf('google')!=-1&&document.URL.indexOf('q=')!=-1){var queryTermsRegExp=new RegExp('q=([^&]+)');if(queryTermsRegExp.test(document.URL)){text=RegExp.$1.replace(/\+/g,' ');text=decodeURI(text);}}}text=(AlwaysAsk||!text)?prompt('Highlight keywords:',(gText==null?((text==null)?'':text):gText)):text;if(!CheckSearchString(text))return;ShowWindowHighlights(window);if(ShowFollowUp){hhCreateDiv();}else if(ShowStats){text='';for (i=0;i<gCount.length;i++){text+=gCount[i]+': '+gCount[gCount[i]]+'\n';}text='Items found:\n'+text+'';alert(text);}}Highlight();

                                         (페이지 내에서 his를 검색한 경우) 

11. Google Site Search: 임의의 사이트 내에서의 검색 결과를 알고 싶을때...예를 들어 ooo사이트에서 아이폰과 관련된 글들을 모두 검색하고 싶은 경우, 북마클릿 클릭 후 아이폰을 입력하면 해당 사이트 내의 아이폰관련 구글 검색 결과를 모두 보여줍니다.

 소스 코드(소스 코드 출처: 웹초보님 블로그):

javascript:(function(){q=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection &&document.selection.createRange&&document.selection.createRange().text));q=q.toString();if(!q){q=prompt('Search terms [leave selection and box blank to list all pages] ... ');}if(q!==null){window.location='http://www.google.com/search?q=site:'+window.location.hostname+' '+q;}})();

                                  (개소문 사이트에서 아이폰으로 검색한 경우)