試改 Chrome Extension

extension Create Link 滿好用的, 可以自定取出網址和網頁標題的格式, 方便貼到 blog 或是 plurk。美中不足的是, 它沒支援短網址。有不少 extension 提供短網址服務, 可惜沒提供像 CreateLink 那樣自制的格式, 讓我能按一個鍵就取出短網址並以我想要的格式排版。比方說按個鍵產生 "SHORT_URL (TITLE)", 就能直接貼到 plurk 上了。

看了一下 Shorten URLs 和 Create Link 的程式碼後, 決定抽出 Shorten URLs 產生短網址的程式碼, 加到 CreateLink 裡。比想像中簡單許多, 懂 JavaScript 的話, 只要了解 Chrome Extension 的規範, 就能輕易上手。不過不知是不是 Chrome 的問題, 有時 Extension 會沒反應, 但重開 Chrome 就好了。

改完的結果在這裡, 整個修改流程如下:

1. 閱讀 Chrome Extension 的入門教學。照著做一遍就會了, 再看一下如何除錯就能上工了。
2. 在 github 上 Fork CreateLink 的專案, open source 真好啊。
3. 在 Windows 上用 TortoiseGit 連 github, 這一步花掉我最久的時間, 實在是很挫折的事。參考官網說明。途中遇到不少問題, 最後不知怎麼弄對了, 懶得理了。下回考慮用 andLinux 連 github。不過這樣得溫習 git 的指令, 原本就是懶得查指令, 結果讓 TortoiseGit 能和 github 連線, 反而花了更多時間...。
4. 載入本機未封裝的 CreateLink, 改一下 manifest.json, 確定自己的修改有發揮作用。個人認為改程式時, 這是最重要的第一步, 愈早完成愈好。
5. 看一下 Shorten URLs 的程式明白怎麼用 XmlHttpRequest 透過 GET 連網站, 再查一下相關參數說明, 將 async 設成 false 即可。將程式寫成等三秒沒結果就放棄短網址改用原網址。原本有考慮用 jQuery 做, 看到原作者全部檔案加起來都比 jquery-1.4.2.min.js 小 (34.2KB vs. 70.4KB), 就打消這個念頭了。
6. 為了能用 JavaScript 連 tinyurl 使用它的 API, 得在 Chrome Extension 裡允許 cross site javascript, 參考官網說明輕鬆解決。
7. Create Link 程式寫得很乾淨, 改起來很容易。最後卻是花了不少時間將改完的結果 push 回 github。

第一次改別人的程式並 push 回 open source repository (雖說只是 push 回自己的啦), 還有寫瀏覽器擴充套件, 滿有意思的。最後, 就用剛才改好的 CreateLink 產生連結貼到微網址吧!!