把 Chrome Extension 移到 Firefox 上

Mozilla Taiwan
Aug 31, 2017 · 6 min read

本文作者:呂行

三年前,為了專心寫碩士論文,我寫了 FocusBlocker 附加元件。那是個網站攔截工具,可以阻止我每隔五分鐘刷一次臉書,但又不像其他的攔截器(如LeechBlock)一樣會要你設固定的時間。FocusBlocker 的作法是讓你設一個額度,譬如:我可以先瀏覽臉書 10 分鐘,然後封鎖臉書訊息 50 分鐘。只要你還有剩餘的限額,隨時都可上臉書。我很高興大家覺得這個工具很好用,我甚至還因為使用者滿意度很高,而第一次經由 AMO(Mozilla Add-ons)獲得用戶捐款。

因為這個擴充功能符合我的需求,所以我沒有積極地維護或增加新功能。不過,我知道 Firefox 要以 WebExtension API 取代傳統的 Add-on SDK。因此,在 WebExtension API 變成全面可用以前,我便把 FocusBlocker 改成Chrome 擴充功能的格式,但一時還來不及再把它轉回到 Firefox。後來,有使用者寫信給我,希望我提供 WebExtension 的版本。我查了統計數據後,發現每天的活躍使用者數目從 1000 降到 300 左右。那時,我才真正捲起袖子,在一天內把它移到 Firefox 上(雖然我後來發現,使用人數下滑不盡然是因為用戶升級到新版 Firefox 的緣故,而是因為這個改變)。我在下面分享我的作法,以及我從中學習到的經驗。

Image for post
Image for post

要改的有哪些

為了評估工作量,我們必須先看我用了哪些 API。FocusBlocker 的 Chrome 版本主要使用三個 API:

  • chrome.tabs:用來監測新開啟的分頁和攔阻已開啟分頁
  • chrome.alarm:用來設定封鎖和解除封鎖的計時器
  • chrome.storage.sync:用來儲存設定,以及確保瀏覽器重啟後計時器仍繼續計時

很棒的是,Firefox 都支援這三款 API(至少支援我用到的部分),所以,我不必更改任何 JavaScript 程式碼。

我把安裝資訊檔(manifest)直接上傳到 Firefox 的 about:debugging 頁(或者你也可使用方便的 web-ext 命令工具),但被 Firefox 拒絕了。

Image for post
Image for post

那是因為 Firefox 會要求你幫每個擴充功能設定獨特的 ID(但如果你用 web-ext 來執行的話就不需要。你可到此閱讀更多有關與此 ID 要求相關的訊息)。還有,你最好(但非必要)也設定你的擴充套件須在哪個版本以上的Firefox 運作的要求,如:

“applications”: {

“gecko”: {

“id”: “focusblocker@shing.lyu”,

“strict_min_version”: “48.0”

}

},

除此以外,還需要再調整一個地方。在 Chrome 擴充功能上,我用舊的options_page setting 來設定偏好頁(preference page),但 Firefox 只支援較新的 options_ui。你還可把瀏覽器的系統樣式套用到你的設定頁上,讓 UI看起來就像是 Firefox 設定的一部分一樣。因為 Firefox 內的命名不是chrome_style,而是更概括性的 browser_style,所以,我得在 manifest.json檔加入這些東西(以及刪除 options_page 的設定):

“options_ui”: {

“page”: “options.html”,

“browser_style”: true

},

Image for post
Image for post
Image for post
Image for post

這就是把擴充套件從 Chrome 移到 Firefox 的所有步驟。超級簡單!Firefox 的 WebExtension 團隊真的把 extensions 打造成具有高度相容性。假使你有興趣的話,我已把 FocusBlocker 完整的原始碼上傳到 GitHub 上。

在 AMO 上發布擴充套件

如果你想讓擴充套件在 addons.mozilla.org 上架的話,你必須把所有檔案壓縮為 zip 檔後上傳。下面提供幾個更快通過審核的秘訣:

  • 如果你在 AMO 上已有舊版的擴充套件,請上傳新的支援 WebExtension API 的擴充套件,便可取代舊的,以便使用者更新成新的套件(我則是重新登錄和上傳新套件,但 AMO 團隊並不建議這種做法)
  • 壓縮檔內避免加入非必要的檔案,特別要記得刪除暫存的測試檔
  • 移除或排除所有的 console.log() 呼叫。雖然這不是強制性的要求,但這能讓審核過程進行得更順利
  • 如果你使用到任何第三方的函式庫,你可考慮把該檔案放在 zip 檔中(即所謂的「vendoring」),或至少上傳來源以供審核
  • 若你上傳好一個版本後想做些微調或修正,就算是極微幅的改變,你也得把版本編號放到最前面

Firefox 計畫隨 Firefox 57 的釋出(計於 2017 年 11 月)推出全新的WebExtension 格式。假使你有舊版的 Firefox 擴充套件,或有需要轉換的Chrome 擴充功能,現在是最好的時間點。

若你想嘗試新的 FocusBlocker,請按此到安裝頁。你還可在此找到適用於Chrome 的版本。

原文刊出後修訂(2017/8/30):經 Mozilla Add-on 團隊的 Andreas 指正,原文已修正,以符合以下原則:

原文出處

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store