1 、什麼是 Bookmarklet ?
Bookmarklet ,大陸這邊一般都稱呼爲小書籤,臺灣那邊稱呼爲書籤列小程式 or 書籤小程式。它是一段 JavaScript 腳本,一般網絡上的小書籤都是一個鏈接,它的安裝非常簡單,只需要把鏈接拖到你的收藏夾裏。
以推薦到豆瓣這個小書籤爲例子,豆瓣的“推薦到豆瓣”小書籤的的安裝步驟非常詳細,在不同的瀏覽器安裝辦法:
- 添加到 firefox
把推薦到豆瓣拖到書籤工具欄上。 - 添加到 IE / Maxthon / opera
右鍵點擊推薦到豆瓣,選擇“添加到收藏夾”如果出現安全警報: “您正在添加一個可能不安全的收藏頁。是否繼續?” 選擇“ 是” 。 - 添加到 safari
把推薦到豆瓣拖到書籤工具欄上
在收藏夾工具欄或者收藏夾裏點擊推薦到豆瓣就會彈出“推薦當前網頁到豆瓣”的窗口。非常方便。
2 、收集小書籤
這兩個站點都是英文,非常棒。
- Bookmarklets 放在書籤裏的實用瀏覽器小工具補完列表 by 電腦玩物
內容摘要: GmailThis 、 TinyURL 、 BugMeNot 、 FormTextResizer 、 View Password 、網頁全文翻譯、 Google 的翻譯工具、 Technorati 鏈接資料查詢工具 …..
MovableType it + del.icio.us it + Flickr it
添加到 Google Reader 、站內搜索、搜索反向鏈接的頁面、顯示網頁快照、查看 PageRank…..
超強的 DOM 調查的 Bookmarklet ,只要 mouse over 就可以得知當前所在的 html 的 element 的資料。
雖然有 Web Developer Toolbar 這個火狐擴展,但這個書籤是網頁設計愛好者必備的。有網格、標尺、測量、座標。能夠非常方便得測量網頁。
有些和上面的重複。
有些和上面的重複
我的電腦是寬屏,特別是在有 NBA 轉播的時候,常常會把 Firefox 的窗口變小,一邊看比賽一邊上網看新聞。而每次都用鼠標去拖拽改變大小很不方便。現在利用 Bookmarklet 可以很方便的實現。
從 Jesse’s Bookmarklets Site 精選出來的:
- =0%20){%20spannode=document.createElement%20(%20"SPAN"%20)%20;spannode.style.backgroundColor="yellow";middlebit=node.splitText%20(%20pos%20)%20;endbit=middlebit.splitText%20(%20len%20)%20;middleclone=middlebit.cloneNode%20(%20true%20)%20;spannode.appendChild%20(%20middleclone%20)%20;middlebit.parentNode.replaceChild%20(%20spannode,middlebit%20)%20;++count;skip=1;%20}}%20else%20if%20(%20%20node.nodeType==1&&%20node.childNodes%20&&%20node.tagName.toUpperCase%20()%20!="SCRIPT"%20&&%20node.tagName.toUpperCase!="STYLE"%20){%20for%20%20(%20var%20child=0;%20child%20<%20%20node.childNodes.length;%20++child%20){%20child=child+searchWithinNode%20(%20node.childNodes[child],%20te,%20len%20)%20;%20}}%20return%20skip;%20}%20window.status="Searching%20for%20'"+text+"'...";searchWithinNode%20(%20document.body,%20text.toUpperCase%20()%20,%20text.length%20)%20;window.status="Found%20"+count+"%20occurrence"+%20(%20count==1?"":"s"%20)%20+"%20of%20'"+text+"'.";%20})()%20;">highlight
高亮特定文字(不支持 IE ) - =0%20){%20spannode=document.createElement%20(%20"SPAN"%20)%20;spannode.style.backgroundColor="yellow";middlebit=node.splitText%20(%20pos%20)%20;endbit=middlebit.splitText%20(%20RegExp.$1.length%20)%20;middleclone=middlebit.cloneNode%20(%20true%20)%20;spannode.appendChild%20(%20middleclone%20)%20;middlebit.parentNode.replaceChild%20(%20spannode,middlebit%20)%20;++count;skip=1;%20}}%20else%20if%20(%20%20node.nodeType==1%20&&%20node.childNodes%20&&%20node.tagName.toUpperCase%20()%20!="SCRIPT"%20&&%20node.tagName.toUpperCase!="STYLE"%20){%20for%20%20(%20var%20child=0;%20child%20<%20%20node.childNodes.length;%20++child%20){%20child=child+searchWithinNode%20(%20node.childNodes[child],%20re%20)%20;%20}}%20return%20skip;%20}%20window.status="Searching%20for%20"+regexp+"...";searchWithinNode%20(%20document.body,%20regexp%20)%20;window.status="Found%20"+count+"%20match"+%20(%20count==1?"":"es"%20)%20+"%20for%20"+regexp+".";%20})()%20;">highlight regexp
支持正則表達式的高亮(不支持 IE )
下面這幾個我就不支持做成小書籤了,大家到收集頁面去收藏。因爲做出來的都是失敗的,不知道是 wp 的原因還是其他因素。
- sort table
表格排序 - zap plugins
移除 java , flash ,背景音樂,第三方 Ifames - zap colors
讓頁面的顏色變成白底黑字 - zap cookies
移除當前網站的 cookie - restore context menu
還原被鎖的右鍵菜單(不支持 Opera ) - restore selecting
修復無法選擇文字的頁面。破解一些有版權保護的頁面。請勿用於非法活動。(不支持 Opera ) - up
返回到上一層地址。等於資源管理器的“向上”按鈕。比如可以讓你從 www.appinn.com/a/b.html 快速訪問到 www.appinn.com/a/ - increment
讓網址的最後一個數字加 1 ,翻頁必備 - decrement
讓網址的最後一個數字減 1 ,翻頁必備
從 bookmarklets.com 選出來的
自動滾動屏幕, Esc 停止,不支持 IE Opera
Scroll Page ( very slow )
Scroll Page ( slow )
Scroll Page ( fast )
Scroll Page ( very fast )
私藏?你竟然敢私藏!?哎呀我不是放出來了嘛,大部分都是我根據一些小書籤修改的。我不敢保證支持所有瀏覽器,我只能保證 firefox 是沒問題的。
圖片收集狂必備:
OnlyListImage
ListJPG
ListGIF
ListPNG
ListBMP
這些是在新窗口列出當前頁面圖片,會處理重複圖片,印象中這幾個是我修改的。
ShowSelectPic
在新窗口顯示選中的圖片。
煎蛋有
個規矩:數字,英文和中文交界的地方要留空格。這是個非常好的習慣,可以讓讀者看文章更輕鬆。想要證據?打開 word
輸入寫點中英文看看吧。強烈呼籲所有寫博的朋友都養成這個習慣。只是有時候會忘記或者懶得空格,所以就有了這個小書籤。適合 wordpress
用戶。因爲發生很奇怪的問題,我沒辦法把下面的代碼寫成一個鏈接,所以只能委屈大家新建一個書籤,在地址中粘貼下面的代碼。
javascript:(function(){var
q;q=document.getElementById(’content’).value;q=q.replace(/([a-zA-Z0-9~!@#/$%/^&/*-_/+=,//?:/%22]+)/g,%22%20$1%20%22);q=q.replace(/%20′%20/g,%22′%22);q=q.replace(/%20%20/g,%22>%22);q=q.replace(/(%20+)/g,%22%20%22);document.getElementById(’content’).value=q;})();
其他看圖片設置:
Bookmarklet Builder 方便書寫小書籤的工具。對於開發者,可以把多行代碼變成一行( Compress )。對於學習者,可以把小書籤展開成多行( Format )。
blummy 小書籤太多了怎麼辦?建立幾個文件夾分類,或者使用這個服務,詳細介紹請看凡人弄的文章
另外 realazy 的文章在討論寫 bookmarklet 的注意點。
這裏還有一篇教學:如何爲一個搜索引擎創建搜索小書籤(英文)
現在很多的 web 2.0 都提供這樣方便的提交內容的小書籤,比如 Google Reader 的 note,還有 evernote 等等,非常多。所以我們要善用這些神奇的小工具來提供上網效率。
看到這裏,你會覺得 Bookmarklet 和火狐擴展 Greasemonkey ( IE 下的 IE7Pro 也有這個擴展)的功能重複了。 BookMarklet 是手動, Greasemonkey 是全自動的。 BookMarklet 是作爲 Greasemonkey 的一個補充工具。
IE 用戶可以爲小書籤設置一個快捷鍵:
在小書籤上右擊選擇“屬性”,在“快捷鍵”一欄輸入按下快捷鍵,然後點擊確定,IE
會彈出一個對話框:“javascript”協議沒有已註冊的程序。是否仍保留這一目標?選擇“是”。
用法當然是按下設置好的快捷鍵了。
火狐用戶可以設置一個“關鍵字”,關鍵字可長可短:
同樣是在小書籤上右擊選擇“屬性”,比如我爲 OnlyListImage 設置的關鍵字爲 li。用法是:在地址欄輸入 li,並回車。(快速把光標定位到地址欄的快捷鍵是 Alt + D)
Vane 補充:
推薦一個搜索 verycd 資源的書籤,還有一個blackr 瀏覽 flickr 時去除其他頁面元素只留圖片。
thw 補充:
羅列當前頁面上的鏈接並使其可點擊
javascript:(function(){as=document.getElementsByTagName("a");str="";for(i=0;i.length;i++){str+="rel="nofollow">"+as[i].href+"/n"}str+="";with(window.open()){document.write(str);document.close();}})()
likin 補充:
來遲啦,我也來推薦一個,網頁日翻中:
javascript:location.href=%22http://www.worldlingo.com/wl/mstranslate/UP26384/T1/P2/l/zh/microsoft/computer_translation.html?wl_lp=JA-zh&wl_fl=3&wl_g_table=-3&wl_url=%22+location.href;
“JA-zh”換掉就可實現其它語言之間的翻譯,部分如下:
ENzh=〉英翻中
zhEN=〉中翻英
JA-zh=〉日翻中
zh-JA=〉中翻日
ZH_CN-ZH_TW=〉簡轉繁
ZH_TW-ZH_CN=〉繁轉簡
DEzh=〉德翻中
NL-zh=〉荷翻中
ELzh=〉希翻中
ESzh=〉西翻中
PTzh=〉葡翻中
RUzh=〉俄翻中
KO-zh=〉韓翻中
本文轉自
http://www.appinn.com/bookmarklet/