chrome.pageAction

Descripción

Usa la API de chrome.pageAction para colocar íconos en la barra de herramientas principal de Google Chrome, a la derecha de la barra de direcciones. Las acciones de la página representan aquellas que se pueden realizar en la página actual, pero que no se aplican a todas las páginas. Las acciones de la página se muestran en gris cuando están inactivas.

Disponibilidad

≤ MV2

Estos son algunos ejemplos:

  • Suscribirse al feed RSS de esta página
  • Crea una presentación de diapositivas con las fotos de esta página

El ícono de RSS en la siguiente captura de pantalla representa una acción de la página que te permite suscribirte al RSS de la página actual.

Las acciones de la página ocultas aparecen inhabilitadas. Por ejemplo, el feed RSS que aparece a continuación está inhabilitado, ya que no puedes suscribirse al feed de la página actual:

En su lugar, considera usar una acción del navegador para que los usuarios siempre puedan interactuar con tu .

Manifiesto

Registra la acción de tu página en el manifiesto de extensión de la siguiente manera:

{
  "name": "My extension",
  ...
  "page_action": {
    "default_icon": {                    // optional
      "16": "images/icon16.png",           // optional
      "24": "images/icon24.png",           // optional
      "32": "images/icon32.png"            // optional
    },
    "default_title": "Google Mail",      // optional; shown in tooltip
    "default_popup": "popup.html"        // optional
  },
  ...
}

Dado que los dispositivos con factores de escala menos comunes como 1.5x o 1.2x son cada vez más comunes, estás se recomienda que proporciones varios tamaños para tus iconos. Chrome seleccionará la opción más cercana y la escalará para llenar el espacio de 16 dip. Esto también garantiza que si alguna vez se cambia el tamaño de visualización del ícono, no debemos hacer más trabajo para proporcionar iconos diferentes. Sin embargo, si la diferencia de tamaño es demasiado extrema, esta escala puede hacer que el ícono pierda detalles o se vea borroso.

Aún se admite la sintaxis anterior para registrar el ícono predeterminado:

{
  "name": "My extension",
  ...
  "page_action": {
    ...
    "default_icon": "images/icon32.png"  // optional
    // equivalent to "default_icon": { "32": "images/icon32.png" }
  },
  ...
}

Partes de la IU

Al igual que las acciones del navegador, las acciones de página pueden tener un ícono, un cuadro de información y una ventana emergente. no puede tener insignias, sin embargo. Además, las acciones de la página pueden estar inhabilitadas. Puedes encontrar información sobre íconos, información sobre herramientas y ventanas emergentes; para ello, consulta la IU de acción del navegador.

Haces que una acción de la página aparezca y se muestre inhabilitada con pageAction.show y pageAction.hide, respectivamente. Las acciones de la página se muestran inhabilitadas de forma predeterminada. Cuando mostrarlo, debes especificar la pestaña en la que debe aparecer el ícono. El ícono permanece visible hasta que la pestaña Se cierra o comienza a mostrar una URL diferente (porque el usuario hace clic en un vínculo, por ejemplo).

Sugerencias

Para lograr el mejor impacto visual, sigue estos lineamientos:

  • Usa las acciones de página para funciones que sean relevantes solo para unas pocas páginas.
  • No uses las acciones de página para funciones que son relevantes para la mayoría de las páginas. Usa las acciones del navegador. en su lugar.
  • No animes tu ícono constantemente. Eso es molesto.

Tipos

ImageDataType

Datos de píxeles para una imagen. Debe ser un objeto ImageData (por ejemplo, de un elemento canvas).

Tipo

ImageData

TabDetails

Chrome 88 y versiones posteriores

Propiedades

  • tabId

    número opcional

    El ID de la pestaña para la que se consulta el estado. Si no se especifica ninguna pestaña, se devuelve un estado que no es específico de una pestaña.

Métodos

getPopup()

Promesa 
chrome.pageAction.getPopup(
  details: TabDetails,
  callback?: function,
)

Obtiene el conjunto de documentos HTML como la ventana emergente para esta acción de la página.

Parámetros

  • detalles

    TabDetails

  • callback

    función opcional

    El parámetro callback se ve de la siguiente manera: 

    (result: string) => void

    • resultado

      string

Muestra

  • Promesa<string>

    Chrome 101 y versiones posteriores

    Las promesas solo son compatibles con Manifest V3 y versiones posteriores; otras plataformas deben usar devoluciones de llamada.

getTitle()

Promesa 
chrome.pageAction.getTitle(
  details: TabDetails,
  callback?: function,
)

Obtiene el título de la acción de la página.

Parámetros

  • detalles

    TabDetails

  • callback

    función opcional

    El parámetro callback se ve de la siguiente manera: 

    (result: string) => void

    • resultado

      string

Muestra

  • Promesa<string>

    Chrome 101 y versiones posteriores

    Las promesas solo son compatibles con Manifest V3 y versiones posteriores; otras plataformas deben usar devoluciones de llamada.

hide()

Promesa 
chrome.pageAction.hide(
  tabId: number,
  callback?: function,
)

Oculta la acción de la página. Las acciones de páginas ocultas seguirán apareciendo en la barra de herramientas de Chrome, pero estarán inhabilitadas.

Parámetros

  • tabId

    número

    El ID de la pestaña para la que deseas modificar la acción de la página.

  • callback

    función opcional

    Chrome 67 y versiones posteriores

    El parámetro callback se ve de la siguiente manera: 

    () => void

Muestra

  • Promesa<void>

    Chrome 101 y versiones posteriores

    Las promesas solo son compatibles con Manifest V3 y versiones posteriores; otras plataformas deben usar devoluciones de llamada.

setIcon()

Promesa 
chrome.pageAction.setIcon(
  details: object,
  callback?: function,
)

Establece el ícono para la acción de la página. El ícono se puede especificar como la ruta de acceso a un archivo de imagen, como los datos de píxeles de un elemento de lienzo o como un diccionario de cualquiera de ellos. Se debe especificar la propiedad path o imageData.

Parámetros

  • detalles

    objeto

    • iconIndex

      número opcional

      Obsoleto. Se ignora este argumento.

    • imageData

      ImageData | objeto opcional

      Un objeto ImageData o un diccionario {size -> ImageData}, que representa el ícono que se debe establecer. Si el ícono se especifica como un diccionario, se elige la imagen real que se usará según la densidad de píxeles de la pantalla. Si la cantidad de píxeles de la imagen que entran en una unidad de espacio de pantalla es igual a scale, se seleccionará la imagen con el tamaño scale * n, en el que n es el tamaño del ícono en la IU. Se debe especificar al menos una imagen. Ten en cuenta que 'details.imageData = foo' equivale a 'details.imageData = {'16': foo}"

    • ruta de acceso

      string | objeto opcional

      una ruta de imagen relativa o un diccionario {size -> Relative image path} que apunta al ícono que se debe establecer. Si el ícono se especifica como un diccionario, se elige la imagen real que se usará según la densidad de píxeles de la pantalla. Si la cantidad de píxeles de la imagen que entran en una unidad de espacio de pantalla es igual a scale, se seleccionará la imagen con el tamaño scale * n, en el que n es el tamaño del ícono en la IU. Se debe especificar al menos una imagen. Ten en cuenta que 'details.path = foo' equivale a 'details.path = {'16': foo}'

    • tabId

      número

      El ID de la pestaña para la que deseas modificar la acción de la página.

  • callback

    función opcional

    El parámetro callback se ve de la siguiente manera: 

    () => void

Muestra

  • Promesa<void>

    Chrome 101 y versiones posteriores

    Las promesas solo son compatibles con Manifest V3 y versiones posteriores; otras plataformas deben usar devoluciones de llamada.

setPopup()

Promesa 
chrome.pageAction.setPopup(
  details: object,
  callback?: function,
)

Configura el documento HTML para que se abra como una ventana emergente cuando el usuario hace clic en el ícono de acción de la página.

Parámetros

  • detalles

    objeto

    • ventana emergente

      string

      La ruta de acceso relativa al archivo HTML que se mostrará en una ventana emergente. Si se configura en la cadena vacía (''), no se muestra ninguna ventana emergente.

    • tabId

      número

      El ID de la pestaña para la que deseas modificar la acción de la página.

  • callback

    función opcional

    Chrome 67 y versiones posteriores

    El parámetro callback se ve de la siguiente manera: 

    () => void

Muestra

  • Promesa<void>

    Chrome 101 y versiones posteriores

    Las promesas solo son compatibles con Manifest V3 y versiones posteriores; otras plataformas deben usar devoluciones de llamada.

setTitle()

Promesa 
chrome.pageAction.setTitle(
  details: object,
  callback?: function,
)

Establece el título de la acción de la página. Esto se muestra en un cuadro de información sobre la acción de la página.

Parámetros

  • detalles

    objeto

    • tabId

      número

      El ID de la pestaña para la que deseas modificar la acción de la página.

    • título

      string

      La cadena de información sobre la herramienta.

  • callback

    función opcional

    Chrome 67 y versiones posteriores

    El parámetro callback se ve de la siguiente manera: 

    () => void

Muestra

  • Promesa<void>

    Chrome 101 y versiones posteriores

    Las promesas solo son compatibles con Manifest V3 y versiones posteriores; otras plataformas deben usar devoluciones de llamada.

show()

Promesa 
chrome.pageAction.show(
  tabId: number,
  callback?: function,
)

Muestra la acción de la página. La acción de la página se muestra cada vez que se selecciona la pestaña.

Parámetros

  • tabId

    número

    El ID de la pestaña para la que deseas modificar la acción de la página.

  • callback

    función opcional

    Chrome 67 y versiones posteriores

    El parámetro callback se ve de la siguiente manera: 

    () => void

Muestra

  • Promesa<void>

    Chrome 101 y versiones posteriores

    Las promesas solo son compatibles con Manifest V3 y versiones posteriores; otras plataformas deben usar devoluciones de llamada.

Eventos

onClicked

chrome.pageAction.onClicked.addListener(
  callback: function,
)

Se activa cuando se hace clic en un ícono de acción de la página. Este evento no se activará si la acción de la página tiene una ventana emergente.

Parámetros

  • callback

    función

    El parámetro callback se ve de la siguiente manera: 

    (tab: tabs.Tab) => void