把 WebCompat issue 轉到 Bugzilla 的 Firefox WebExtension — Prototype

Eric MD Tsai
Aug 24, 2017 · 4 min read

=== 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。從前述的需求,開發時會需要:

  1. WebExtension 的基本設定
  2. 一個背景處理的 script background.js
  3. Firefox 工具列上的按鈕,和按下之後彈出的介面和動作。

整體的流程是:

  1. https://webcompat.com/issues/#### 處理某個 issue 的時候才會啟用。
  2. 啟用時可以按下工具列上的按鈕,會顯示一個彈出選單,選擇是要開新 bug 還是要加到已知 bug 的 See Also。
  3. 按下送出後,開新 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 的時間點,會是:

  1. 開新 tab
  2. 收到新 tab loading event
  3. 插入程式碼
  4. 收到新 tab complete event

目前我的做法是照上面的寫法,開完新 tab 後就直接插入程式碼,在 prototype 中是還能動。不過不知道未來需要做比較複雜的流程時會遇到什麼問題。

Prototype 的程式碼可以參考這裡。文行至此,已經開始往正式版發展,希望在本季能完成這個 extension。

)
Eric MD Tsai

Written by

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade