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 de la interfaz relacionados (si corresponde)
- Vínculos a las instrucciones de implementación y muestras de código.
Estos elementos son diferentes maneras de invocar funciones de extensión. No es necesario que los implementes todos. De hecho, es posible que no se use ninguno de ellos en algunos casos de uso. Por ejemplo, un vínculo más corto podría actuar en la URL que se muestra usando una combinación de teclas para acceso directo 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 les permita a los usuarios invocar varias funciones de extensión. Indícales a los usuarios qué hace la acción mediante una información sobre la herramienta.
Para obtener información sobre cómo compilar una acción, consulta Cómo implementar una acción o revisa los ejemplos de acciones.
Íconos de acción
Una extensión requiere 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, que aquí se denomina "insignia", al ícono para comunicar aspectos como el estado de la extensión o las acciones que debe realizar el usuario.
Para obtener información sobre cómo compilar una acción, consulta Cómo implementar una acción o revisa los ejemplos de acciones.
Insignias
Las insignias son fragmentos de texto con formato que se colocan sobre el ícono de acción para indicar, por ejemplo, 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 Cómo implementar una acción o el ejemplo Beber agua.
Comandos
Los comandos son combinaciones de teclas que invocan una función de extensión. Define combinaciones de teclas en el archivo manifest.json y respóndelas con la API de Commands.
Para aprender a implementar un comando, consulta la referencia de la API o el ejemplo de chrome.commands.
Menú contextual
Aparece un menú contextual para el clic alternativo (con frecuencia, el clic con el botón derecho) del mouse. Define menús contextuales con la API de Context Menus.
Para aprender a implementar un menú contextual, consulta las muestras del menú contextual.
Cuadro multifunción
Puedes usar el cuadro multifunción de Chrome para interactuar con los usuarios. Cuando un usuario ingresa palabras clave definidas por la extensión en el cuadro multifunción, tu extensión controla lo que el usuario ve en él. Define las palabras clave en el archivo manifest.json y respóndelas con la API del cuadro multifunción.
Si deseas obtener información para anular el cuadro multifunción, consulta 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 páginas de Chrome, consulta los artículos sobre anulación de 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 extensión. Las ventanas emergentes solo se pueden abrir si el usuario hace clic en el ícono de acción. Una extensión no puede abrir su ventana emergente de manera programática.
Para aprender a crear una ventana emergente, consulta Cómo agregar una ventana emergente. También puedes descargar un paso a través de una de las muestras de acciones.
Paneles laterales
Un panel lateral permite a los usuarios invocar funciones de extensión junto a páginas web (consulta la imagen). Un panel lateral se puede adjuntar a una sola pestaña o a una ventana completa. Un panel lateral se controla con la API de Side Panel.
Para aprender a compilar un panel lateral, consulta los casos de uso del panel lateral o examina las muestras de paneles laterales.
Cuadros de información
La información sobre la herramienta es una forma de mostrar, cuando un usuario coloca el cursor del mouse sobre tu ícono de acción, lo que hace la acción de tu extensió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.
DevTools
Puedes agregar paneles personalizados (las pestañas que se llaman en Herramientas para desarrolladores) a Herramientas para desarrolladores con la API de paneles de Herramientas de desarrolladores. Otras APIs de Herramientas para desarrolladores te permiten supervisar ventanas y tráfico de red. También puedes personalizar el panel de la grabadora de Herramientas para desarrolladores. El propio panel de Lighthouse de las Herramientas para desarrolladores de Chrome comenzó su vida como una extensión de Herramientas para desarrolladores.
Notificaciones
Publica mensajes en la bandeja del sistema del 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 obtener información sobre cómo crear un tema, consulta ¿Qué son los temas?
Otras formas de interactuar con los usuarios
En esta sección, se describen otras formas en las 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 aquellos que no necesitan la accesibilidad como medio principal para interactuar con tu extensión. Aprende los conceptos básicos para hacer que tu extensión sea accesible.
Internacionalización
Habla con los usuarios en su propio idioma. Obtén más información para internacionalizar la interfaz.