WebExtensions の開発方法を分かりやすく説明した、シンプルな WebExtensions のサンプルを集めたレポジトリ https://github.com/mdn/webextensions-examples を公開しています。この記事では、そのレポジトリにあるアドオンについて説明します。

これらのサンプルは Firefox Nightly で動作します。ほとんどのものがよりバージョン番号の小さい Firefox でも動作しますが、アドオンの manifest.json に指定されている strict_min_version キーを確認してください。

試してみたい方には、3つの選択肢があります:

  1. リポジトリを clone し、アドオンをソースディレクトリから直接読み込む方法。"Load Temporary Add-on" 機能を使います。Firefox をリスタートするまでアドオンは読み込まれたままです。
  2. リポジトリを clone し、web-ext コマンドラインツールを使って そのアドオンがインストールされた状態で Firefox を起動する。
  3. リポジトリを clone し、build ディレクトリに移動する。ここにはすべてのサンプルのビルドされ署名されたバージョンが置かれています。Firefox のメニュー ファイル/ファイルを開く から開いて、アドオンをインストールすることができます。addons.mozilla.org からインストールしたのと同じ状態になります。

レポジトリにコントリビュートしたい方は、是非とも pull request を送ってください!


apply-css

https://github.com/mdn/webextensions-examples/tree/master/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.

JavaScript APIs


beastify

https://github.com/mdn/webextensions-examples/tree/master/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.

JavaScript APIs


bookmark-it

https://github.com/mdn/webextensions-examples/tree/master/bookmark-it

Adds a bookmark button to the toolbar. Click the button to toggle a bookmark for the current page.

JavaScript APIs


borderify

https://github.com/mdn/webextensions-examples/tree/master/borderify

Adds a solid red border to all webpages matching mozilla.org.


chill-out

https://github.com/mdn/webextensions-examples/tree/master/chill-out

Show a page action after a period of inactivity. Show cat gifs when the page action is clicked.

JavaScript APIs


commands

https://github.com/mdn/webextensions-examples/tree/master/commands

Demonstrates using the commands API to set up a keyboard shortcut. Thr shortcut created is accessed using Ctrl+Shift+Y (Command+Shift+Y on a Mac).

JavaScript APIs


context-menu-demo

https://github.com/mdn/webextensions-examples/tree/master/context-menu-demo

Demonstrates adding and manipulating context menu items using the contextMenus API.

JavaScript APIs


contextual-identities

https://github.com/mdn/webextensions-examples/tree/master/contextual-identities

List, create, and remove contextual identities.

JavaScript APIs


https://github.com/mdn/webextensions-examples/tree/master/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.

JavaScript APIs


embedded-webextension-bootstrapped

https://github.com/mdn/webextensions-examples/tree/master/embedded-webextension-bootstrapped

Demonstrates how to use an embedded WebExtension to port from a bootstrapped extension.

JavaScript APIs


embedded-webextension-sdk

https://github.com/mdn/webextensions-examples/tree/master/embedded-webextension-sdk

Demonstrates how to use an embedded WebExtension to port from an SDK-based add-on.

JavaScript APIs


emoji-substitution

https://github.com/mdn/webextensions-examples/tree/master/emoji-substitution

Replaces words with emojis.


eslint-example

https://github.com/mdn/webextensions-examples/tree/master/eslint-example

Demonstrates how to configure a WebExtension with eslint.


favourite-colour

https://github.com/mdn/webextensions-examples/tree/master/favourite-colour

An example options page, letting you store your favourite colour.

JavaScript APIs


https://github.com/mdn/webextensions-examples/tree/master/firefox-code-search

Demonstrates how to use the omnibox API.

JavaScript APIs


forget-it

https://github.com/mdn/webextensions-examples/tree/master/forget-it

Demonstrates how to use the browsingData API.

JavaScript APIs


google-userinfo

https://github.com/mdn/webextensions-examples/tree/master/google-userinfo

Demonstrates how to use the identity API.

JavaScript APIs


history-deleter

https://github.com/mdn/webextensions-examples/tree/master/history-deleter

History API demo: deletes history items for a given domain

JavaScript APIs


latest-download

https://github.com/mdn/webextensions-examples/tree/master/latest-download

Shows the last downloaded item, and lets you open or delete it.

JavaScript APIs


list-cookies

https://github.com/mdn/webextensions-examples/tree/master/list-cookies

This extensions list the cookies in the active tab.

JavaScript APIs


mocha-client-tests

https://github.com/mdn/webextensions-examples/tree/master/mocha-client-tests

This example shows two methods of testing a WebExtension: running tests from within the add-on, and running tests from the command line using Karma

JavaScript APIs


native-messaging

https://github.com/mdn/webextensions-examples/tree/master/native-messaging

Example of native messaging, including a Python application and a WebExtension which exchanges messages with it.

JavaScript APIs


https://github.com/mdn/webextensions-examples/tree/master/navigation-stats

Demonstration of the webNavigation API, showing basic stata about which pages you've visited.

JavaScript APIs


https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n

Shows a localized notification when the user clicks on links.

JavaScript APIs


open-my-page-button

https://github.com/mdn/webextensions-examples/tree/master/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.

JavaScript APIs


page-to-extension-messaging

https://github.com/mdn/webextensions-examples/tree/master/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.


quicknote

https://github.com/mdn/webextensions-examples/tree/master/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.

JavaScript APIs


react-es6-popup

https://github.com/mdn/webextensions-examples/tree/master/react-es6-popup

This is an example of creating a browser action popup UI in React and ES6 JavaScript.


selection-to-clipboard

https://github.com/mdn/webextensions-examples/tree/master/selection-to-clipboard

Demonstrates how to write to the clipboard from a content script


tabs-tabs-tabs

https://github.com/mdn/webextensions-examples/tree/master/tabs-tabs-tabs

Demonstrates tab manipulation: opening, closing, moving, zooming tabs.

JavaScript APIs


top-sites

https://github.com/mdn/webextensions-examples/tree/master/top-sites

Demonstration of the topSites API.

JavaScript APIs


user-agent-rewriter

https://github.com/mdn/webextensions-examples/tree/master/user-agent-rewriter

Demonstrates using the webRequest API to rewrite the User-Agent HTTP header.

JavaScript APIs


webpack-modules

https://github.com/mdn/webextensions-examples/tree/master/webpack-modules

Demonstrates how to use webpack to package npm modules in a WebExtension.

JavaScript APIs


window-manipulator

https://github.com/mdn/webextensions-examples/tree/master/window-manipulator

Demonstrates how to manipulate windows: opening, closing, resizing windows.

JavaScript APIs

ドキュメントのタグと貢献者

 このページの貢献者: hamasaki, hashedhyphen
 最終更新者: hamasaki,