chrome.browserAction

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

Descripción

Disponibilidad

En la siguiente imagen, el cuadrado multicolor a la derecha de la barra de direcciones es el ícono de una acción del navegador. Aparecerá una ventana emergente debajo del ícono.

Si quieres crear un ícono que no esté siempre activo, usa una acción de página en lugar de una acción del navegador.

Manifiesto

Registra tu acción del navegador en el manifiesto de la extensión de la siguiente manera:

{
  "name": "My extension",
  ...
  "browser_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
  },
  ...
}

Puedes proporcionar un ícono de cualquier tamaño para usarlo en Chrome, y Chrome seleccionará el más cercano y lo ajustará al tamaño adecuado para llenar el espacio de 16 dip. Sin embargo, si no se proporciona el tamaño exacto, esta escala puede hacer que el ícono pierda detalles o se vea desenfocado.

Dado que los dispositivos con factores de escala menos comunes, como 1.5x o 1.2x, se están volviendo más comunes, te recomendamos que proporciones varios tamaños para tus íconos. Esto también garantiza que, si alguna vez cambia el tamaño de visualización del ícono, no tengas que hacer más trabajo para proporcionar íconos diferentes.

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

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

Partes de la IU

Una acción del navegador puede tener un ícono, una ventana emergente con información sobre la herramienta, una insignia y una ventana emergente.

Ícono

Los íconos de acción del navegador en Chrome tienen 16 dips (píxeles independientes del dispositivo) de ancho y alto. El tamaño de los íconos más grandes se ajusta para que se ajusten, pero para obtener los mejores resultados, usa un ícono cuadrado de 16 dip.

Puedes configurar el ícono de dos maneras: con una imagen estática o con el elemento canvas de HTML5. El uso de imágenes estáticas es más fácil para aplicaciones simples, pero puedes crear IUs más dinámicas, como una animación fluida, con el elemento lienzo.

Las imágenes estáticas pueden estar en cualquier formato que WebKit pueda mostrar, incluidos BMP, GIF, ICO, JPEG o PNG. En el caso de las extensiones descomprimidas, las imágenes deben estar en formato PNG.

Para establecer el ícono, usa el campo default_icon de browser_action en el manifiesto o llama al método browserAction.setIcon.

Para mostrar el ícono correctamente cuando la densidad de píxeles de la pantalla (relación size_in_pixel / size_in_dip) es diferente de 1, el ícono se puede definir como un conjunto de imágenes con diferentes tamaños. La imagen real que se mostrará se seleccionará del conjunto para que se ajuste mejor al tamaño de píxeles de 16 dip. El conjunto de íconos puede contener cualquier especificación de ícono de tamaño, y Chrome seleccionará el más apropiado.

Información sobre la herramienta

Para configurar la información sobre herramientas, usa el campo default_title de browser_action en el manifiesto o llama al método browserAction.setTitle. Puedes especificar cadenas específicas de configuración regional para el campo default_title. Para obtener más información, consulta Internacionalización.

Insignia

De manera opcional, las acciones del navegador pueden mostrar una insignia, un texto que se superpone al ícono. Las insignias facilitan la actualización de la acción del navegador para mostrar una pequeña cantidad de información sobre el estado de la extensión.

Debido a que la insignia tiene espacio limitado, debe tener 4 caracteres o menos.

Establece el texto y el color de la insignia con browserAction.setBadgeText y browserAction.setBadgeBackgroundColor, respectivamente.

Ventana emergente

Si una acción del navegador tiene una ventana emergente, esta aparecerá cuando el usuario haga clic en el ícono de la extensión. La ventana emergente puede contener cualquier contenido HTML que desees y se ajusta automáticamente para adaptarse a su contenido. La ventana emergente no puede ser inferior a 25 × 25 ni superior a 800 × 600.

Para agregar una ventana emergente a tu acción del navegador, crea un archivo HTML con el contenido de la ventana emergente. Especifica el archivo HTML en el campo default_popup de browser_action en el manifiesto o llama al método browserAction.setPopup.

Sugerencias

Para obtener el mejor impacto visual, sigue estos lineamientos:

• Usa acciones del navegador para las funciones que tengan sentido en la mayoría de las páginas.
• No uses acciones del navegador para funciones que solo tengan sentido en algunas páginas. En su lugar, usa las acciones de página.
• Usa íconos grandes y coloridos que aprovechen al máximo el espacio de 16 × 16 dip. Los íconos de acciones del navegador deben parecer un poco más grandes y pesados que los íconos de acciones de página.
• No intentes imitar el ícono de menú monocromático de Google Chrome. Eso no funciona bien con los temas y, de todos modos, las extensiones deben destacarse un poco.
• Usa la transparencia alfa para agregar bordes suaves a tu ícono. Dado que muchas personas usan temas, tu ícono debe verse bien en una variedad de colores de fondo.
• No animes el ícono de forma constante. Eso es muy molesto.

Ejemplos

Puedes encontrar ejemplos simples del uso de acciones del navegador en el directorio examples/api/browserAction. Para ver otros ejemplos y obtener ayuda para ver el código fuente, consulta Muestras.

chrome.browserAction.disable(
  tabId?: number,
  callback?: function,
)

chrome.browserAction.enable(
  tabId?: number,
  callback?: function,
)

chrome.browserAction.getBadgeBackgroundColor(
  details: TabDetails,
  callback?: function,
)

chrome.browserAction.getBadgeText(
  details: TabDetails,
  callback?: function,
)

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

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

chrome.browserAction.setBadgeBackgroundColor(
  details: object,
  callback?: function,
)

chrome.browserAction.setBadgeText(
  details: object,
  callback?: function,
)

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

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

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

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