ブラウザーのツールバーにボタンを追加します。
ブラウザーアクションはブラウザーのツールバー内のボタンです。
これをボタンつきポップアップと関連付けられます。ポップアップは通常のウェブページ同様に、HTML, CSS, JavaScript を使って指定できます。ポップアップの中で動く JavaScript はバックグラウンドスクリプトとすべて同じ WebExtension API にアクセスできますが、グローバルコンテキストはブラウザーに表示される現在のページではなく、ポップアップになります。ウェブページに影響するには messages 経由で通信する必要があります。
ユーザーがアイコンをクリックした時に、ポップアップを指定していると、表示され — そしてコンテンツが読み込まれるでしょう 。ポップアップを指定していない時は、ユーザーがアイコンをクリックした時、拡張機能にイベントがディスパッチされます。
たいていのブラウザーアクションのプロパティは、manifest.json 内の browser_action キーを用いて宣言的に定義できます。
browserAction API では、次が可能です:
browserAction.onClickedを使ってアイコンのクリックをリッスンする- アイコンのプロパティ — アイコン、タイトル、ポップアップなど、の取得、設定。これはすべてのタブを通してグローバルにも、またはタブの ID を追加引数で渡すことで特定のタブだけにも取得、設定できます。
型
browserAction.ColorArray- RGBA 色を決める 0-255 の範囲の4整数の配列
browserAction.ImageDataType- 画像のピクセルデータ。
ImageDataオブジェクト (例えば<canvas>要素から) でないといけない。
関数
browserAction.setTitle()- ブラウザーアクションのタイトルをセットする。ツールチップに表示される。
browserAction.getTitle()- ブラウザーアクションのタイトルを取得します。
browserAction.setIcon()- ブラウザーアクションのアイコンをセットします。
browserAction.setPopup()- ユーザーがブラウザーアクションのアイコンをクリックした時に表示されるポップアップの HTML 文書をセットします。
browserAction.getPopup()- ブラウザーアクションのポップアップとしてセットされた HTML 文書を取得します。
browserAction.openPopup()- ブラウザーアクションのポップアップを開きます。
browserAction.setBadgeText()- ブラウザーアクションのバッジテキストをセットします。バッジはアイコンの上部に表示されます。
browserAction.getBadgeText()- ブラウザーアクションのバッジのテキストを取得します。
browserAction.setBadgeBackgroundColor()- バッジの背景色を指定します。
browserAction.getBadgeBackgroundColor()- バッジの背景色を取得します。
browserAction.enable()- タブのブラウザーアクションを有効にします。既定では、ブラウザーアクションはすべてのタブで有効です。
browserAction.disable()- タブのブラウザーアクションを無効にします。つまりタブがアクティブでもクリックできません。
browserAction.isEnabled()- ブラウザーアクションが有効か否かをチェックします。
イベント
browserAction.onClicked- ブラウザーアクションがクリックされた時に発火します。このイベントはブラウザーアクションがポップアップ付きでない場合は発火しません。
ブラウザ実装状況
Update compatibility data on GitHub
| デスクトップ | モバイル | ||||
|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Android 版 Firefox | |
ColorArray | Chrome 完全対応 あり | Edge 完全対応 14 | Firefox 完全対応 45 | Opera 完全対応 あり | Firefox Android 未対応 なし |
ImageDataType | Chrome 完全対応 あり | Edge 完全対応 14 | Firefox 完全対応 45 | Opera 完全対応 あり | Firefox Android 未対応 なし |
disable | Chrome 完全対応 あり | Edge 完全対応 14 | Firefox 完全対応 45 | Opera 完全対応 あり | Firefox Android 未対応 なし |
enable | Chrome 完全対応 あり | Edge 完全対応 14 | Firefox 完全対応 45 | Opera 完全対応 あり | Firefox Android 未対応 なし |
getBadgeBackgroundColor | Chrome 完全対応 あり | Edge 完全対応 14 | Firefox 完全対応 45 | Opera 完全対応 あり | Firefox Android 未対応 なし |
getBadgeText | Chrome 完全対応 あり | Edge 完全対応 14 | Firefox 完全対応 45 | Opera 完全対応 あり | Firefox Android 未対応 なし |
getBadgeTextColor | Chrome 未対応 なし | Edge 未対応 なし | Firefox 完全対応 63 | Opera 未対応 なし | Firefox Android 未対応 なし |
getPopup | Chrome 完全対応 あり | Edge 未対応 なし | Firefox 完全対応 45 | Opera 完全対応 あり | Firefox Android 完全対応 57 |
getTitle | Chrome 完全対応 あり | Edge 完全対応 15 | Firefox 完全対応 45 | Opera 完全対応 あり | Firefox Android 完全対応 55 |
isEnabled | Chrome 未対応 なし | Edge 未対応 なし | Firefox 完全対応 59 | Opera 未対応 なし | Firefox Android 未対応 なし |
onClicked | Chrome 完全対応 あり | Edge 完全対応 14 | Firefox 完全対応 45 | Opera 完全対応 あり | Firefox Android 完全対応 55 |
openPopup | Chrome 未対応 なし | Edge 未対応 なし | Firefox 完全対応 57 | Opera 未対応 なし | Firefox Android 未対応 なし |
setBadgeBackgroundColor | Chrome 完全対応 あり | Edge 完全対応 14 | Firefox
完全対応
45
| Opera 完全対応 あり | Firefox Android 未対応 なし |
setBadgeText | Chrome 完全対応 あり | Edge 完全対応 14 | Firefox
完全対応
45
| Opera 完全対応 あり | Firefox Android 未対応 なし |
setBadgeTextColor | Chrome 未対応 なし | Edge 未対応 なし | Firefox 完全対応 63 | Opera 未対応 なし | Firefox Android 未対応 なし |
setIcon | Chrome
完全対応
あり
| Edge
完全対応
14
| Firefox
完全対応
45
| Opera 完全対応 15 | Firefox Android 未対応 なし |
setPopup | Chrome 完全対応 あり | Edge 完全対応 14 | Firefox
完全対応
45
| Opera 完全対応 あり | Firefox Android
完全対応
57
|
setTitle | Chrome 完全対応 あり | Edge 完全対応 15 | Firefox
完全対応
45
| Opera 完全対応 あり | Firefox Android
完全対応
55
|
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 実装ノートを参照してください。
- 実装ノートを参照してください。
The "Chrome incompatibilities" section is included from https://developer.mozilla.org/ja/Add-ons/WebExtensions/Chrome_incompatibilities using the WebExtChromeCompat macro.
If you need to update this content, edit https://developer.mozilla.org/ja/Add-ons/WebExtensions/Chrome_incompatibilities, then shift-refresh this page to see your changes.
Example extensions
- bookmark-it
- favourite-colour
- find-across-tabs
- forget-it
- google-userinfo
- native-messaging
- open-my-page-button
- permissions
- runtime-examples
- store-collected-images
- tabs-tabs-tabs
謝辞
この API は Chromium の chrome.browserAction API に基づいています。この文書は Chromium コードの browser_action.json から得ています。
Microsoft Edge の実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。
// Copyright 2015 The Chromium Authors. All rights reserved. // // Redistribution and use in source and binary forms, with or without // modification, are permitted provided that the following conditions are // met: // // * Redistributions of source code must retain the above copyright // notice, this list of conditions and the following disclaimer. // * Redistributions in binary form must reproduce the above // copyright notice, this list of conditions and the following disclaimer // in the documentation and/or other materials provided with the // distribution. // * Neither the name of Google Inc. nor the names of its // contributors may be used to endorse or promote products derived from // this software without specific prior written permission. // // THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS // "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT // LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR // A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT // OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, // SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT // LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, // DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY // THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT // (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE // OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.