primeros pasos
Manifest V3 se lanzará pronto! Consulte la documentación de MV3 para obtener más información y considere desarrollar su extensión en MV3.
Las extensiones están hechas de componentes diferentes, pero cohesivos. Los componentes pueden incluir scripts de fondo, scripts de contenido, una página de opciones, elementos de interfaz de usuario y varios archivos de lógica. Los componentes de extensión se crean con tecnologías de Desarrollo web: HTML, CSS y JavaScript. Los componentes de una extensión dependerán de su funcionalidad y es posible que no requieran todas las opciones.,
este tutorial construirá una extensión que permite al usuario cambiar el color de fondo de cualquier página en developer.chrome.com. utilizará muchos componentes básicos para dar una demostración introductoria de sus relaciones.
Para comenzar, cree un nuevo directorio para contener los archivos de extensión.
la extensión completa se puede descargar aquí.
crear el manifiesto #
Las Extensiones comienzan con su manifiesto. Cree un archivo llamado manifest.json e incluya el siguiente código, o descargue el archivo aquí.,
el directorio que contiene el archivo de manifiesto se puede agregar como una extensión en modo desarrollador en su estado actual.
- abra la página de administración de extensiones navegando hasta
chrome://extensions.- La Página de administración de extensiones también se puede abrir haciendo clic en el menú de Chrome, pasando el cursor sobre Más herramientas y luego seleccionando extensiones.
- habilite el modo de desarrollador haciendo clic en el conmutador situado junto al modo de desarrollador.
- haga clic en el botón Load UNPACKED y seleccione el directorio de extensión.
Ta-da!, La extensión se ha instalado correctamente. Debido a que no se incluyeron iconos en el Manifiesto, se creará un icono genérico de la barra de herramientas para la extensión.
Add instruction #
aunque la extensión ha sido instalada, no tiene instrucción. Introduzca un script de fondo creando un archivo titulado background.js, o descargándolo aquí, y colocándolo dentro del directorio de extensión.
Los scripts de fondo, y muchos otros componentes importantes, deben registrarse en el manifiesto., Registrar un script en segundo plano en el manifiesto le indica a la extensión A qué Archivo hacer referencia y cómo debe comportarse ese archivo.
la extensión ahora es consciente de que incluye un script de fondo no persistente y escaneará el archivo registrado en busca de eventos importantes que necesite escuchar.
esta extensión necesitará información de una variable persistente tan pronto como se instale. Comience por incluir un evento de escucha para runtime.onInstalled en el script de fondo. Dentro del oyente onInstalled, la extensión establecerá un valor mediante la API de almacenamiento., Esto permitirá que Múltiples componentes de extensión accedan a ese valor y lo actualicen.
La mayoría de las API, incluida la API de almacenamiento, deben registrarse en el campo "permissions" en el Manifiesto para que la extensión las use.
vuelva a la página de administración de extensiones y haga clic en el enlace recargar. Un nuevo campo, inspeccionar vistas, está disponible con un enlace azul, página de fondo.,
Haga clic en el enlace para ver el script de fondo»s console log, «The color is green.«
Introduce una interfaz de usuario #
Las extensiones pueden tener muchas formas de una interfaz de usuario, pero esta usará una ventana emergente. Cree y agregue un archivo titulado popup.html al directorio, o descárguelo aquí. Esta extensión utiliza un botón para cambiar el color de fondo.
al igual que el script de fondo, este archivo debe designarse como una ventana emergente en el manifiesto bajo page_action.,
La designación para los iconos de la barra de herramientas también se incluye en page_actionen el campo default_icons. Descargue la carpeta de imágenes aquí, descomprímala y colóquela en el directorio de la extensión. Actualice el Manifiesto para que la extensión sepa cómo usar las imágenes.las extensiones
también muestran imágenes en la página de administración de extensiones, la advertencia de permisos y el favicon. Estas imágenes están designadas en el manifiesto bajo icons.,
si la extensión se vuelve a cargar en esta etapa, incluirá un icono de escala de grises, pero no contendrá ninguna diferencia de funcionalidad. Debido a que page_action se declara en el manifiesto, corresponde a la extensión decirle al navegador cuando el usuario puede interactuar con popup.html.
agregue reglas declaradas al script en segundo plano con la APIdeclarativeContent dentro del evento de escucharuntime.onInstalled.
la extensión necesitará permiso para acceder a la API declarativeContent en su manifiesto.,
el navegador mostrará ahora un icono de acción de página a todo color en la barra de herramientas del navegador cuando los usuarios naveguen a una URL que contenga "developer.chrome.com". Cuando el icono está a todo color, los usuarios pueden hacer clic en él para ver la ventana emergente.HTML.
El último paso para la interfaz de usuario emergente es agregar color al botón. Cree y agregue un archivo llamado https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.js con el siguiente código al directorio de extensiones, o descargue aquí.
este código toma el botón de popup.html y solicita el valor de color del almacenamiento., Luego aplica el color como fondo del botón. Incluya una etiqueta de script en https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.js En popup.html.
vuelva a cargar la extensión para ver el botón verde.
layer logic #
la extensión ahora sabe que la ventana emergente debe estar disponible para los usuarios en developer.chrome.com y muestra un botón de color, pero necesita lógica para una mayor interacción del usuario. Actualización https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.js para incluir el siguiente código.,
el código actualizado agrega un evento onclick en el botón, que activa un script de contenido inyectado programáticamente. Esto convierte el color de fondo de la página en el mismo color que el botón. El uso de inyección programática permite scripts de contenido invocados por el usuario, en lugar de insertar automáticamente código no deseado en las páginas web.
el manifiesto necesitará el permiso activeTab para permitir el acceso temporal de la extensión A la API tabs. Esto permite que la extensión llame a tabs.executeScript.,
La extensión es ahora completamente funcional! Recargar la extensión, actualizar esta página, abrir la ventana emergente y haga clic en el botón para convertirlo en verde! Sin embargo, algunos usuarios pueden querer cambiar el fondo a un color diferente.
dar opciones a los usuarios #
la extensión actualmente solo permite a los usuarios cambiar el fondo a verde. Incluir una página de opciones le da a los usuarios más control sobre la funcionalidad de la extensión, personalizando aún más su experiencia de navegación.,
comience creando un archivo en el directorio llamado options.html e incluya el siguiente código, o descárguelo aquí.
luego registre la página de opciones en el manifiesto,
vuelva a cargar la extensión y haga clic en detalles.
desplácese hacia abajo en la página de detalles y seleccione Opciones de extensión para ver la página de opciones, aunque actualmente aparecerá en blanco.
El último paso es agregar la lógica de opciones., Cree un archivo llamado options.js en el directorio de extensiones con el siguiente código, o descárguelo aquí.
Se proporcionan cuatro opciones de color que se generan como botones en la página de opciones con los oyentes de eventos onclick. Cuando el usuario hace clic en un botón, actualiza el valor de color en el almacenamiento global de la extensión. Dado que todos los archivos de la extensión » S extraen la información de color del almacenamiento global, no es necesario actualizar otros valores.
¡Felicidades! El directorio ahora tiene una totalmente funcional, aunque simplista, extensión de Chrome.
¿Qué sigue?,
- El resumen de la extensión de Chrome hace una copia de seguridad un poco y completa muchos detalles sobre la arquitectura de las extensiones en general, y algunos conceptos específicos con los que los desarrolladores querrán estar familiarizados.
- conozca las opciones disponibles para depurar extensiones en el tutorial de depuración.
- Las extensiones de Chrome tienen acceso a potentes API más allá de lo que está disponible en la web abierta. Chrome.* La documentación de las API recorrerá cada API.
- La guía del desarrollador tiene docenas de enlaces adicionales a piezas de documentación relevantes para la creación avanzada de extensiones.,