如何發布自己寫的chrome擴充功能到官方商店

1. 準備好你的擴充功能檔案。
2. 註冊開發人員帳戶。
3. 上傳擴充功能檔案。
4. 填寫相關資訊。
5. 提交審核。

前陣子 manifest_version 從 2 強制升級成 3，我認為是一個很好的入坑時機點，直接學新的版本就好了，所以試著上傳小工具給官方，也當作一次學習。

1. 準備好程式碼與各項設定

chrome 擴充功能的設定都會寫在 manifest.json 裡面，包含擴充功能的名稱、簡單描述、各種檔案的路徑。

{
  "manifest_version": 3,
  "name": "__MSG_extensionName__",
  "version": "1.0.0",
  "description": "__MSG_extensionDescription__",
  "default_locale": "en",
  "permissions": [
    "storage",
    "activeTab",
    "tabs"
  ],
  "host_permissions": [
    "<all_urls>"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "options_page": "options.html",
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["function.js", "script.js"],
      "type": "module"
    }
  ]
}

我們用上面這個簡單的例子說明各參數代表什麼意思：

manifest_version 已經強制要 3 了，所以沒有問題。你如果在商店看到「這項擴充功能未遵循 Chrome 擴充功能的最佳做法，因此已無法使用。」，基本上都是因為沒有升級改寫到 3 的緣故。

一些套件突然不能用的原因，往往是因為 manifest_version 還是 2。

• version：版本在正式發布後，想要更新檔案上傳一定要是更高的版本。一開始寫 0.0.1 也可以發布。當然也可以寫兩位數例如 0.0.11。
• name和description：名稱和簡述，而因為我有多語言i18n的設定，所以值是用多語言設定檔的變數。
• permissions：會用到哪些chrome的語法功能，每一個功能在未來提交給官方的時候都要清楚交代用途是什麼。
• background：可以在背景執行各種任務，是寫擴充功能一定會用到的，還能處理來自內容腳本 (Content Scripts) 的資料。另外這也是 manifest 版本更新後改變最多的地方（service_worker）。
• default_popup：點擊icon時跳出的小框框，可以在裡面另外寫 CSS 和 JavaScript 做其它事情。
• options_page：開新分頁列出自訂功能或其它你想寫的東西，一樣可以在裡面寫 JavaScript。
• icon：擴充功能的外貌。官方文件有明確說明各icon的使用時機：128x128 的 icon 會在安裝期間及 Chrome 線上應用程式商店使用；48x48 的 icon 用於擴充功能管理介面 (chrome://extensions)；16x16 的 icon 做為擴充功能網頁的網站小圖示。
• content_scripts：主要功能和內容處理。我是用它另外載入變數檔和執行檔，再與background交換資料。

多語言的 i18n json 檔規定要放在 _locales 資料夾中，裡面再用 en、zh_TW 等資料夾區分各種語言的 json 檔。

測試

擴充功能介面

在開發的時候一定會自己先測試擴充功能哪裡有 bug，最簡單的方法是在 chrome 打開「管理擴充功能」（chrome://extensions/）之後，把右上角的開發人員模式打開，點選左邊的「載入未封裝項目」選取你的擴充功能資料夾，就可以在自己的 chrome 中測試了。

發生錯誤的時候，會在該擴充功能的「移除」旁邊出現「錯誤」，你可以點進去看錯在哪裡。

2. 註冊開發人員帳戶

在寫好你的擴充功能之後，要先到開發人員協議頁面註冊帳戶。你必需同意他們的政策，並支付 5 美元（一次性），才會為你開啟 Chrome Web Store Developer Dashboard。

同時，他會問你這個帳號是不是「交易商」（符合歐盟法規），正常來說選擇非交易商就可以了，是的話還要上傳證件圖片和三個月內的銀行對帳單。

3. 上傳擴充功能檔案

新增商品後就可以把你的擴充功能上傳了，而上傳限定 zip 壓縮檔（不要把程式包在資料夾中壓縮，選取必要的檔案壓縮就好）。

上傳完之後，他會自動偵測 manifest.json 的內容，並要你填寫說明和類別（只有預設語言必填，其它語言可以留白），由於會直接顯示在未來上架的商店資訊中，所以盡量寫的詳細且吸引人。接著還會要求上傳許多圖片資產或影片連結，這些也一樣會顯示在商店資訊中。

如果你有官方網站或商品、支援網站，也可以填到「其他欄位」的表格中，沒有的話也可以留白。

4. 隱私權

首先要填寫此擴充功能的用途，欄位旁會強調必需是「清楚且有範圍的單一用途」。

而下面的欄位會根據你在 manifest.json 中使用到的功能，一個一個問你用到這項功能語法的理由。若還有載入「遠端程式碼」的話，也必需寫上理由。

而資料使用情形的部分，會問你有沒有使用：

• 個人識別資訊
• 健康資訊
• 財務和付款資訊
• 驗證資訊
• 個人通訊資料
• 位置資訊
• 網頁記錄
• 使用者活動
• 網站內容

若你有勾選任何一項，就必需填寫隱私權政策的網址。

5. 提交審核

所有東西都弄好之後，就可以提交審核。官方的說法是會在 30 天內回覆，我寫的很單純，所以 3 天就回覆我了。若沒有通過審查也會一一列出哪些項目有問題需要改善。

審核成功通知信

通過審查之後，就可以發布你的擴充功能到商店了。

未來更新時，你可以選擇默默重新上傳，讓使用者不主動去查的話不會發現有更新，或是在版本更新時主動告知使用者，以下是更新時的語法：

// background.js
chrome.runtime.onInstalled.addListener(() => {
  // do something...通常是寫一個更新日誌頁面，然後開新分頁
});

---

我上架的擴充功能 URL Parameter Eraser

URL Parameter Eraser 會把當前頁面網址的追蹤碼刪除。除此之外，還會把當前頁面含有追蹤碼的網址改寫，並加上紫色的 dash outline。

你可以點擊 icon 後呼叫操作介面，介面中的「設定」可以自訂你想要過濾掉或取消過濾的追蹤碼。你也可以選擇要不要在此網域停用動態監控，讓 URL Parameter Eraser 不在該網頁監控網頁內容的變更，釋放一些效能。

---

附加資訊：如何發布到 Microsoft Edge 外掛程式商店

由於都是使用 Chromium 核心，所以基本上不需要多少改寫也能上架到 Edge 外掛程式商店。但要注意，雖然用 Edge 測試的時候沒有問題，在提交時 content_script 的 type 屬性無法使用 module 屬性，所以一些 module 相關的語法都要改寫。

1. 前往 Microsoft Partner Center註冊開發者帳號。
2. 接受開發者協議（Edge 擴充功能），與 chrome 不同的地方是他們「不用錢」。
3. 選擇帳號類型（個人或公司），並填寫通訊相關資料。
4. 新增產品（Edge 擴充功能）。
5. 上傳 zip 檔，網頁會簡單地自動查看 manifest.json 有沒有錯誤。
6. 填寫說明、上傳 icon、宣傳圖片，每一種語言都要填寫一次。
7. 點選「發布」後會要求填寫「給測試人員的資訊」，讓審查的人快速理解你的擴充功能。官方宣稱會在 7 個工作天內審核完成。

Microsoft 官方人員在審核完畢之後，不會主動通知你，你要自己登入「合作夥伴中心」查看有沒有成功。

在審核成功之後，你就可以在合作夥伴中心看到該擴充功能的連結：URL Parameter Eraser。