Interfaz de usuario

Las extensiones que usan las API de WebExtension se proporcionan con varias opciones de interfaz de usuario para que su funcionalidad pueda estar disponible para el usuario. A continuación se proporciona un resumen de esas opciones, con una introducción más detallada a cada opción de la interfaz de usuario en esta sección.

Nota: Para obtener consejos sobre el uso de estos componentes de la interfaz de usuario para crear una excelente experiencia de usuario en su extensión, consulte el artículo Prácticas recomendadas para la experiencia del usuario.

Opción de interfaz de usuario Descripción Ejemplo
Botón de la barra de herramientas (acción del navegador) Un botón en la barra de herramientas del navegador que envía un evento a la extensión cuando se hace clic. De forma predeterminada, el botón está visible en todas las pestañas. Ejemplo que muestra un botón de la barra de herramientas (acción del navegador).
Botón de la barra de herramientas con una ventana emergente (en-US) Una ventana emergente en un botón en la barra de herramientas del navegador que se abre cuando se hace clic en el botón. La ventana emergente se define en un documento HTML que maneja la interacción del usuario. Ejemplo de la ventana emergente en un botón de la barra de herramientas
Botón de la barra de direcciones (acción de la página) Un botón en la barra de direcciones del navegador que envía un evento a la extensión cuando se hace clic. De forma predeterminada, el botón está oculto en todas las pestañas. Ejemplo que muestra un botón de la barra de direcciones (acción de página)
Botón de la barra de direcciones con una ventana emergente (en-US) Una ventana emergente en un botón en la barra de direcciones del navegador que se abre cuando se hace clic en el botón. La ventana emergente se define en un documento HTML que maneja la interacción del usuario. Ejemplo de una ventana emergente en el botón de la barra de direcciones
Elemento del menú contextual (en-US) Elementos de menú, casillas de verificación y botones de radio en uno o más de los menús contextuales del navegador. Además, los menús se pueden estructurar agregando separadores. Cuando se hace clic en los elementos del menú, se envía un evento a la extensión. Ejemplo de elementos de menú de contenido agregados por una WebExtension, del ejemplo de demostración de menú contextual
Barra lateral (en-US)

Un documento HTML que se muestra junto a una página web, con la opción de contenido único por página. La barra lateral se abre cuando se instala la extensión, luego obedece a la selección de visibilidad de la barra lateral del usuario. La interacción del usuario dentro de la barra lateral es manejada por su documento HTML.

Ejemplo de una barra lateral
Página de opciones (en-US) Una página que le permite definir preferencias para su extensión que sus usuarios pueden cambiar. El usuario puede acceder a esta página desde el administrador de complementos del navegador. Ejemplo que muestra el contenido de la página de opciones agregado en el ejemplo de colores favoritos.
Página de extensión (en-US) Use las páginas web incluidas en su extensión para proporcionar formularios, ayuda o cualquier otro contenido requerido, dentro de ventanas o pestañas. Ejemplo de una página empaquetada simple que se muestra como un panel independiente.
Notificación (en-US) Notificaciones transitorias que se muestran al usuario a través del mecanismo de notificaciones del sistema operativo subyacente. Envía un evento a la extensión cuando el usuario hace clic en una notificación o cuando se cierra una notificación (ya sea automáticamente o a pedido del usuario). Ejemplo de una notificación del sistema activada por extensión
Sugerencia de barra de direcciones (en-US) Ofrezca sugerencias personalizadas en la barra de direcciones cuando el usuario ingrese una palabra clave. Ejemplo que muestra el resultado de la personalización de firefox_code_search WebExtension de las sugerencias de la barra de direcciones.
Panel de herramientas para desarrolladores (en-US) Una pestaña con un documento HTML asociado que se muestra en las herramientas de desarrollo del navegador. Ejemplo que muestra el resultado de la personalización de firefox_code_search WebExtension de las sugerencias de la barra de direcciones.

Las siguientes guías prácticas brindan orientación paso a paso para crear algunas de estas opciones de interfaz de usuario: