为了解如何开发扩展,我们维护了一个简单的扩展示例的代码仓库在https://github.com/mdn/webextensions-examples. 本文描述了代码仓库中使用的 WebExtension APIs.

这些示例工作在 Firefox Nightly 下: 大部分工作 Firefox 的早期版本中, 请检查扩展 manifest.json 文件中的 strict_min_version 键.

如果你想尝试这些示例,有下面三个选择:

  1. Clone the repository, then load the extension straight from its source directory, using the "Load Temporary Add-on" feature. The extension will stay loaded until you restart Firefox.
  2. Clone the repository, then use the web-ext command line tool to run Firefox with the extension installed.
  3. Clone the repository, then go to the build directory. This contains built and signed versions of all the examples, so you can just open them in Firefox (using File/Open File) and install them permanently, just like an extension you would install from addons.mozilla.org.

如果你想对代码仓库贡献,给我们发送pull请求!

Name Description JavaScript APIs
annotate-page Displays a sidebar that lets you take notes on web pages. storage.local
tabs.onActivated
tabs.onUpdated
tabs.query
windows.getCurrent
apply-css Adds a page action to the toolbar. Click the button to apply a red border using injected CSS. Click the button again to remove the CSS. pageAction.getTitle
pageAction.onClicked
pageAction.setIcon
pageAction.setTitle
pageAction.show
tabs.insertCSS
tabs.onUpdated
tabs.query
tabs.removeCSS
beastify Adds a browser action icon to the toolbar. Click the button to choose a beast. The active tab's body content is then replaced with a picture of the chosen beast. extension.getURL
runtime.onMessage
tabs.executeScript
tabs.query
tabs.reload
tabs.sendMessage
bookmark-it Adds a bookmark button to the toolbar. Click the button to toggle a bookmark for the current page. bookmarks.create
bookmarks.onCreated
bookmarks.onRemoved
bookmarks.remove
bookmarks.search
browserAction.onClicked
browserAction.setIcon
browserAction.setTitle
tabs.onActivated
tabs.onUpdated
tabs.query
windows.onFocusChanged
borderify Adds a solid red border to all webpages matching mozilla.org.
chill-out Show a page action after a period of inactivity. Show cat gifs when the page action is clicked. alarms.clearAll
alarms.create
alarms.onAlarm
pageAction.hide
pageAction.onClicked
pageAction.show
tabs.get
tabs.onActivated
tabs.onUpdated
tabs.query
tabs.update
commands Demonstrates using the commands API to set up a keyboard shortcut. The shortcut created is accessed using Ctrl+Shift+U (Command+Shift+U on a Mac). commands.getAll
commands.onCommand
context-menu-copy-link-with-types Add a context menu option to links to copy the link to the clipboard, as plain text and as a link in rich HTML. menus.create
menus.onClicked
tabs.executeScript
menu-demo Demonstrates adding and manipulating menu items using the menus API. menus.create
menus.onClicked
menus.remove
menus.update
i18n.getMessage
runtime.lastError
tabs.executeScript
contextual-identities List, create, and remove contextual identities. contextualIdentities.query
tabs.create
tabs.query
tabs.remove
cookie-bg-picker Allows the user to customize the background color and tiled pattern on sites the visit, and also saves their preferences via a cookie, reapplying them whenever they revisit a site they previously customized. cookies.get
cookies.onChanged
cookies.remove
cookies.set
extension.getURL
runtime.onMessage
tabs.onActivated
tabs.onUpdated
tabs.query
tabs.sendMessage
dynamic-theme Dynamic theme example alarms.create
alarms.onAlarm
theme.update
embedded-webextension-bootstrapped Demonstrates how to use an embedded WebExtension to port from a bootstrapped extension. runtime.onMessage
runtime.sendMessage
storage.local
embedded-webextension-sdk Demonstrates how to use an embedded WebExtension to port from an SDK-based add-on. notifications.create
runtime.connect
runtime.onConnect
runtime.onMessage
runtime.sendMessage
storage.local
emoji-substitution Replaces words with emojis.
eslint-example Demonstrates how to configure an extension with eslint.
favourite-colour An example options page, letting you store your favourite colour. browserAction.onClicked
runtime.openOptionsPage
storage.sync
firefox-code-search Demonstrates how to use the omnibox API. omnibox.onInputChanged
omnibox.onInputEntered
omnibox.setDefaultSuggestion
tabs.create
tabs.update
forget-it Demonstrates how to use the browsingData API. browserAction.onClicked
browsingData.remove
notifications.create
storage.local
google-userinfo Demonstrates how to use the identity API. browserAction.onClicked
identity.getRedirectURL
identity.launchWebAuthFlow
notifications.create
history-deleter History API demo: deletes history items for a given domain history.deleteUrl
history.search
pageAction.show
tabs.onUpdated
tabs.query
imagify Using a sidebar, illustrates the use of file picker and drag and drop. A content script replaces the current page content with the chosen image. runtime.onMessage
tabs.executeScript
tabs.query
tabs.sendMessage
latest-download Shows the last downloaded item, and lets you open or delete it. downloads.erase
downloads.getFileIcon
downloads.open
downloads.removeFile
downloads.search
list-cookies This extensions list the cookies in the active tab. cookies.getAll
tabs.query
mocha-client-tests This example shows two methods of testing an extension: running tests from within the extension, and running tests from the command line using Karma runtime.sendMessage
native-messaging Example of native messaging, including a Python application and an extension which exchanges messages with it. browserAction.onClicked
runtime.connectNative
navigation-stats Demonstration of the webNavigation API, showing basic stats about which pages you've visited. storage.local
webNavigation.onCompleted
notify-link-clicks-i18n Shows a localized notification when the user clicks on links. extension.getURL
i18n.getMessage
notifications.create
runtime.onMessage
runtime.sendMessage
open-my-page-button Adds a browser action icon to the toolbar. When the browser action is clicked, the add-on opens a page that was packaged with it. browserAction.onClicked
tabs.create
page-to-extension-messaging Demonstrates how a web page and a content script can exchange messages. Visit https://mdn.github.io/webextensions-examples/content-script-page-script-messaging.html for the demo.
permissions Demonstrates optional permissions using the permissions API. browserAction.onClicked
permissions.getAll
permissions.remove
permissions.request
runtime.getURL
tabs.create
proxy-blocker Uses the proxy API to block requests to specific hosts. extension.getURL
proxy.onProxyError
proxy.register
runtime.onMessage
runtime.sendMessage
storage.local
storage.onChanged
quicknote Allows the user to make quick notes by clicking a button and entering text into the resulting popup. The notes are saved in storage. storage.local
react-es6-popup This is an example of creating a browser action popup UI in React and ES6 JavaScript.
selection-to-clipboard Demonstrates how to write to the clipboard from a content script
stored-credentials Performs basic authentication by supplying stored credentials. storage.local
webRequest.onAuthRequired
webRequest.onCompleted
webRequest.onErrorOccurred
tabs-tabs-tabs Demonstrates tab manipulation: opening, closing, moving, zooming tabs. tabs.create
tabs.duplicate
tabs.getZoom
tabs.highlight
tabs.move
tabs.onMoved
tabs.onRemoved
tabs.query
tabs.reload
tabs.remove
tabs.setZoom
theme-switcher An example of how to use the management API for themes. management.getAll
management.setEnabled
themes A collection of themes illustrating:
  • weta_fade: a basic theme employing a single image specified in headerURL:.
  • weta_fade_chrome: the weta_fade theme implemented with Chrome compatible manifest keys.
  • weta_tiled: a theme using a tiled image.
  • weta_mirror: a theme using multiple images and aligning those images in the header.
  • animated: use of an animated PNG.
top-sites Demonstration of the topSites API. topSites.get
user-agent-rewriter Demonstrates using the webRequest API to rewrite the User-Agent HTTP header. extension.getBackgroundPage
webRequest.onBeforeSendHeaders
webpack-modules Demonstrates how to use webpack to package npm modules in an extension. runtime.onMessage
runtime.sendMessage
window-manipulator Demonstrates how to manipulate windows: opening, closing, resizing windows. windows.create
windows.getAll
windows.getCurrent
windows.remove
windows.update

文档标签和贡献者

 此页面的贡献者: liweiwp, GrayLight
 最后编辑者: liweiwp,