Always Right 擴充套件的移轉過程(上)

本文作者:Dietrich Ayala

我從 2005 年開始開發 Firefox 擴充套件(extension)。這些年下來,我整合過書籤服務(讓我有幸到 Mozilla 服務!)、改過預設佈景主題、加強過開發者工具、更新過 Github、優化過運作效能、簡化過標籤(tag)、把所有 Etherpad 頁面加入書籤、修改過 Pocket 設定,以及經歷過其他許許多多美好的改變。

我寫過 XUL 擴充套件、Jetpacks、另一種 Jetpacks、SDK 附加元件,並曾參與很多核心技術的開發工作。一路走到現在,我什麼都看過也體驗過。現在,Firefox 有了 WebExtensions API,這是專為兼顧瀏覽器延伸性和效能及安全性所設計的新擴充功能。

隨著 Firefox 57 的釋出,WebExtensions API 將成為 Firefox 唯一支援的擴充套件格式。所以,該是往下個階段邁進的時候了。我不該再耽溺於舊式擴充元件所支援的不安全 API 中。該改用新式擴充套件了,畢竟,我的生活不能沒有它們。

我的第一個移轉對象是 Always Right,這是我每天上網不可或缺的擴充套件之一。我記錄了整個移轉過程的各個步驟,包括中間碰到的問題、錯誤和不得不做的妥協。希望我的經驗能對您的移轉之路有所幫助!

總是在右

Always Right 是簡單的 Firefox 擴充套件,無論使用者怎麼開啟分頁,它總能在使用中分頁的右側開啟新分頁。

這樣的功能很方便,因為:

  • 開啟分頁的行為大同小異,基本上是 100% 一樣。Firefox 預設的行為取決於幾個因素。這些因素相當複雜,簡單來說,想要改變 Firefox 預設的分頁開啟動作,就像想在颶風中追黃蜂一樣困難
  • 相關分頁會被分為同一組。當我忙著處理某件事,而想展開新搜尋或開啟相關的分頁時,我就會打開新分頁。此附加元件能幫我把新分頁和使用中的分頁歸為同一組。預設的開啟行為則會在最後才開啟新分頁,而使得同一任務出現兩組不同的分頁

雖然 Always Right 的概念很簡單,但還是需要重新編寫,才能改成新的WebExtensions API 格式。大部分的重寫工作都不難,也可以很快搞定,但身為開發者,我們的宿命是:最後的一點小事總是最耗時也最折騰人。

移轉方式簡述

概念不變:以新 API 打造的擴充套件還會是一個包含安裝資訊檔(manifest)和所有程式碼及資產檔案的 zip 檔。這和之前每一代擴充元件的格式並無二致。

主要的移轉任務為:

  • 為擴充套件重新命名,並改用新的 manifest 格式
  • 重寫程式碼以改用新的 WebExtensions API
  • 以新的 web-ext CLI 工具來封包擴充套件

Manifest 的更新

第一步是更改你的 manifest 檔案。你得先把 package.json 改為 manifest.json。

下圖顯示新舊檔案的差異:

最重要的改變是要加入 manifest_version 的屬性,並把它的值設為 2。等有了 manifest_version、填好檔名和版本欄後,擴充套件所有的必要屬性都已具備。其餘的則非必要。

不過,因為你要更新的是已經存在的擴充套件,所以還得多完成幾個動作:

  • id 屬性不可或缺,addons.mozilla.org (AMO) 才可將新的附加元件與舊的對上。移除最頂層的 id 欄,並將其值複製到 applications / gecko / id 欄內
  • 如果你過去用的是主屬性,現在就得依照個別功能來指定進入點(entry point)檔案,如:background scriptscontent_scriptsbrowser_actions (工具列功能鈕)page_actionsoptions_ui。以我的擴充套件來說,因為要能觀察分頁的動態,所以我是使用背景屬性來匯入腳本
  • 權限(permissions)屬性還是會用到,但用法不同。其值將以陣列(array)而非物件(object)呈現,且所有既有的值恐怕都不再支援而須更新。你可到 MDN 中有關 manifest.json 權限的說明頁,進一步了解新型擴充元件格式支援的權限金鑰與值。

除此以外,還有一些非必填的欄位,在此不便一一說明。你可參考此新manifest.json 文件中對於其餘欄位的介紹。如需參考舊版的 package.json 文件則按此。

原文連結

Like what you read? Give Mozilla Taiwan a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.