chrome.browserAction

Descripción

Disponibilidad

En la siguiente figura, el cuadrado multicolor que se encuentra a la derecha de la barra de direcciones es el ícono de una acción del navegador. Aparece 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 la 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 completar el espacio de 16 dip. Sin embargo, si no se proporciona el tamaño exacto, este ajuste puede hacer que el ícono pierda detalles o se vea borroso.

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

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 sugerencia, 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. Los íconos más grandes se redimensionan para que queden bien, pero, para obtener 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. Usar imágenes estáticas es más fácil para aplicaciones simples, pero puedes crear IU más dinámicas, como animaciones fluidas, con el elemento canvas.

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 no empaquetadas, 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 correctamente el ícono cuando la densidad de píxeles de la pantalla (proporció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íxel de 16 dip. El conjunto de íconos puede contener especificaciones de íconos de cualquier tamaño, y Chrome seleccionará el más adecuado.

Información sobre la herramienta

Para establecer 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 la configuración regional para el campo default_title. Consulta Internacionalización para obtener más detalles.

Insignia

Las acciones del navegador pueden mostrar de forma opcional una insignia, que es un fragmento de texto superpuesto sobre el í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.

Dado 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 aparece cuando el usuario hace 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 más pequeña que 25 × 25 ni más grande que 800 × 600.

Para agregar una ventana emergente a la 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 tienen sentido en la mayoría de las páginas.
• No uses acciones del navegador para funciones que solo tienen sentido en unas pocas páginas. En su lugar, usa acciones de página.
• Usa íconos grandes y coloridos que aprovechen al máximo el espacio de 16 x 16 dip. Los íconos de acción del navegador deben parecer un poco más grandes y pesados que los íconos de acción de la página.
• No intentes imitar el ícono de menú monocromático de Google Chrome. Esto no funciona bien con los temas y, de todos modos, las extensiones deberían 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 tu ícono de forma constante. Eso es molesto.

Ejemplos

Puedes encontrar ejemplos sencillos 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 Samples.

chrome.browserAction.disable(
  tabId?: number,
  callback?: function,
): Promise<void>

chrome.browserAction.enable(
  tabId?: number,
  callback?: function,
): Promise<void>

chrome.browserAction.getBadgeBackgroundColor(
  details: TabDetails,
  callback?: function,
): Promise<extensionTypes.ColorArray>

chrome.browserAction.getBadgeText(
  details: TabDetails,
  callback?: function,
): Promise<string>

chrome.browserAction.getPopup(
  details: TabDetails,
  callback?: function,
): Promise<string>

chrome.browserAction.getTitle(
  details: TabDetails,
  callback?: function,
): Promise<string>

chrome.browserAction.setBadgeBackgroundColor(
  details: object,
  callback?: function,
): Promise<void>

chrome.browserAction.setBadgeText(
  details: object,
  callback?: function,
): Promise<void>

chrome.browserAction.setIcon(
  details: object,
  callback?: function,
): Promise<void>

chrome.browserAction.setPopup(
  details: object,
  callback?: function,
): Promise<void>

chrome.browserAction.setTitle(
  details: object,
  callback?: function,
): Promise<void>

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