ブラウザー拡張機能とは、ブラウザーの本体に外付けするプログラムで、ブラウザー本体の機能を損なわずに、 新たな機能を追加したりするものである。よく知られているものとしては、 広告会社が表示する画像を表示させないようにする拡張機能がある。この拡張機能はよくアドオンといわれている。
さて、ブラウザー拡張機能を自分で作ってみたい、開発したいと思っても、敷居が高い。まずは、どんな例があるのか、
サンプルはどうなっているのかを調べてみた。
https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Examples
には拡張機能の例として、下記の表がある。説明のごく一部に日本語訳をつけた。
| 名称 | 説明 | JavaScript API |
|---|---|---|
| annotate-page | Webページでメモを取ることができるサイドバーを表示します | storage.local tabs.onActivated tabs.onUpdated tabs.query tabs.Tab windows.getCurrent windows.Window |
| apply-css | ツールバーにページアクションを追加します。 ボタンをクリックして、注入されたCSSを使用して赤い境界線を適用します。ボタンをもう一度クリックして、CSSを削除します。 | pageAction.getTitle pageAction.onClicked pageAction.setIcon pageAction.setTitle pageAction.show tabs.insertCSS tabs.onUpdated tabs.query tabs.removeCSS tabs.Tab |
| beastify | ||
| bookmark-it | ||
| borderify | mozilla.org にマッチするウェブページに赤い実線枠をつけます。 | - |
| chill-out | 活動していない期間の後にページのアクションを表示します。 ページアクションをクリックしたときに猫の gif 画像を表示します。 | alarms.clearAll alarms.create alarms.onAlarm pageAction.hide pageAction.onClicked pageAction.show tabs.get tabs.onActivated tabs.onUpdated tabs.query tabs.update |
| commands | ||
| content-script-register | ||
| context-menu-copy-link-with-types | ||
| contextual-identities | ||
| cookie-bg-picker | ||
| devtools-panel | devtools API のデモ | devtools.inspectedWindow devtools.panels runtime.getURL runtime.onMessage runtime.sendMessage tabs.executeScript |
| discogs-search | chrome_settings_overridesキーを使用してカスタム検索エンジンを追加することを示します。 | - |
| dynamic-theme | ||
| emoji-substition | 単語を絵文字に置き換えます。 | - |
| eslint-example | eslintを使用して拡張機能を構成する方法を示します。 | - |
| export-helplers | ||
| find-across-tabs | 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 | ||
| forget-it | ||
| google-userinfo | ||
| history-deleter | ||
| http-response | ||
| imagify | ||
| latest-download | 最後にダウンロードしたアイテムを表示し、開いたり削除したりできます。 | downloads.erase downloads.getFileIcon downloads.open downloads.removeFile downloads.search |
| list-cookies | ||
| menu-accesskey-visible | ||
| menu-demo | ||
| menu-labelled-open | ||
| menu-remove-element | ||
| menu-search | ||
| mocha-client-test | ||
| native-messaging | ||
| navigation-stats | webNavigation APIのデモンストレーション。アクセスしたページに関する基本的な統計情報を表示します | storage.local webNavigation.onCommitted webNavigation.onCompleted |
| notify-link-clicks-i18n | ||
| open-irc-links | プロトコルハンドラーの使用例 | - |
| open-my-page-button | ||
| page-to-extension-messaging | Webページとコンテンツスクリプトがメッセージを交換する方法を示します。 デモについては、 https://mdn.github.io/webextensions-examples/content-script-page-script-messaging.html にアクセスしてください。 | - |
| permissions | ||
| private-browsing-theme | ||
| proxy-blocker | ||
| quicknote | ボタンをクリックして、結果のポップアップにテキストを入力することにより、ユーザーがすばやくメモを作成できるようにします。ノートはストレージに保存されます。 | storage.local |
| root-cert-stats | ||
| runtime-examples | ||
| selection-to-clipboard | コンテンツスクリプトからクリップボードに書き込む方法を示します。 | - |
| session-state | ||
| store-collected-images | ||
| stored-credentials | ||
| tabs-tabs-tabs | ||
| theme-integrated-sidebar | 現在のテーマと統合するサイドバー。 | theme.getCurrent theme.onUpdated windows.getCurrent |
| theme-switcher | ||
| themes | テーマの集合:
| - |
| top-sites | ||
| user-agent-rewriter | ||
| user-script-register | ||
| webpack-modules | ||
| window-manipulator | ウィンドウを操作する - ウィンドウを開く、閉じる、サイズを変更する - 方法を示します。 | windows.create windows.getAll windows.getCurrent windows.remove windows.update windows.Window |
まりんきょ学問所 ＞ JavaScript 手習い ＞ ブラウザー拡張機能
