擴充套件程式示例

為了說明如何使用 WebExtension API，我們維護了一個擴充套件示例倉庫，地址是 https://github.com/mdn/webextensions-examples。本文介紹瞭如何執行這些示例，並列出了示例以及它們所演示的 WebExtension API。

這些示例在 Firefox Nightly 版本中有效：大多數在早期版本的 Firefox 中也有效，但請檢查擴充套件的 manifest.json 檔案中的 strict_min_version 鍵以確保相容性。

警告：有些示例只在特定域名或頁面上有效。任何限制的詳細資訊都在每個示例的 readme 檔案中提供。預設情況下，這些示例都不能在隱私瀏覽視窗中工作，詳情請參閱隱私瀏覽中的擴充套件。

要嘗試這些示例，請克隆倉庫，然後使用以下任一選項安裝並執行擴充套件

使用載入臨時附加元件功能，並從其原始檔夾開啟擴充套件。
安裝 web-ext，在命令列中開啟擴充套件的原始檔夾，然後使用 web-ext run。

擴充套件會一直載入，直到您重啟 Firefox。

警告：請不要將這些 WebExtension 示例提交到 addons.mozilla.org (AMO)；您無需對附加元件 WebExtension 示例進行簽名即可執行它們。

如果您想為倉庫做貢獻，請向我們傳送拉取請求。

名稱	描述	JavaScript API
annotate-page	顯示一個側邊欄，允許您在網頁上做筆記。	`storage.local` `tabs.onActivated` `tabs.onUpdated` `tabs.query()` `tabs.Tab` `windows.getCurrent()` `windows.Window`
apply-css	在工具欄中新增一個頁面操作。單擊按鈕應用使用注入 CSS 的紅色邊框。再次單擊按鈕以移除 CSS。	`pageAction.getTitle()` `pageAction.onClicked` `pageAction.setIcon()` `pageAction.setTitle()` `pageAction.show()` `tabs.insertCSS()` `tabs.onUpdated` `tabs.query()` `tabs.removeCSS()` `tabs.Tab`
beastify	在工具欄中新增一個瀏覽器操作圖示。單擊按鈕選擇一種野獸。然後，活動標籤頁的主體內容將替換為所選野獸的圖片。	`extension.getURL()` `runtime.onMessage` `tabs.executeScript()` `tabs.insertCSS()` `tabs.query()` `tabs.removeCSS()` `tabs.sendMessage()` `tabs.Tab`
bookmark-it	在工具欄中新增一個書籤按鈕。單擊按鈕可切換當前頁面的書籤。	`bookmarks.create()` `bookmarks.onCreated` `bookmarks.onRemoved` `bookmarks.remove()` `bookmarks.search()` `browserAction.onClicked` `browserAction.setIcon()` `browserAction.setTitle()` `tabs.onActivated` `tabs.onUpdated` `tabs.query()` `tabs.Tab` `windows.onFocusChanged`
borderify	為所有匹配 mozilla.org 的網頁新增實心紅色邊框。
chill-out	在一段時間不活動後顯示頁面操作。單擊頁面操作時顯示貓咪 GIF。	`alarms.clearAll()` `alarms.create()` `alarms.onAlarm` `pageAction.hide()` `pageAction.onClicked` `pageAction.show()` `tabs.get()` `tabs.onActivated` `tabs.onUpdated` `tabs.query()` `tabs.update()`
commands	演示如何使用 commands API 設定鍵盤快捷鍵。建立的快捷鍵透過 Ctrl+Shift+U（Mac 上為 Command+Shift+U）訪問。	`getAll()` `onCommand` `commands.reset()` `commands.update()` `tabs.create()`
content-script-register	說明擴充套件如何在執行時註冊 URL 匹配的內容指令碼。	`contentScripts.register()` `runtime.onMessage` `runtime.sendMessage()`
context-menu-copy-link-with-types	為連結新增一個上下文選單選項，將連結複製到剪貼簿，作為純文字和富 HTML 中的連結。	`menus.create()` `menus.onClicked` `tabs.executeScript()`
contextual-identities	列出、建立和移除上下文身份。	`contextualIdentities.query()` `tabs.create()` `tabs.query()` `tabs.remove()`
cookie-bg-picker	允許使用者自定義他們訪問的站點的背景顏色和平鋪圖案，並透過 cookie 儲存他們的偏好設定，以便他們重新訪問以前自定義的站點時重新應用這些設定。	`cookies.get()` `cookies.onChanged` `cookies.remove()` `cookies.set()` `extension.getURL()` `runtime.onMessage` `tabs.onActivated` `tabs.onUpdated` `tabs.query()` `tabs.Tab` `tabs.sendMessage()`
devtools-panels	演示一些 devtools API。	`devtools.inspectedWindow` `devtools.panels` `runtime.getURL()` `runtime.onMessage` `runtime.sendMessage()` `tabs.executeScript()`
discogs-search	演示如何使用 chrome_settings_overrides 鍵新增自定義搜尋引擎。
dnr-block-only	演示如何使用 declarativeNetRequest API 和 `declarative_net_request` 清單鍵在沒有主機許可權的情況下阻止網路請求。	`declarativeNetRequest.Rule` `declarativeNetRequest.RuleAction` `declarativeNetRequest.RuleCondition`
dnr-dynamic-with-options	演示了一種請求主機許可權並註冊 declarativeNetRequest 規則以修改網路請求的通用方法，無需任何安裝時許可權警告。options_ui 頁面提供了一種請求許可權和註冊 DNR 規則的方法。	`declarativeNetRequest.Rule` `declarativeNetRequest.getDynamicRules` `declarativeNetRequest.getSessionRules` `declarativeNetRequest.updateDynamicRules` `declarativeNetRequest.updateSessionRules` `permissions.getAll()` `permissions.remove()` `permissions.request()`
dnr-redirect-url	演示了使用 declarativeNetRequest API 透過 `declarative_net_request` 清單鍵重定向請求的多種方式。演示了 Manifest Version 3 (MV3) 的各個方面：action、host_permissions 和 web_accessible_resources，幷包含了與 Manifest Version 2 (MV2) 的比較。	`declarativeNetRequest.Redirect` `declarativeNetRequest.Rule` `declarativeNetRequest.RuleAction` `declarativeNetRequest.RuleCondition` `declarativeNetRequest.URLTransform` `permissions.contains()` `permissions.remove()` `permissions.request()`
dynamic-theme	動態主題示例	`alarms.create()` `alarms.onAlarm` `theme.update()`
emoji-substitution	用表情符號替換單詞。
eslint-example	演示如何使用 eslint 配置擴充套件。
export-helpers	演示如何使用 cloneInto 等匯出助手與頁面指令碼共享物件。	`notifications.create()` `runtime.onMessage` `runtime.sendMessage()`
favourite-colour	一個選項頁示例，允許您儲存您喜歡的顏色。	`browserAction.onClicked` `runtime.openOptionsPage()` `storage.managed` `storage.sync`
find-across-tabs	演示 find API。	`browserAction.onClicked` `extension.getBackgroundPage()` `find.find()` `find.highlightResults()` `runtime.getURL()` `runtime.onMessage` `runtime.sendMessage()` `tabs.create()` `tabs.query()` `tabs.Tab`
firefox-code-search	演示如何使用 omnibox API。	`omnibox.onInputChanged` `omnibox.onInputEntered` `omnibox.setDefaultSuggestion()` `tabs.create()` `tabs.update()`
forget-it	演示如何使用 browsingData API。	`browserAction.onClicked` `browsingData.remove()` `notifications.create()` `storage.local`
google-userinfo	演示如何使用 identity API。	`browserAction.onClicked` `identity.getRedirectURL()` `identity.launchWebAuthFlow` `notifications.create()`
history-deleter	歷史記錄 API 演示：刪除給定域的歷史記錄項	`history.deleteUrl()` `history.search()` `pageAction.show()` `tabs.onUpdated` `tabs.query()`
http-response	演示如何使用 webRequest.filterResponseData() API 重寫 HTTP 響應。	`webRequest.filterResponseData()` `webRequest.onBeforeRequest`
imagify	使用側邊欄，演示檔案選擇器和拖放功能的使用。內容指令碼將當前頁面內容替換為所選影像。	`extension.getURL()` `runtime.onMessage` `tabs.executeScript()` `tabs.query()` `tabs.sendMessage()`
latest-download	顯示最後下載的專案，並允許您開啟或刪除它。	`downloads.erase()` `downloads.getFileIcon()` `downloads.open()` `downloads.removeFile()` `downloads.search()`
list-cookies	此擴充套件列出活動標籤頁中的 cookie。	`cookies.getAll()` `tabs.query()`
menu-accesskey-visible	顯示如何為選單項設定單個字母訪問鍵。	`i18n.getMessage()` `menus.update()` `menus.create()` `menus.onClicked`
menu-demo	演示使用 menus API 新增和操作選單項。	`i18n.getMessage()` `menus.create()` `menus.onClicked` `menus.remove()` `menus.update()` `runtime.lastError` `tabs.executeScript()`
menu-labelled-open	顯示擴充套件如何監聽選單的顯示，然後新增、移除或更新其選單項。	`menus.create()` `menus.onClicked` `menus.onShown` `menus.refresh()` `menus.update()` `tabs.update()`
menu-remove-element	演示如何檢測游標位置的頁面元素並從頁面中移除該元素或其父元素。此示例包括 polyfill 的使用，說明了跨瀏覽器擴充套件開發。	`menus.create()` `menus.onClicked` `menus.getTargetElement()` `pageAction.openPopup()` `pageAction.show()` `tabs.executeScript()`
menu-search	說明如何檢索搜尋引擎列表併發出搜尋請求，使用新增到選定文字上下文選單中的搜尋引擎詳細資訊。	`search.search()` `search.get()` `menus.create()` `menus.onClicked`
mocha-client-tests	此示例展示了兩種測試擴充套件的方法：從擴充套件內部執行測試，以及使用 Karma 從命令列執行測試。	`runtime.onMessage` `runtime.sendMessage()`
native-messaging	原生訊息示例，包括一個 Python 應用程式和一個與其交換訊息的擴充套件。	`browserAction.onClicked` `runtime.connectNative()`
navigation-stats	演示 webNavigation API，顯示您訪問過的頁面的基本統計資訊。	`storage.local` `webNavigation.onCommitted` `webNavigation.onCompleted`
notify-link-clicks-i18n	當用戶點選連結時顯示本地化通知。	`extension.getURL()` `i18n.getMessage()` `notifications.create()` `runtime.onMessage` `runtime.sendMessage()`
open-my-page-button	在工具欄中新增一個瀏覽器操作圖示。點選瀏覽器操作時，附加元件會開啟一個與其一起打包的頁面。	`browserAction.onClicked` `tabs.create()`
page-to-extension-messaging	演示網頁和內容指令碼如何交換訊息。訪問 https://mdn.github.io/webextensions-examples/content-script-page-script-messaging.html 檢視演示。
permissions	演示使用 permissions API 的可選許可權。	`browserAction.onClicked` `permissions.getAll()` `permissions.remove()` `permissions.request()` `runtime.getURL()` `tabs.create()`
private-browsing-theme	動態主題示例：為隱私視窗設定深色主題。	`theme.reset()` `theme.update()` `windows.getAll()` `windows.onCreated`
proxy-blocker	使用 proxy API 阻止對列表中指定主機的請求。	`extension.getURL()` `proxy.onRequest` `proxy.onError` `storage.local` `storage.onChanged`
quicknote	允許使用者透過點選按鈕並在彈出的視窗中輸入文字來快速做筆記。筆記儲存在儲存中。	`storage.local`
root-cert-stats	顯示如何獲取請求的 TLS 連線詳細資訊。	`webRequest.getSecurityInfo()`
runtime-examples	各種執行時 API 的演示。	`browserAction.onClicked` `notifications.create()` `runtime.getManifest()` `runtime.onInstalled` `runtime.reload()`
selection-to-clipboard	演示如何從內容指令碼寫入剪貼簿
session-state	演示如何從恢復的標籤頁中檢索擴充套件定義的狀態。	`menus.create()` `menus.onClicked` `sessions.getTabValue()` `sessions.setTabValue()` `tabs.insertCSS()` `tabs.onCreated` `tabs.onUpdated` `tabs.query()`
store-collected-images	演示如何在擴充套件中使用 idb-file-storage 庫來儲存和操作檔案。	`browserAction.onClicked` `menus.create()` `menus.onClicked` `runtime.onMessage` `runtime.sendMessage()` `tabs.create()` `windows.create()`
stored-credentials	透過提供儲存的憑據執行基本身份驗證。	`storage.local` `webRequest.onAuthRequired` `webRequest.onCompleted` `webRequest.onErrorOccurred`
tabs-tabs-tabs	演示標籤頁操作：開啟、關閉、移動、縮放標籤頁。	`browserAction.setBadgeBackgroundColor()` `browserAction.setBadgeText()` `tabs.create()` `tabs.duplicate()` `tabs.getZoom()` `tabs.move()` `tabs.onCreated` `tabs.onMoved` `tabs.onRemoved` `tabs.query()` `tabs.reload()` `tabs.remove()` `tabs.setZoom()` `tabs.Tab` `tabs.update()`
theme-integrated-sidebar	一個與當前主題整合的側邊欄。	`theme.getCurrent()` `theme.onUpdated` `windows.getCurrent()`
theme-switcher	演示如何使用管理 API 進行主題切換。	`management.getAll()` `management.setEnabled()`
themes	一組主題，說明 weta_fade: 一個基本主題，使用 `theme_frame:` 中指定的單個影像。 weta_fade_chrome: 使用 Chrome 相容清單鍵實現的 weta_fade 主題。 weta_tiled: 使用平鋪影像的主題。 weta_mirror: 使用多個影像並在標題中對齊這些影像的主題。 animated: 使用動畫 PNG。
top-sites	topSites API 的演示。	`topSites.get()`
user-agent-rewriter	演示如何使用 webRequest API 重寫 User-Agent HTTP 頭。	`extension.getBackgroundPage()` `webRequest.onBeforeSendHeaders`
user-script-register	說明擴充套件如何在執行時註冊 URL 匹配的使用者指令碼（僅限 Manifest Version 2）。	`userScripts.register() (舊版)` `runtime.onMessage` `runtime.sendMessage()`
userScripts-mv3	一個使用者指令碼管理器，演示 userScripts API、permissions API、optional_permissions 和 Manifest Version 3 (MV3)。	`userScripts.configureWorld()` `userScripts.getScripts()` `userScripts.register()` `userScripts.resetWorldConfiguration()` `userScripts.unregister()` `userScripts.update()` `permissions.onAdded` `permissions.onRemoved` `permissions.request()` `runtime.onInstalled` `runtime.onMessage` `runtime.onUserScriptMessage` `runtime.openOptionsPage()` `runtime.sendMessage()` `storage.local` `storage.onChanged` `storage.session`
webpack-modules	演示如何使用 webpack 在擴充套件中打包 npm 模組。	`runtime.onMessage` `runtime.sendMessage()`
window-manipulator	演示如何操作視窗：開啟、關閉、調整視窗大小。	`windows.create()` `windows.getAll()` `windows.getCurrent()` `windows.remove()` `windows.update()` `windows.Window`
open-irc-links	演示協議處理程式的使用。

幫助改進 MDN

瞭解如何貢獻

此頁面最後由 MDN 貢獻者於 2025 年 7 月 17 日修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題