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:
| |
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 |