扩展程序示例

为了说明如何使用 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 上查看此页面 • 报告此内容的问题