把 WebCompat issue 轉到 Bugzilla 的 Firefox WebExtension — Prototype
=== 2017–10–11 更新 ===
這個 WebExtension 已經在近日上傳到 https://addons.mozilla.org/en-US/firefox/addon/webcompat-to-bugzilla/
中間有一些新的需求的新增,不過基本上沒有太大的變化,主要是加入了利用 local storage 還有 hard-coded 的一些列表。
=== 以下原文 ===
這一季有一個工作項目是開發一個 WebExtension,主要的目的是配合整個團隊的目標,建立讓更多志工進來協同工作的環境,以及加強人員工作的效率。
在每天的例行工作中最主要的就是新進 issue 的判定和分析,當然許多發生在 Firefox 上的問題最後都要回歸到 bugzilla 上,開一個新 bug;或是重覆的問題,加到已知 bug 的 See Also 欄位下。在 San Francisco All hands 的時候,Adam、Karl 和我三位目前最主要在判定問題的成員,都覺得需要一個 WebExtension 來減少許多人工的行為。既然說了,就來做一個 Prototype 給大家試用吧!
開發 WebExtension 的入口點在 MDN。從前述的需求,開發時會需要:
- WebExtension 的基本設定
- 一個背景處理的 script background.js
- Firefox 工具列上的按鈕,和按下之後彈出的介面和動作。
整體的流程是:
- 在 https://webcompat.com/issues/#### 處理某個 issue 的時候才會啟用。
- 啟用時可以按下工具列上的按鈕,會顯示一個彈出選單,選擇是要開新 bug 還是要加到已知 bug 的 See Also。
- 按下送出後,開新 bug 會停留在新 bug 輸入頁,讓使用者確認正確無誤之後再送出。加到已知 bug 的話,就會打開輸入 bug 編號的網址,點選 Edit Bug,和點選 See Also 的按鈕,填入原始 URL。所以一切的動作只是自動填入,需要原來的使用者先登入,不用 restful API 自動發 bug,也不用使用者填 API key。
實作的時候有發現幾個問題:
首先,彈出選單是一個 popup.html 頁面,我可以載入一個 popup.js,但是在我把 popup.html 關掉之後,他就立刻結束了,所以我必需要把選擇保存起來,傳回 background.js 處理。
研究了一下,看起來 popup.html 應該是一個暫時的 content process,所以我可以視 popup.js 為 content script,所以可以透過 runtime.sendMessage 從 popup.js 傳出選擇和 runtime.onMessage 在 background.js 收到選擇並處理。這邊產生的問題就是 popup.js 在 popup.html 關閉之後就消失了,偏偏在 debug 的時候只要滑鼠離開就會關閉。現在只能先在 browser console 印 log 來 debug,或許 remote debug 也是可行的。總之 popup 要寫的簡單一點,太複雜會搞死自己。
第二個比較麻煩,在 background.js 收到來自 popup.js 的指令(要開新 bug 或是加到 See Also)之後,要在新的 tab 中插入一段程式碼要做指定的事。用 tabs.onUpdated 去聽,新開的 tab 的時間點,會是:
- 開新 tab
- 收到新 tab loading event
- 插入程式碼
- 收到新 tab complete event
目前我的做法是照上面的寫法,開完新 tab 後就直接插入程式碼,在 prototype 中是還能動。不過不知道未來需要做比較複雜的流程時會遇到什麼問題。
Prototype 的程式碼可以參考這裡。文行至此,已經開始往正式版發展,希望在本季能完成這個 extension。
