Example extensions

To illustrate how to use the WebExtension APIs, we maintain a repository of example extensions at https://github.com/mdn/webextensions-examples . This article describes how to run these examples and lists the examples along with the WebExtension APIs they demonstrate.

These examples work in Firefox Nightly: most work in earlier versions of Firefox, but check the strict_min_version key in the extension's manifest.json to make sure.

警告： Some examples work only on specific domains or pages. Details of any restrictions are provided in each example's readme file. None of the examples work in private browsing windows by default, see  Extensions in Private Browsing 了解细节。

To try these examples, clone the repository then:

1. load the extension from its source folder using the Load Temporary Add-on feature. The extension stays loaded until you restart Firefox.
2. open the extension's source folder at the command-line and use web-ext to run the extension. The extension stays loaded until you restart Firefox.
3. in Firefox use File > 打开文件 and find the example in the build folder. The build folder contains built and signed versions of all the examples. This permanently installs the example.

警告： Please do not submit these WebExtension examples to addons.mozilla.org (AMO); you do not have to sign the add-on WebExtension examples to run them. Follow the steps above.

If you want to contribute to the repository, send us a pull request.

名称	描述	JavaScript API
annotate-page	Displays a sidebar that lets you take notes on web pages.	storage.local tabs.onActivated tabs.onUpdated tabs.query tabs.Tab windows.getCurrent windows​.Window
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 tabs.Tab
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.insertCSS tabs.query tabs.removeCSS tabs.sendMessage tabs.Tab
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 tabs.Tab 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
命令	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 commands.reset commands.update tabs.create
content-script-register	Illustrates how an extension can register URL-matching content scripts at runtime.	contentScripts.register runtime.onMessage runtime.sendMessage
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.	contextMenus.create contextMenus.onClicked 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 they 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.Tab tabs.sendMessage
devtools-panels	Demonstrates some of the devtools APIs.	devtools.inspectedWindow devtools.panels runtime.getURL runtime.onMessage runtime.sendMessage tabs.executeScript
discogs-search	Demonstrates adding a custom search engine with the chrome_settings_overrides key.
dynamic-theme	Dynamic theme example	alarms.create alarms.onAlarm theme.update
emoji-substitution	Replaces words with emojis.
eslint-example	Demonstrates how to configure an extension with eslint.
export-helpers	Demonstrates how to use export helpers like cloneInto to share objects with page scripts.	notifications.create runtime.onMessage runtime.sendMessage
favourite-colour	An example options page, letting you store your favourite colour.	browserAction.onClicked runtime.openOptionsPage storage.managed storage.sync
find-across-tabs	Demonstration of the 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	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
http-response	Demonstrates how to rewrite HTTP responses using the webRequest.filterResponseData() API.	webRequest.filterResponseData webRequest.onBeforeRequest
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.	extension.getURL 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
menu-accesskey-visible	Shows how to set up a single letter access key for a menu item.	i18n.getMessage menus.update menus.create menus.onClicked
menu-demo	Demonstrates adding and manipulating menu items using the menus API.	i18n.getMessage menus.create menus.onClicked menus.remove menus.update runtime.lastError tabs.executeScript
menu-labelled-open	Shows how an extension can listen for the display of a menu and then add, remove, or update its menu items.	menus.create menus.onClicked menus.onShown menus.refresh menus.update tabs.update
menu-remove-element	Shows how to detect the page element at the cursor position and remove that element, or a parent element, from the page. This example includes use of the polyfill, illustrating cross-browser extension development.	menus.create menus.onClicked menus.getTargetElement pageAction.openPopup pageAction.show tabs.executeScript
menu-search	Illustrates how to retrieve a list of search engines and issue a search request, using search engine details added to the context menu for selected text.	search.search search.get menus.create menus.onClicked
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.onMessage 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.onCommitted 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
private-browsing-theme	Example dynamic theme: sets a dark theme for private windows.	theme.reset theme.update windows.getAll windows.onCreated
proxy-blocker	Uses the proxy API to block requests to hosts specified on a list.	extension.getURL proxy.onRequest proxy.onError 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
root-cert-stats	Shows how to get details about a request's TLS connection.	webRequest.getSecurityInfo
runtime-examples	Demo of various runtime APIs.	browserAction.onClicked notifications.create runtime.getManifest runtime.onInstalled runtime.reload
selection-to-clipboard	Demonstrates how to write to the clipboard from a content script
session-state	Demonstrates how to retrieve extension-defined state state from restored tabs.	menus.create menus.onClicked sessions.getTabValue sessions.setTabValue tabs.insertCSS tabs.onCreated tabs.onUpdated tabs.query
store-collected-images	Demonstrates how to use the idb-file-storage library to store and manipulate files in an extension.	browserAction.onClicked contextMenus.create contextMenus.onClicked runtime.onMessage runtime.sendMessage tabs.create windows.create
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.	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	A sidebar that integrates with the current theme.	theme.getCurrent theme.onUpdated windows.getCurrent
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 theme_frame: . 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
user-script-register	Illustrates how an extension can register URL-matching user scripts at runtime.	userScripts.register runtime.onMessage runtime.sendMessage
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 windows​.Window
open-irc-links	Demonstrates the use of protocol handlers.

Found a problem with this page?

• Edit on GitHub
• Source on GitHub
• Report a problem with this content on GitHub
• Want to fix the problem yourself? See our Contribution guide .

最后修改： Oct 26, 2021 , 由 MDN 贡献者

相关话题

1. 浏览器扩展名
2. 快速入门

   1. What are extensions?
   2. Your first extension
   3. Your second extension
   4. Anatomy of an extension
   5. Example extensions
   6. What next?
3. 概念

   1. Using the JavaScript APIs
   2. Content scripts
   3. Match patterns
   4. Working with files
   5. 国际化
   6. Content Security Policy
   7. Native messaging
   8. Differences between API implementations
   9. Chrome incompatibilities
4. 用户界面

   1. 用户界面
   2. Toolbar button
   3. Address bar button
   4. Sidebars
   5. Context menu items
   6. Options page
   7. Extension pages
   8. Notifications
   9. Address bar suggestions
   10. Developer tools panels
5. 如何

   1. Intercept HTTP requests
   2. Modify a web page
   3. Insert external content
   4. Share objects with page scripts
   5. Add a button to the toolbar
   6. Implement a settings page
   7. Work with the Tabs API
   8. Work with the Bookmarks API
   9. Work with the Cookies API
   10. Work with contextual identities
   11. Interact with the clipboard
   12. Build a cross-browser extension
6. Firefox differentiators
7. JavaScript API

   1. Browser support for JavaScript APIs
   2. alarms
   3. bookmarks
   4. browserAction
   5. browserSettings
   6. browsingData
   7. captivePortal
   8. clipboard
   9. 命令
   10. contentScripts
   11. contextualIdentities
   12. Cookie
   13. devtools
   14. dns
   15. downloads
   16. events
   17. extension
   18. extensionTypes
   19. find
   20. history
   21. i18n
   22. identity
   23. idle
   24. management
   25. menus
   26. notifications
   27. omnibox
   28. pageAction
   29. permissions
   30. pkcs11
   31. privacy
   32. proxy
   33. runtime
   34. search
   35. sessions
   36. sidebarAction
   37. storage
   38. tabs
   39. theme
   40. topSites
   41. 类型
   42. userScripts
   43. webNavigation
   44. webRequest
   45. windows
8. Manifest keys

   1. 介绍

   1. 作者
   2. background
   3. browser_action
   4. browser_specific_settings
   5. chrome_settings_overrides
   6. chrome_url_overrides
   7. 命令
   8. content_scripts
   9. content_security_policy
   10. default_locale
   11. description
   12. developer
   13. devtools_page
   14. dictionaries
   15. externally_connectable
   16. homepage_url
   17. icons
   18. incognito
   19. manifest_version
   20. name
   21. offline_enabled
   22. omnibox
   23. optional_permissions
   24. options_page
   25. options_ui
   26. page_action
   27. permissions
   28. protocol_handlers
   29. short_name
   30. sidebar_action
   31. storage
   32. theme
   33. theme_experiment
   34. user_scripts
   35. version
   36. version_name
   37. web_accessible_resources
9. Extension Workshop

   1. Develop
   2. Publish
   3. Manage
   4. Enterprise
10. Contact us
11. Channels

    1. Add-ons blog
    2. Add-ons forum
    3. Add-ons chat