Movatterモバイル変換


[0]ホーム

URL:


MDN Web Docs

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

ツールバーボタン

このユーザーインターフェイスオプションは、よくブラウザーアクションと呼ばれており、 ブラウザーのツールバーに追加されるボタンです。 ユーザーはボタンをクリックして拡張機能とやりとりします。

ツールバーボタン(ブラウザーアクション)はアドレスバーボタン(ページアクション)とよく似ています。違いと使用する場面ついてのガイダンスは、ページアクションとブラウザーアクションを参照してください。

ブラウザーアクションの指定

ブラウザーアクションのプロパティは manifest.json のbrowser_action キーで定義します。

json
"browser_action": {  "default_icon": {    "19": "button/geo-19.png",    "38": "button/geo-38.png"  },  "default_title": "Whereami?"}

唯一不可欠なキーはdefault_icon です。

ブラウザーアクションの指定には 2 つの方法があります。ポップアップつきのものと、なしのものです。ポップアップを指定しないと、ユーザーがボタンをクリックした時に、拡張機能にイベントが配信されます。これを拡張機能がbrowserAction.onClicked を使って待ち受けします。

js
browser.browserAction.onClicked.addListener(handleClick);

ポップアップを指定すると、クリックイベントは配信されません。その代わりに、ユーザーがボタンをクリックした時にポップアップが表示されます。ユーザーはポップアップを操作することができ、ユーザーが範囲外をクリックした時に自動的にポップアップが閉じます。ポップアップを作成、管理することの詳細はポップアップの記事を見てください。

なお、拡張機能が持つことができるブラウザーアクションは 1 つだけです。

ブラウザーアクションのプロパティの多くは、browserAction API 使用してプログラムからも変更できます。

アイコン

ブラウザーアクションのアイコンの作成方法の詳細は、IconographyPhoton Design System のドキュメントで参照してください。

Github のwebextensions-examples リポジトリーには、ブラウザーアクションを使う拡張機能の例がいくつかあります。

  • bookmark-it はポップアップなしのブラウザーアクションを使用します。
  • beastify はポップアップ付きのブラウザーアクションを使用します。

Help improve MDN

Learn how to contribute.

This page was last modified on byMDN contributors.


[8]ページ先頭

©2009-2025 Movatter.jp