什麼是擴充套件程式?

注意: 如果您已經瞭解瀏覽器擴充套件程式的基本概念,請跳過本節,直接 檢視擴充套件程式檔案如何組合。然後,使用 參考文件開始構建您的擴充套件程式。訪問 Firefox 擴充套件程式工作坊,瞭解有關 Firefox 擴充套件程式的測試、釋出和工作流程的更多資訊。

擴充套件程式為瀏覽器新增功能。它使用熟悉的基於 Web 的技術——HTML、CSS 和 JavaScript 來建立。它可以利用網頁上的 JavaScript 所使用的相同 Web API,但擴充套件程式還可以訪問自己的一組 JavaScript API。這意味著您可以在擴充套件程式中完成比在網頁中的程式碼多得多的事情。以下是一些您可以做的事情的例子:

增強或補充網站:使用附加元件為您的網站提供額外的瀏覽器內功能或資訊。允許使用者收集他們訪問頁面的詳細資訊,以增強您提供的服務。

示例:Grammarly for FirefoxControl Panel for Twitter

The Grammarly extension providing an edit hint in the GitHub editor.

讓使用者展現個性:瀏覽器擴充套件程式可以操作網頁內容;例如,允許使用者將他們喜歡的標誌或圖片新增到他們訪問的每個頁面的背景中。擴充套件程式還可以使使用者能夠更新 Firefox UI 的外觀,就像獨立的 主題附加元件一樣。

示例:TablissStylus,和 Emoji

A new tab styled by the Tabliss extension showing a woodland picture with the time and a greeting message.

新增或刪除網頁內容:您可能希望幫助使用者阻止網頁上的侵擾性廣告,在網頁提到國家或城市時提供旅行指南訪問許可權,或重新格式化頁面內容以提供一致的閱讀體驗。透過訪問和更新頁面的 HTML 和 CSS 的能力,擴充套件程式可以幫助使用者以他們想要的方式檢視 Web。

示例:uBlock OriginReturn YouTube Dislike,和 LeechBlock NG

uBlock origin pop-up showing blocked tracker statistics.

新增工具和新的瀏覽功能:為任務板新增新功能,或從 URL、超連結或頁面文字生成 QR 碼影像。藉助靈活的 UI 選項和 WebExtensions API 的強大功能,您可以輕鬆地為瀏覽器新增新功能。而且,您可以增強幾乎任何網站的功能或用途,不一定必須是您自己的網站。

示例:Worldwide RadioFlagfox,和 Tomato Clock

The Worldwide Radio extension showing a list of radio stations for Canada, with RadioOne selected to play.

遊戲:提供具有離線遊戲功能的傳統電腦遊戲,或探索新的遊戲可能性,例如將遊戲玩法融入日常瀏覽。

示例:RPG Game - Dedalium by Loycom GamesSolitaire Card Game,和 2048 Prime

The Dedalium pop-up showing play status and providing options to start a battle or adventure.

新增開發工具:您可以提供 Web 開發工具作為您的業務,或者開發了一種有用的 Web 開發技術或方法並希望分享。無論哪種方式,您都可以透過向開發人員工具欄新增新選項卡來增強內建的 Firefox 開發人員工具。

示例:aXe Developer ToolsWeb Developer,和 Web React Developer Tools

The Axe accessibility testing extension showing accessibility issues found in a webpage.

Firefox 的擴充套件程式是使用 WebExtensions API 構建的,這是一個跨瀏覽器開發的擴充套件程式系統。在很大程度上,該 API 與 Google Chrome 和 Opera 支援的 擴充套件程式 API 相容。為這些瀏覽器編寫的擴充套件程式在大多數情況下只需做少量 更改 即可在 Firefox 或 Microsoft Edge 中執行。

如果您有想法或疑問,您可以在 Add-ons DiscourseMatrix 上的 Add-ons 頻道聯絡我們。

下一步是什麼?