Address bar button

El botón de la barra de direcciones (o página de acción) es muy parecida al botón de la barra de herramientas (o acción del navegador).

Las diferencias son:

• La localización del botón:

  • La acción de página es mostrado dentro de la barra de direcciones del navegador.
  • La acción del navegador es mostrado fuera de la barra de direcciones, exactamente en la barra de herramientas del navegador.

• La visibilidad del botón:

  • La acción de página esta oculta por defecto (sin embargo esto puede ser cambiado en la propiedades show_matches y hide_matches manifest key), y tu puedes llamar pageAction.show() y pageAction.hide() para mostrar o ocultar esto en pestañas especificas.
  • La acción del navegador siempre esta mostrada.

Usa una página de acción cuando cuando la acción este relacionada a la página en curso, y una acción de navegador cuando cuando la acción este relacionada a todas o a muchas páginas. Por ejemplo:

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.

• Without a popup: When the user clicks the button, an event is dispatched to the extension, which the extension listens for using pageAction.onClicked:

• js

  browser.pageAction.onClicked.addListener(handleClick);
  

• With a popup: the click event is not dispatched. Instead, the popup appears when the user clicks the button. The user then interacts with the popup. When the user clicks outside of the popup, it closes automatically. See the Popuparticle 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.

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

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