¿Cómo desarrollar un complemento del navegador Chrome?

Como navegador estándar para desarrolladores front-end, el navegador Chrome tiene funciones potentes y el complemento de Chrome es una de las herramientas más útiles. Como desarrollador front-end, desarrollar un excelente complemento de Chrome también es algo muy gratificante. ¡A continuación presentaré brevemente cómo desarrollarlo!

1. Un directorio de complemento de código QR simple, el archivo principal manifest.json, en lo sucesivo denominado archivo de lista, este archivo es obligatorio y el resto de html, js, css, img. , etc. se pueden crear según sea necesario.

2. Introducción a manifest.json

Los campos que deben configurarse y los campos de configuración de uso común

defalut_popup deben especificarse en el archivo html, y html es No permitido Inline js (inlinejavascript), el desarrollo de complementos es el mismo que el desarrollo web normal. Todo usando html, js, css. Además, la extensión también proporciona muchas API potentes para ayudarnos a enriquecer las funciones de extensión del navegador. 3. Las API de uso común chrome.tabschrome.runtime pueden monitorear y responder a eventos en el ciclo de vida de la extensión chrome.webRequest chrome.windowchrome.storage chrome.contextMenus chrome.devtoolschrome.devtoolschrome.runtime puede monitorear y responder a eventos en el ciclo de vida de la extensión . extensión

Dado que chromeAPI se usa en js, este ejemplo usa la mayor parte de la API para declarar permisos y configurar la pestaña en el campo de permiso.

Por supuesto, hay mucho más en la configuración del manifiesto que esto y, a medida que se vuelve más potente, verás más campos.

/extensions/manifest

4. Después de completar la escritura del código, abra la interfaz de extensión, chrome://extensions., seleccione el modo de desarrollador y haga clic en "Seleccionar extensión descomprimida". la carpeta desarrollada y la extensión se agregarán correctamente.

5. Depuración

En el ejemplo, la interfaz de la función de extensión se muestra en forma de ventana emergente. Haga clic en el icono y haga clic derecho para inspeccionar el elemento.

6. Empaquete y publique en Chrome App Store/webstore/developer/dashboard/haga clic para ingresar al centro de información del desarrollador para agregar el paquete comprimido, siga las instrucciones para agregar la información requerida y publíquelo.