Namako

海參的潮間帶工作室

來寫個bookmarklet吧

前幾年某天深夜想對某個網站做一些操作,卻發現該站沒有使用 jquery,那時候就在想有沒有一個可以快速注入 jquery 到網站內的方法,後來就找到這個東西- bookmarklet 書籤列小工具。

原理

他其實就是把 javascript 的程式碼存在書籤的網址列裡面,當你點擊書籤的時候就會執行網址列內的程式碼片段,藉此完成你預計完成的任務。

格式

實際在撰寫的時候,外層要額外包裹起來才能存成書籤執行,所以你的程式碼最後會長這樣:

1
2
3
javascript: (function () {
//your code
})();

我有在 github 上開一個 repo 放我寫過的小工具,可以參考看看
janelin612/bookmarklets

限制

這東西肯定不是萬能的,需要注意以下幾點

  • 長度:他被視為一段網址,長度受到瀏覽器的網址長度限制,因此在開發上就是要努力精簡程式碼啦。
  • CORS:別忘了他還是在前端執行的,所以它一樣要遵守跨網域存取的規範,這其實大大限制了小工具能做的事情,但沒辦法嘛,安全性問題。

後記

  • 如果你是 Firefox 的使用者,可以使用程式碼速記本協助開發,比 F12 的主控台好寫(但你還是得開 F12 看 console 就是了)
  • 這玩意如果是惡意的用途,就算是一種Self-XSS,所以拿到別人分享的小工具還是要先看一下程式碼有沒有問題不要傻傻地就執行下去了

Hi 喜歡這篇文章的話 可以按個讚或請我喝杯咖啡
Buy me a coffeeBuy me a coffee

目錄