示例扩展

为了说明如何使用 WebExtension API,我们在 https://github.com/mdn/webextensions-examples 上维护了一个示例扩展库。本文介绍了如何运行这些示例,并列出了示例以及它们演示的 WebExtension API。

这些示例在 Firefox Nightly 中有效:大多数示例在早期版本的 Firefox 中有效,但请检查扩展的 manifest.json 中的 strict_min_version 键以确保。

警告:一些示例仅在特定域或页面上有效。有关任何限制的详细信息,请参阅每个示例的自述文件。默认情况下,所有示例均不在隐私浏览窗口中有效,有关详细信息,请参阅 隐私浏览中的扩展

要尝试这些示例,请克隆仓库,然后使用以下选项之一安装并运行扩展

  • 使用 加载临时附加组件 功能,并从其源文件夹打开扩展。
  • 安装 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 演示使用命令 API 设置键盘快捷键。创建的快捷键使用 Ctrl+Shift+U(Mac 上为 Command+Shift+U)访问。 commands.getAll
commands.onCommand
commands.reset
commands.update
tabs.create
content-script-register 说明扩展如何在运行时注册与 URL 匹配的内容脚本。 contentScripts.register
runtime.onMessage
runtime.sendMessage
context-menu-copy-link-with-types 为链接添加一个上下文菜单选项,以便将链接复制到剪贴板,作为纯文本和作为富 HTML 中的链接。 contextMenus.create
contextMenus.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 演示如何使用具有 `declarative_net_request` 清单键的 declarativeNetRequest API 在没有主机权限的情况下阻止网络请求。 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 演示使用 `declarative_net_request` 清单键通过 declarativeNetRequest API 重定向请求的多种方法。演示清单版本 3 (MV3) 的各个方面:action、host_permissions 和 web_accessible_resources,并包括与清单版本 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 演示如何使用 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
忘掉它 演示如何使用 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 来阻止对列表中指定的 host 的请求。 extension.getURL
proxy.onRequest
proxy.onError
storage.local
storage.onChanged
quicknote 允许用户通过点击按钮并在结果弹出窗口中输入文本来快速记笔记。笔记保存在存储中。 storage.local
root-cert-stats 展示如何获取有关请求的 TLS 连接的详细信息。 webRequest.getSecurityInfo
runtime-examples 各种 runtime 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
contextMenus.create
contextMenus.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 如何使用 management 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 匹配的用户脚本。 userScripts.register
runtime.onMessage
runtime.sendMessage
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 演示如何使用协议处理程序。