ツールバーにボタンを追加する

ツールバーボタンは拡張機能で利用できる主な UI コンポーネントです。ツールバーボタンはブラウザーツールバーに存在してアイコンを含んでいます。ユーザーがアイコンをクリックした時、下記の 2 つのいずれかが起こります:

アイコンのポップアップを指定した場合、ポップアップが表示されます。ポップアップは HTML, CSS, JavaScript を使った一時的なダイアログです。
ポップアップを指定していない場合、クリックイベントが生成され、コード内でそれをリッスンして、応答すべき他のアクションを実行できます。

WebExtension API では、こうしたボタンの種類は "ブラウザーアクション" と呼ばれ、次のようにセットアップされます:

ボタンを定義するために使われる manifest.json の browser_action キー
JavaScript APIbrowserAction はコードに応じてクリックとボタンの変更をリッスンしたりアクションを実行します。

ポップアップを追加する

ボタンにポップアップを追加してみましょう。manifest.json を次のように置き換えます:

json

{  "description": "Demonstrating toolbar buttons",  "manifest_version": 2,  "name": "button-demo",  "version": "1.0",  "browser_action": {    "browser_style": true,    "default_popup": "popup/choose_page.html",    "default_icon": {      "16": "icons/page-16.png",      "32": "icons/page-32.png"    }  }}

オリジナルから 3 つの変更点があります:

もう "background.js"は参照しません、なぜならポップアップスクリプト内で拡張機能のロジックを扱うためです (ポップアップと同様に background.js が許可されますが、この場合は不要です)。
"browser_style": true を追加しており、これはポップアップがブラウザーの一部であるようなスタイリングに役立ちます。
最後に"default_popup": "popup/choose_page.html" を追加します。これはブラウザーアクションがクリック時にポップアップを表示し、"popup/choose_page.html" に document があることをブラウザーに伝えます。

さてポップアップを作らねばなりません。"popup" というディレクトリーを作成してその中に "choose_page.html" というファイルを作ります。中身は次の通り:

html

<!doctype html><html>  <head>    <meta charset="utf-8" />    <link rel="stylesheet" href="choose_page.css" />  </head>  <body>    <div>developer.mozilla.org</div>    <div>support.mozilla.org</div>    <div>addons.mozilla.org</div>    <script src="choose_page.js"></script>  </body></html>

これはふつうの HTML ページに 3 つの<div> 要素があり、その中に Mozilla サイトがあるのが分かるでしょう。また次で追加する CSS ファイルと JavaScript ファイルも入っています。

"popup" ディレクトリーに"choose_page.css" というファイルを作って、次の中身を入れます:

css

html,body {  width: 300px;}.page-choice {  width: 100%;  padding: 4px;  font-size: 1.5em;  text-align: center;  cursor: pointer;}.page-choice:hover {  background-color: #cff2f2;}

これは単にポップアップのスタイリングです。

次に、"popup" ディレクトリーに"choose_page.js" ファイルを作成し、次の中身を入れます:

document.addEventListener("click", function (e) {  if (!e.target.classList.contains("page-choice")) {    return;  }  var chosenPage = "https://" + e.target.textContent;  browser.tabs.create({    url: chosenPage,  });});

この JavaScript で、ポップアップ選択のクリックをリッスンします。まずは page-choices にクリックがあったかをチェックし、そうでない場合は何もしません。クリックが page-choice にあった場合は、それから URL を作成し、対応するページを含む新規タブを開きます。注意として、バックグラウンドスクリプト内と同じように、ポップアップスクリプトでも WebExtension APIs を使用できます。

拡張機能の最終構造は次の通りです:

button/    icons/        page-16.png        page-32.png    popup/        choose_page.css        choose_page.html        choose_page.js    manifest.json

拡張機能を再読み込みし、もう一度ボタンをクリックし、ポップアップの選択をクリックしてみてください: