如何輕鬆建立第一個與 Chrome 和 Firefox 相容的瀏覽器擴充功能

建立自訂瀏覽器擴充功能可以擴展瀏覽器的功能、提高工作效率，或一鍵解決常見問題。隨著通用標準的日益普及，開發一款可在多個瀏覽器上運行的擴充功能已成為初學者和專業人士都能實現的現實目標。

Safari、Chrome 和 Firefox 標誌上方以拼圖碎片形式顯示的熱門開源瀏覽器擴充功能圖示：輕鬆建立與 Chrome 和 Firefox 相容的第一個瀏覽器擴充功能的實用指南。

擴充功能的成功取決於對其文件結構、權限機制以及如何安全且有效率地與網頁互動的理解。遵循標準實務可以最大限度地減少每個瀏覽器所需的修改，並加快部署流程。

本指南提供了建立與 Chrome、Firefox 等瀏覽器相容的瀏覽器擴充功能的清晰步驟，重點在於確保長期效能、穩定性和易於維護的最佳實踐。

由於 WebExtensions 計畫和核心 Web 技術，開發跨瀏覽器相容的擴充功能變得輕而易舉。使用標準化格式，您可以編寫可在任何平台上執行的擴充程序，而無需針對特定瀏覽器進行最佳化。

學習如何撰寫和測試你的第一個插件，以便對任何網頁進行自訂編輯。

什麼是網頁插件？

Web插件是與各種瀏覽器相容的擴充程序，它們使用網頁應用程式介面（API）來增強網頁瀏覽器的預設功能。插件以原始程式碼的形式分發，並使用一系列核心網路技術：HTML、CSS和JavaScript。

儘管瀏覽器擴充功能已經存在近 30 年，但傳統上，瀏覽器支援它們的方式各不相同。這意味著 Chrome 擴充功能與 Firefox 不相容，反之亦然。由於標準化工作以及許多瀏覽器基於 Chromium 核心的統一，這個問題已得到緩解。自 2021 年以來，WebExtensions 計畫一直致力於正式規範這項生態系統。理想情況下，這將使開發者只需編寫一次擴充程序，即可使其適用於所有瀏覽器。

另請閱讀：如何永久靜音 WhatsApp 群組通知

繼續閱讀，了解如何使用 Web 平台開發現代化的、與所有瀏覽器相容的擴充功能；這比你想像的要容易得多！

注意：雖然 WebExtensions 的設計初衷是與瀏覽器無關，但 Firefox 是最容易為其開發擴充功能的瀏覽器，因為它允許您暫時載入擴充功能。相比之下，Safari 則需要付費的開發者訂閱。

編寫清單檔案：每個外掛程式都需要一個清單檔案來描述其整體結構。以下是一個範例：

{
    "manifest_version": 3,
    "name": "my first extension",
    "version": "1.0",
    "icons": {
        "16": "app/images/icon16.png",
        "48": "app/images/icon48.png",
        "128": "app/images/icon128.png"
    },
    "permissions": [
        "webNavigation",
        "storage"
    ],
}

筆記
該文件為 JSON 格式，這意味著您可以使用任何可用的工具對其進行編輯或查看。

只需要三個鍵：name、version 和 manifest_version。 name 和 version 鍵與您的應用程式相關，它們的具體值與本文的解釋無關。但是，如果 version 無效，Chrome 將拒絕載入您的擴充程序，因此請確保它是以點號分隔的 1 到 4 之間的整數，例如「0」或「0.0.1」。

manifest_version 是一個比較敏感的問題：雖然其他瀏覽器可能支援版本 1 和 2，但 Chrome 將拒絕加載任何擴充功能，除非您使用版本 3。使用此版本會降低您的控制權，但如果您希望 Chrome 獲得支持，則應該使用它。

此外，清單檔案還可以使用其他幾個鍵來描述插件的特性，例如作者、描述和圖標，這些資訊有助於在應用程式商店中推廣您的插件。命令鍵可讓您定義鍵盤快速鍵。

另請閱讀：如何修復 Spotify 搜索不起作用

content_scripts 鍵是清單檔案中最重要的鍵之一，因為它允許你的外掛程式載入 JavaScript 或 CSS 檔案並將其應用到網頁上。

"content_scripts": [{
    "matches": ["https://en.wikipedia.org/wiki/*"],
    "js": ["script.js"],
    "css": ["style.css"]
}]

content_scripts 檔案中的每個元素都必須包含一個 matches 鍵，用於指定擴充功能運行的 URL。 `js` 和 `css` 鍵可讓您列出擴充功能在顯示符合頁面時應載入的腳本或樣式表。

編寫擴充程式碼

這個簡單的例子模擬了 TampermonkeyTampermonkey 是一款受歡迎的網頁自訂擴充功能。例如，你可以用它來修改 Reddit 資訊流，避免顯示「最佳」內容。

使用清單檔案和少量 JavaScript 程式碼，您可以輕鬆編寫一個簡單的 Web 擴充功能。這個範例會改變您查看維基百科頁面的方式，但可能性是無限的；您能對網頁做的任何事，它都能實現。

{
    "manifest_version": 3,
    "name": "tweakipedia",
    "description": "Tweak Wikipedia pages to our liking",
    "version": "1.0",

    "content_scripts": [{
        "matches": ["https://en.wikipedia.org/wiki/*"],
        "js": ["tweakipedia.js"],
        "css": ["tweakipedia.css"]
    }]
}

我先從簡單的入手，用一些 CSS 程式碼修改一些東西，使其更符合我的個人喜好。例如，我不喜歡「需要更多參考文獻」的提示；它會分散一般讀者的注意力。所以我透過指定元素的類別並將其 display 屬性設為「none」來隱藏它。

.box-More_citations_needed { display: none; }

如果你不想做好事，你也可以隱藏募款公告：

.cn-fundraising { display: none; }

之後，我覺得腳註標記有點分散注意力，所以我會透過調整它們的顏色來稍微降低它們的重要性：

sup a { color: rgb(51, 102, 204, 0.5); }

請注意，這是預設顏色，透明度為 50%，幾乎是透明的。這有助於降低這些標記的可見度。

更深入地思考一下，我希望能夠隱藏（或修改）其他元素，但僅在必要時才進行，並且能夠輕鬆撤銷更改。這需要一些 JavaScript 程式碼，但非常簡單！

toggle_on_key("Escape", "sup a,.mw-editsection,.vector-page-toolbar");

function toggle_on_key(key, sels) {
    document.addEventListener("keydown", function (ev) {
        if (ev.key === key) {
            document.querySelectorAll(sels).forEach(function (node) {
                node.style.display = node.style.display === "none" ? "" : "none";
            });
        }
    });
}