Example extensions

You’re reading the English version of this content since no translation exists yet for this locale. Help us translate this article!

확장앱 개발하는 방법을 설명하기 위해 간단한 예제를 저장해놓은 저장소를 두고 있다 https://github.com/mdn/webextensions-examples. 이번장에서는 해당 저장소에서 사용되는 WebExtension API에 대해 설명한다.

여기에 나오는 예제는 Firefox Nightly에서 동작한다. 대부분은 이전 버전에서도 동작하지만 확장앱의 manifest.json에서 strict_min_version 키를 확인한다.

이 예제를 실행해보려면 세가지 방법이 있다.

레파지토리를 클론한뒤 소스 디렉토리를 "Load Temporary Add-on"기능으로 로드한다. 확장앱은 Firefox를 재시작하기 전까지 로드되어있다.
레파지토리를 클론한뒤 web-ext 커멘드 라인 툴을 이용해서 확장앱을 Firefox에 설치한다.
레파지토리를 클론한뒤 빌드 디렉토리로 이동한다. 여기에는 빌드된 예제들이 있으므로 Firefox에서 (파일 / 파일 열기를 사용해) 파일을 열고 addons.mozilla.org에서 설치하는것 처럼 영구적으로 설치할 수 있습니다.

레파지토리에 공헌하려한다면 pull request를 보내면 된다

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.insertCSS` `tabs.query` `tabs.removeCSS` `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` `commands.reset` `commands.update` `tabs.create`
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 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`
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`
embedded-webextension-bootstrapped	Demonstrates how to use an embedded WebExtension to port from a bootstrapped extension.	`runtime.onMessage` `runtime.sendMessage` `storage.local`
embedded-webextension-overlay	Demonstrates how to use an embedded WebExtension to port from an overlay extension.	`runtime.onMessage` `runtime.sendMessage`
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.
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`
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-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		`menus.create` `menus.onClicked` `menus.onShown` `menus.refresh` `menus.update` `tabs.update`
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 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.	`tabs.query`
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.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 `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`
user-script		`contentScripts.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`

Example extensions

Learn the best of web development