升級 Firefox 14 後的不慣
有天在網址列打字搜尋,沒出現想要的結果,就點網址前的 圖示——以前點它,就會把網址文字框「還原」為現在的 URL——結果點了沒反應?
於是陷入看不見 URL 的狀態…… 查查沒有解答,就不知道怎麼辦了。
(如果懶得看完全文,解答是:按 Esc 就好了)
一直忍到上週才死心面對,順便試試 Mozilla 的 Add-on Builder,結果完成一個小元件 Reset URL by Globe(未上 AMO,但 Builder 頁面即可下載 .xpi)。
Add-on Builder 初試樂趣
動手時間變很短,反而都在讀文件、想像、解謎; 寫寫直接在瀏覽器上測試,不用存檔也不用重開,感覺創造過程沒什麼干擾。
不過 Add-on SDK 已支援的東西還是跟傳統 XUL overlay 元件有點距離,寫複雜點的功能大概就沒這麼爽了。
準備開始,先了解問題
第一想知道 Firefox 為什麼改變。 很快查到 Site identity UI updates | Mozilla UX,原來 Firefox 14 把網址列的 favicon 改成一顆 site identity 按鈕——就是憑證合法時顯示綠色掛鎖,沒憑證時一律顯示小地球(其實我覺得比較像鳥頭)的按鈕—— 免得使用者看到奇怪的 favicon 誤以為是安全/不安全的網站。
要做 add-on? 初步想法
至於為什麼「點擊時復原」消失就沒查到了,說不定只是漏掉,回報一下就會加回去了;
但因為是玩 Add-on Builder 的機會,就沒多想,草草動手了。
猜測復原網址的實作應該還在,只是點地球的時候少了事件觸發而已。 所以只要在 click 事件加幾行 code 就行了吧。
先看 DOM 結構
跟改網頁一樣,想調整某個元件,總要先了解它的構造。 這時方便的工具是 DOM Inspector,只要先選 File → Inspect Chrome Document → 隨便選一個文件,再點工具列上的 Inspect 按鈕,就會開啟類似 Firebug 檢測器的功能,在瀏覽器視窗點想觀察的部份,節點就會在 DOM Inspector 中展開了。
讀原始碼,看行為實作
再來就直接爬 code,不必把整個原始碼抓下來,利用 MXR (Mozilla Cross-Reference) 網站就行了。
搜尋過程省略,最後找到幾處:
-
browser.xul#550 的
textbox#urlbar
就是網址列所在,上面有個ontextreverted
事件,看來就是「復原」功能。 -
urlbarBindings.xml#226 有前述事件 handler
handleRevert
的實作。
裡面的註解
也透露一個我不知道的用法 —— 想復原 Awesome Bar 的輸入,只要按 Esc 就好了, 早知道這招,也許就不必寫這個 add-on 了……//(前略)was scrolling when they hit escape
開始寫啦……
第一次玩,亂寫一通,後來才發現驚人事實—— revision 是公開的啊! 每次亂存檔都會被別人翻到,真是一件很糗的事啊。
總之照著 SDK 文件的 guide 就能寫出能動的元件了。
具體也就是找到小地球,幫他綁上 click 事件,請他被按的時候 gURLBar.handleRevert
而已。
我主要碰到的問題是:不知道如何存取 XPCOM 的 nsIDOMWindow(好讓我直接取用 window.gURLBar)。現階段 sdk/windows 拿不到它,只好用 unstable 的 sdk/window/utils,兩個混在一起用,最後成果也實在不太靠譜。
記憶體用量 好像有點多?
因為文章寫得有點久,所以這元件也用了一個禮拜了。
由 about:addons-memory 看來,這支小小 add-on 經常性地佔用不少記憶體,有空要再檢查一下。