Наши волонтёры ещё не перевели данную статью на Русский. Присоединяйтесь к нам и помогите сделать эту работу!
Вы можете также прочитать эту статью на English (US).

Commonly referred to as a page action, this user interface option is a button added to the browser address bar. Users click the button to interact with your extension.

Page actions and browser actions

The address bar button (or page action) is very like the toolbar button (or browser action).

The differences are:

  • location:
    • The page action is displayed inside the browser's address bar.
    • The browser action is displayed outside the address bar, in the browser's toolbar.
  • visibility:
    • The page action is hidden by default (although this default can be changed via the show_matches and hide_matches manifest key properties), and you call pageAction.show() and pageAction.hide() to show or hide it in specific tabs.
    • The browser action is always displayed.

Use a page action when the action is related to the current page, and a browser action when the action is related to the browser as a whole or to many pages. For example:

Type Bookmarks action Content action Tabs operation
page action Bookmark this page Reddit enhancement Send tab
browser action Show all bookmarks Enable ad-blocking Sync all open tabs

 

Specifying the page action

You define the page action's properties using the page_action key in manifest.json:

"page_action": {
  "browser_style": true,
  "default_icon": {
    "19": "button/geo-19.png",
    "38": "button/geo-38.png"
  },
  "default_title": "Whereami?"
}

The only mandatory key is default_icon.

There are two ways to specify a page action: with or without a popup. If you don't specify a popup, when the user clicks the button an event is dispatched to the extension, which the extension listens for using pageAction.onClicked:

browser.pageAction.onClicked.addListener(handleClick);

If you specify a popup, the click event is not dispatched: instead, the popup is shown when the user clicks the button. The user is able to interact with the popup and it closes automatically when the user clicks outside it. See the Popup article for more details on creating and managing popups.

Note that your extension can have one page action only.

You can change any of the page action properties programmatically using the pageAction API.

Icons

For details on how to create icons to use with your page action, see Iconography in the Photon Design System documentation.

Examples

The webextensions-examples repository on GitHub includes the chill-out example which implements a page action without a popup.

Метки документа и участники

Внесли вклад в эту страницу: wbamberg, rebloor, phreaknerd, andrewtruongmoz, hellosct1
Обновлялась последний раз: wbamberg,