Bookmarklets

Bookmarklet是輕量級JavaScript程式,以網址(URL)的形式被存為瀏覽器中的書籤,因此被稱為Bookmarklet。桌面瀏覽器大多支援Bookmarklet,不過桌面瀏覽器通用的Bookmarklet,在手機上會遇到各式各樣的問題,不同Android版本、不同瀏覽器都有各式各樣的問題發生。目前評估Bookmarklet最適用的瀏覽器仍然是Naked Browser。

常用Bookmarklet(WordPress文字顯示格式非常奇怪,引號會變成奇怪符號,可能要手動更正):

●Google Search
javascript:q=prompt(‘Search’,”);if(q!=null)location=’http://www.google.com/search?q=’+encodeURIComponent(q).replace(/ /g,’+’);
●Google In Site Search
javascript:(function(){q=prompt(‘Search term:’,);if(q){document.location.href=’http://www.google.com/search?q=site:’+document.location.href.split(‘/’)[2]+’ ‘+encodeURIComponent(q)}})();
●Youtube Search
javascript:q=prompt(‘Enter your search here’,”);if(q!=null)location=’http://m.youtube.com/results?q=’+encodeURIComponent(q).replace(/ /g,’+’);
●Wikipedia Search
javascript:q=prompt(‘Enter your search here’,”);if(q!=null)location=’http://en.m.wikipedia.org/w/index.php?search=’+encodeURIComponent(q).replace(/ /g,”+”);
●Wikipedia(zh) Search
javascript:q=prompt(‘Enter your search here’,”);if(q!=null)location=’http://zh.m.wikipedia.org/w/index.php?search=’+encodeURIComponent(q).replace(/ /g,”+”);
●Add to Pocket
javascript:(function(){ISRIL_H=’1164′;PKT_D=’getpocket.com’;ISRIL_SCRIPT=document.createElement(‘SCRIPT’);ISRIL_SCRIPT.type=’text/javascript’;ISRIL_SCRIPT.src=’http://’+PKT_D+’/b/r.js’;document.getElementsByTagName(‘head’)[0].appendChild(ISRIL_SCRIPT)})();
●Translate
javascript:var t=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection&&document.selection.createRange&&document.selection.createRange().text));var e=(document.charset||document.characterSet);if(t!=”){location.href=’http://translate.google.com/?text=’+t+’&hl=en&langpair=auto|zh-TW&tbb=1&ie=’+e;}else{location.href=’http://translate.google.com/translate?u=’+encodeURIComponent(location.href)+’&hl=en&langpair=auto|zh-TW&tbb=1&ie=’+e;};
●View Source
javascript:window.open(”).document.write(‘<html><head><title>page source</title></head><body><pre style=”border:1px solid #099;width:80%;white-space:pre-wrap;word-wrap:break-word”>’+unescape(document.documentElement.innerHTML).replace(/</g,’&lt;’).replace(/>/g,’&gt;’)+'</pre></body></html>’)
●Remove Cookies
javascript:(function(){C=document.cookie.split(“; “);for(d=”.”+location.host;d;d=(“”+d).substr(1).match(/\..*$/))for(sl=0;sl<2;++sl)for(p=”/”+location.pathname;p;p=p.substring(0,p.lastIndexOf(‘/’)))for(i in C)if(c=C[i]){document.cookie=c+”; domain=”+d.slice(sl)+”; path=”+p.slice(1)+”/”+”; expires=”+new Date((new Date).getTime()-1e11).toGMTString()}})()
●Night Mode
javascript:(function(){N=document.createElement(‘link’);S=’*{background:black !important;color:grey !important}:link,:link *{color:#ddddff !important}:visited,:visited *{color:#ddffdd !important}’;N.rel=’stylesheet’;N.href=’data:text/css,’+escape(S);document.getElementsByTagName(‘head’)[0].appendChild(N);})()
●Wretch User
javascript:q=prompt(‘Enter your search here’,”);if(q!=null)location=’http://www.wretch.cc/user/’+encodeURIComponent(q).replace(/ /g,”+”);
●Wretch Album
javascript:q=prompt(‘Enter your search here’,”);if(q!=null)location=’http://www.wretch.cc/album/’+encodeURIComponent(q).replace(/ /g,”+”);
●Remove Element(hsbc_ad more)
javascript:function remove(){var list=document.getElementsByClassName(“hsbc_ad more”);for(var i=0;i<list.length;i++){list[i].style.display="none";}}remove();

製作自己的Bookmarklet:

常用指令:
以「javascript:q=prompt(‘Search’,”);if(q!=null)location=’http://www.google.com/search?q=’+encodeURIComponent(q).replace(/ /g,’+’);」為例

●javascript: //「javascript:」是起始,示例中有兩個指令,彈出對話方塊要求輸入文字「prompt」指令,以及假設「if」指令
●q=prompt(‘Search’,”); //「prompt(”);」是彈出對話方塊指令,提示「Search」,要求輸入文字,並將輸入文字字串命名為「q」
●if(q!=null)//「if();」是假設指令,判斷「q」是否為零或者無效,若非則繼續執行指令,每個指令完結後都要有「;」表示完結,而此處未完
●location=’http://www.google.com/search?q=’+ //「location=’http…’」表示將網址轉為以下內容,「’http…’」是字串,最後「+」表示接續
●encodeURIComponent(q).replace(/ /g,’+’); //「encodeURIComponent(x)」指令會將輸入內容「x」轉換為瀏覽器網址列能夠閱讀的編碼
●encodeURIComponent(q).replace(/ /g,’+’); // 「x.replace(y,z)」指令會將輸入內容「x」當中的「y」取代為「z」,最後「;」表示假設指令結束

運用以上指令,只要替換「location=’http://…’」的內容,可以輕易制作出「Google Search」、「Youtube Search」「Wikipedia Search」,甚至更個人化的搜尋,例如「Fanatasica Search」(遊戲網站)、「Wretch Search」(博客網站)。

其他指令:
window.open(”).document.write(‘<html>…’) //建立新網頁,在新網頁文件中編寫「'<html>…’」
●「document.location.href=’http…’」:與「location=’http…’」幾乎一模一樣,表示將網址轉為「’http…’」字串內容
●「document.location.href.split(‘/’)[2]」:將網址以第3個斜線為標記分割,「x.split(‘y’)[z]」表示以第z+1個「’y’」為標記分割「x」
●「document.write(‘<html>…’)」 //在網頁文件中編寫「'<html>…’」
●「document.createElement(‘SCRIPT’)」 //在目前網頁文件中創建新網頁元素「SCRIPT」
●「document.getElementsByTagName(‘head’)」  //在目前網頁文件中尋找「’head’」的元素
●「document.getElementsByClassName(‘head’)」  //在目前網頁文件中尋找「’head’」的Class
●「document.getElementsById(‘head’)」  //在目前網頁文件中尋找「’head’」的Id
●「document.documentElement.innerHTML」 //取得目前網頁文件HTML編碼

(小弟初學Javascript,所知有限,如有錯誤,敬請指正)

參考資料:
http://www.squarefree.com/bookmarklets/
http://www.appinn.com/bookmarklet/
http://subsimple.com/bookmarklets/jsbuilder.htm
http://nakedbrowser.com/android/help.html

  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: