Example extensions

확장앱 개발하는 방법을 설명하기 위해 간단한 예제를 저장해놓은 저장소를 두고 있다 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

문서 태그 및 공헌자

웹 개발 배우기

감사합니다! 구독 확인을 위해 받은 편지함을 확인해 주세요.