この翻訳は不完全です。英語から この記事を翻訳 してください。

Object
必須 いいえ
"page_action": {
  "browser_style": true,
  "default_icon": {
    "19": "button/geo-19.png",
    "38": "button/geo-38.png"
  },
  "default_title": "Whereami?",
  "default_popup": "popup/geo.html"
}

ページアクションは拡張機能がブラウザーのURLバーの中に追加できるアイコンです。

拡張機能では関連したポップアップをつけて、そこでHTML、CSS、 JavaScript を使ったコンテンツを提供することもできます。

ポップアップを提供した場合、ユーザーがアイコンをクリックした時にポップアップが開いて、ポップアップ内で実行する JavaScript にてユーザーのインタラクションを扱います。ポップアップをつけない場合、ユーザーがアイコンをクリックした時のクリックイベントは拡張機能の background scripts に送られます。

pageAction API を使用してプログラムでページアクションを作成および操作することもできます。

ページアクションはブラウザアクションと似ていますが、ブラウザ全体ではなく特定の Web ページに関連付けられている点が異なります。アクションが特定のページにのみ関連している場合は、ページアクションを使用して関連するページにのみ表示する必要があります。アクションがすべてのページまたはブラウザ自体に関連している場合は、ブラウザアクションを使用してください。

ブラウザアクションはデフォルトで表示されますが、ページアクションはデフォルトで非表示になります。タブのIDを渡して pageAction.show() を呼び出すことで、それらを特定のタブに対して表示できます。show_matches プロパティを使用してこのデフォルトの動作を変更することもできます。

構文

The page_action key is an object that may have any of three properties, all optional:

名前 説明
browser_style Boolean

Optional, defaulting to false.

Use this to include a stylesheet in your popup that will make it look consistent with the browser's UI and with other extensions that use the browser_style property. Although this key defaults to false, it's recommended that you include it and set it to true in order to make your popups consistent with the look of the rest of the browser user interface.

In Firefox, the stylesheet can be seen at chrome://browser/content/extension.css, or chrome://browser/content/extension-mac.css on OS X.

The Firefox Style Guide describes the classes you can apply to elements in the popup in order to get particular styles.

The latest-download example extension uses browser_style in its popup.

default_icon Object or String

Use this to specify an icon for the action.

It's recommended that you supply two icons here, one 19x19 pixels, and one 38x38 pixels, and specify them in an object with properties named "19" and "38", like this:

    "default_icon": {
      "19": "geo-19.png",
      "38": "geo-38.png"
    }

If you do this, then the browser will pick the right size icon for the screen's pixel density.

You can just supply a string here:

"default_icon": "geo.png"

If you do this, then the icon will be scaled to fit the toolbar, and may appear blurry.

default_popup String

The path to an HTML file containing the specification of the popup.

The HTML file may include CSS and JavaScript files using <link> and <script> elements, just like a normal web page. However, don't use <script> with embedded code, because you'll get a  Content Violation Policy error. Instead, <script> must use the src attribute to load a separate script file.

Unlike a normal web page, JavaScript running in the popup can access all the WebExtension APIs (subject, of course, to the extension having the appropriate permissions).

これはローカライズ可能なプロパティです。

default_title String

Tooltip for the icon, displayed when the user moves their mouse over it.

This is a localizable property.

hide_matches Array of Match Pattern except <all_urls>

Hide the page action 既定では for pages whose URLs match any of the given match patterns.

Note that page actions are always hidden 既定では unless show_matches is given. Therefore it only makes sense to include this property if show_matches is also given, and in this case it will override the patterns in show_matches. 例えば、consider a value like:

"page_action": {
  "show_matches": ["https://*.mozilla.org/*"],
  "hide_matches": ["https://developer.mozilla.org/*"]
}

This shows the page action 既定では for all HTTPS  URLs under the "mozilla.org" domain, except for pages under "developer.mozilla.org".

show_matches Array of Match Pattern

Show the page action 既定では for pages whose URLs match any of the given patterns.

See also hide_matches.

pinned Boolean

Optional, defaulting to true.

Controls whether or not the page action should appear in the location bar 既定では when the user installs the extension.

"page_action": {
  "default_icon": {
    "19": "button/geo-19.png",
    "38": "button/geo-38.png"
  }
}

A page action with just an icon, specified in 2 different sizes. The extension's background scripts can receive click events when the user clicks the icon using code like this:

 browser.pageAction.onClicked.addListener(handleClick);
"page_action": {
  "default_icon": {
    "19": "button/geo-19.png",
    "38": "button/geo-38.png"
  },
  "default_title": "Whereami?",
  "default_popup": "popup/geo.html"
}

A page action with an icon, a title, and a popup. The popup will be shown when the user clicks the icon.

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxOperaAndroid 版 Firefox
page_actionChrome 完全対応 あり
補足
完全対応 あり
補足
補足 If an extension defines a page action, it is not allowed to define a browser action as well.
完全対応 49
補足
補足 Since Chrome 49, page actions are displayed on the toolbar, rather than in the address bar.
Edge 完全対応 14Firefox 完全対応 48Opera 完全対応 あり
補足
完全対応 あり
補足
補足 If an extension defines a page action, it is not allowed to define a browser action as well.
Firefox Android 完全対応 あり
browser_styleChrome 未対応 なしEdge 未対応 なしFirefox 完全対応 48Opera 未対応 なしFirefox Android 未対応 なし
default_iconChrome 完全対応 あり
補足
完全対応 あり
補足
補足 SVG icons are not supported.
Edge 部分対応 14
補足
部分対応 14
補足
補足 SVG icons are not supported.
補足 'default_icon' must be an object, with explicit sizes.
Firefox 完全対応 48Opera 完全対応 あり
補足
完全対応 あり
補足
補足 SVG icons are not supported.
Firefox Android 完全対応 あり
default_popupChrome 完全対応 ありEdge 完全対応 14Firefox 完全対応 48Opera 完全対応 ありFirefox Android 完全対応 あり
default_titleChrome 完全対応 ありEdge 完全対応 14Firefox 完全対応 48Opera 完全対応 ありFirefox Android 完全対応 あり
hide_matchesChrome 未対応 なしEdge 未対応 なしFirefox 完全対応 59Opera 未対応 なしFirefox Android 完全対応 59
pinnedChrome 未対応 なしEdge 未対応 なしFirefox 完全対応 64Opera 未対応 なしFirefox Android 未対応 なし
show_matchesChrome 未対応 なしEdge 未対応 なしFirefox 完全対応 59Opera 未対応 なしFirefox Android 完全対応 59

凡例

完全対応  
完全対応
部分対応  
部分対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。

関連情報

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

このページの貢献者: Raysphere24, mdnwebdocs-bot, wbamberg, Uemmra3
最終更新者: Raysphere24,