Este es un catálogo de elementos de la interfaz de usuario disponibles en extensiones. Cada entrada contiene lo siguiente:
- Una imagen del elemento (si corresponde).
- Una descripción de para qué sirve.
- Elementos relacionados de la interfaz (si corresponde)
- Vínculos a las instrucciones de implementación y muestras de código.
Estos elementos son formas diferentes de invocar funciones de extensión. No es necesario que los implementes a todos. De hecho, es posible que algunos casos de uso no utilicen ninguno de ellos. Por ejemplo, un vínculo más corto podría actuar en la URL que se muestra usando una combinación de teclas y colocar el vínculo abreviado en el portapapeles de manera programática.
Acciones
Una acción es lo que sucede cuando un usuario hace clic en el ícono de acción de tu extensión. Una acción puede invocar una función de extensión con la API de Action o abrir una ventana emergente que permita a los usuarios invocar varias funciones de extensión. Utiliza el información sobre la herramienta para indicarles a los usuarios qué hace la acción.
Para obtener información sobre cómo crear una acción, consulta Cómo implementar una acción o examinar las muestras de acción.
Íconos de acción
Las extensiones requieren al menos un ícono para representarla. Los usuarios hacen clic en el ícono para invocar una acción, ya sea que esa acción invoque una función de extensión con la API de Action o abra una ventana emergente.
También puedes agregar una etiqueta, llamada "insignia", al ícono para comunicar, por ejemplo, el estado de la extensión o que el usuario requiere acciones.
Para obtener información sobre cómo crear una acción, consulta Cómo implementar una acción o examinar las muestras de acción.
Distintivos
Las insignias son fragmentos de texto con formato que se colocan sobre el ícono de acción para indicar información, como el estado de la extensión o que el usuario debe realizar acciones. Puedes establecer el texto de la insignia llamando a chrome.action.setBadgeText() y el color del banner llamando a chrome.action.setBadgeBackgroundColor().
Para obtener información sobre cómo crear una acción, consulta la muestra Cómo implementar una acción o la muestra Beber agua.
Comandos
Los comandos son combinaciones de teclas que invocan una función de la extensión. Define combinaciones de claves en el archivo manifest.json y responde a ellas con la API de Commands.
Para obtener información sobre cómo implementar un comando, consulta la referencia de la API o la muestra de chrome.commands.
Menú contextual
Aparece un menú contextual para el clic alternativo (conocido como clic con el botón derecho) del mouse. Define menús contextuales con la API de menús contextuales.
Para aprender a implementar un menú contextual, consulta los ejemplos de menús contextuales.
Omnibox
Puedes interactuar con los usuarios mediante la barra omni de Chrome. Cuando un usuario ingresa palabras clave definidas por extensión en el cuadro multifunción, tu extensión controla lo que el usuario ve en el cuadro multifunción. Define palabras clave en el archivo manifest.json y responde a ellas mediante la API del cuadro multifunción.
Para obtener información sobre cómo anular el cuadro multifunción, consulta el ejemplo Cómo activar acciones desde el cuadro multifunción o el ejemplo de referencia rápida de la API.
Anular páginas
Una extensión puede anular una de estas páginas de Chrome integradas:
- Historial
- Nueva pestaña
- Favoritos
Para obtener información sobre cómo anular las páginas de Chrome, consulta Cómo anular las páginas de Chrome o el ejemplo de anulación.
Ventanas emergentes
Una ventana emergente es una acción que muestra una ventana que permite a los usuarios invocar varias funciones de la extensión. Se pueden abrir las ventanas emergentes si el usuario hace clic en el ícono de acción, con una combinación de teclas o llamando a chrome.action.openPopup().
Para aprender a compilar una ventana emergente, consulta Cómo agregar una ventana emergente. También puedes descargar un paso mediante una de las muestras de acciones.
Paneles laterales
Un panel lateral permite a los usuarios invocar funciones de extensión junto a las páginas web (observa la imagen). Un panel lateral se puede adjuntar a una sola pestaña o a toda una ventana. Los paneles laterales se controlan con la API de Side Panel.
Para aprender a crear un panel lateral, consulta los casos de uso de paneles laterales o examina las muestras de paneles laterales.
Información sobre la herramienta
La información sobre la herramienta es una forma de mostrar lo que hace la acción de tu extensión cuando un usuario coloca el cursor del mouse sobre tu ícono de acción. De forma predeterminada, la información sobre la herramienta muestra el nombre de la extensión.
Para aprender a agregar información sobre la herramienta, usa el miembro "default_title" de la clave "action" de los archivos de manifiesto.
Herramientas para desarrolladores
Puedes agregar paneles personalizados (a lo que se denominan pestañas en DevTools) a DevTools con la API de DevTools Panels. Otras APIs de Herramientas para desarrolladores te permiten supervisar ventanas y tráfico de red. También puedes personalizar el panel de grabación de Herramientas para desarrolladores. El panel Lighthouse de Chrome DevTools comenzó como una extensión de DevTools.
Notificaciones
Publica mensajes en la bandeja del sistema de un usuario con la API de Notifications de extensiones o la API de Notifications de las plataformas web.
Para obtener información sobre cómo usar las notificaciones, consulta Cómo notificar a los usuarios.
Temas
Un tema es un tipo especial de extensión que cambia la apariencia del navegador. Los temas se empaquetan como extensiones normales, pero no contienen código JavaScript ni HTML.
Para aprender a crear un tema, consulta ¿Qué son los temas?.
Otras formas de interactuar con los usuarios
En esta sección, se describen otras formas en que tu extensión puede interactuar con los usuarios. Aunque no son estrictamente necesarios para una extensión básica, pueden ser partes importantes de tu extensión. Para muchos usuarios, algunas de estas funciones son absolutamente esenciales para usar la extensión.
Accesibilidad
Para muchos usuarios, la accesibilidad es literalmente la interfaz de usuario, y sus funciones a menudo pueden ser útiles para quienes no necesitan la accesibilidad como un medio principal para interactuar con tu extensión. Aprende lo básico de hacer que tu extensión sea accesible.
Internacionalización
Habla con los usuarios en su propio idioma. Obtén información para internacionalizar la interfaz.