您的第一個擴充套件程式
注意： 如果你熟悉瀏覽器擴充套件的基本概念，請跳過本節，直接 檢視擴充套件檔案是如何構建的。然後，使用 參考文件 開始構建你的擴充套件。訪問 Firefox Extension Workshop 瞭解更多關於 Firefox 擴充套件的測試、釋出和工作流程。
本文將指導你完成從頭到尾建立 Firefox 擴充套件的過程。該擴充套件將為從 mozilla.org 或其任何子域載入的頁面新增一個紅色邊框。
此示例的原始碼在 GitHub 上： https://github.com/mdn/webextensions-examples/tree/main/borderify。
編寫擴充套件
在一個合適的位置，例如 Documents 目錄中，建立一個名為 borderify 的新目錄並導航到該目錄。你可以使用計算機的檔案瀏覽器或 命令列終端 來完成此操作。瞭解如何使用命令列終端是一項很有用的技能，因為它有助於你進行更高階的擴充套件開發。使用終端，你可以像這樣建立目錄：
mkdir borderify
cd borderify
manifest.json
使用合適的 文字編輯器，在 "borderify" 目錄的正下方建立一個名為 "manifest.json" 的新檔案。為其新增以下內容：
{
"manifest_version": 2,
"name": "Borderify",
"version": "1.0",
"description": "Adds a red border to all webpages matching mozilla.org.",
"icons": {
"48": "icons/border-48.png"
},
"content_scripts": [
{
"matches": ["*://*.mozilla.org/*"],
"js": ["borderify.js"]
}
]
}
- 前三個鍵：
manifest_version、name和version是必需的，包含擴充套件的基本元資料。 description是可選的，但推薦新增：它會顯示在擴充套件管理器中。icons是可選的，但推薦新增：它允許你為擴充套件指定一個圖示，該圖示將顯示在擴充套件管理器中。
這裡最有趣的是 content_scripts 鍵，它告訴 Firefox 將一個指令碼載入到 URL 匹配特定模式的網頁中。在本例中，我們要求 Firefox 將一個名為 "borderify.js" 的指令碼載入到從 "mozilla.org" 或其任何子域提供的所有 HTTP 或 HTTPS 頁面中。
警告： 在某些情況下，你需要為你的擴充套件指定一個 ID。如果你需要指定一個外掛 ID，請在 manifest.json 中包含 browser_specific_settings 鍵，並設定其 gecko.id 屬性。
"browser_specific_settings": {
"gecko": {
"id": "borderify@example.com"
}
}
icons/border-48.png
擴充套件應該有一個圖示。這個圖示將顯示在擴充套件管理器中該擴充套件條目的旁邊。我們的 manifest.json 宣告我們有一個名為 "icons/border-48.png" 的圖示。
在 "borderify" 目錄的正下方建立一個 "icons" 目錄。在該目錄中儲存一個名為 "border-48.png" 的圖示。你可以使用 我們示例中的圖示，該圖示取自 Google Material Design 圖示集，並根據 Creative Commons Attribution-ShareAlike 許可使用。
如果你選擇提供自己的圖示，它應該是 48x48 畫素。你也可以提供一個 96x96 畫素的圖示，用於高解析度顯示器，如果你這樣做，它將被指定為 manifest.json 中 icons 物件下的 96 屬性。
"icons": {
"48": "icons/border-48.png",
"96": "icons/border-96.png"
}
或者，你也可以在這裡提供一個 SVG 檔案，它將被正確縮放。(不過：如果你使用 SVG 並且你的圖示包含文字，你可能需要使用你的 SVG 編輯器的“轉換為路徑”工具來展平文字，以便它以一致的大小/位置進行縮放。)
borderify.js
最後，在 "borderify" 目錄的正下方建立一個名為 "borderify.js" 的檔案。為其新增以下內容：
document.body.style.border = "5px solid red";
此指令碼將被載入到與 content_scripts manifest.json 鍵中給出的模式匹配的頁面中。指令碼可以直接訪問文件，就像頁面本身載入的指令碼一樣。
試用
首先，請仔細檢查你是否在正確的位置擁有正確的檔案。
borderify/
icons/
border-48.png
borderify.js
manifest.json
安裝
在 Firefox 中：開啟 about:debugging 頁面，點選“此 Firefox”選項，點選“載入臨時外掛”按鈕，然後選擇你擴充套件目錄中的任意檔案。
該擴充套件現在已安裝，並保持安裝狀態，直到你重新啟動 Firefox。
或者，你可以使用 web-ext 工具從命令列執行該擴充套件。
測試
注意： 預設情況下，擴充套件在隱私瀏覽模式下不起作用。如果你想在隱私瀏覽模式下測試此擴充套件，請開啟 about:addons，點選該擴充套件，然後在“在隱私視窗中執行”選項中選擇“允許”。
現在訪問 https://www.mozilla.org/en-US/ 下的任何一個頁面，你應該會看到頁面周圍的紅色邊框。
注意： 不過，不要在 addons.mozilla.org 上嘗試！內容指令碼目前在該域上被阻止。
嘗試做一些實驗。編輯內容指令碼以更改邊框的顏色，或對頁面內容做其他事情。儲存內容指令碼，然後透過在 about:debugging 中點選“重新載入”按鈕來重新載入擴充套件檔案。你可以立即看到更改。
打包和釋出
要讓其他人使用你的擴充套件，你需要將其打包並提交給 Mozilla 進行簽名。要了解更多關於這方面的資訊，請參閱 “釋出你的擴充套件”。
下一步是什麼？
現在你已經瞭解了為 Firefox 開發 WebExtension 的過程的介紹。