Cómo crear una extensión de Chrome

Hice una extensión de Chrome este fin de semana porque descubrí que estaba haciendo la misma tarea una y otra vez y quería automatizarla. Además, soy un nerd que vive una pandemia, así que gasto mi energía reprimida construyendo cosas. He creado algunas extensiones de Chrome a lo largo de los años, espero que esta publicación también te ayude a comenzar. ¡Empecemos!

Crear el manifiesto

El primer paso es crear un manifest.jsonarchivo en una carpeta de proyecto. Esto tiene un propósito similar al de package.json, proporciona a Chrome Web Store información crítica sobre el proyecto, incluido el nombre, la versión, los permisos necesarios, etc. He aquí un ejemplo:

{ "manifest_version": 2, "name": "Sample Name", "version": "1.0.0", "description": "This is a sample description", "short_name": "Short Sample Name", "permissions": ["activeTab", "declarativeContent", "storage", "all_urls"], "content_scripts": [   {     "matches": ["all_urls"],     "css": ["background.css"],     "js": ["background.js"]   } ], "browser_action": {   "default_title": "Does a thing when you do a thing",   "default_popup": "popup.html",   "default_icon": {     "16": "icons/icon16.png",     "32": "icons/icon32.png"   } }}

Es posible que notes algunas cosas: primero: los nombres y las descripciones pueden ser los que desees.

Los permisos dependen de lo que deba hacer la extensión. Lo tenemos ["activeTab", "declarativeContent", "storage", "all_urls"]en este ejemplo porque esta extensión en particular necesita información sobre la pestaña activa, necesita cambiar el contenido de la página, necesita acceder localStoragey debe estar activa en todos los sitios. Si solo necesita que esté activo en un sitio a la vez, podemos eliminar el último índice de esa matriz.

Puede encontrar una lista de todos los permisos y su significado en los documentos de extensión de Chrome.

"content_scripts": [  {    "matches": ["all_urls"],    "css": ["background.css"],    "js": ["background.js"]  }],

La content_scriptssección establece los sitios donde la extensión debe estar activa. Si desea un solo sitio, como Twitter, por ejemplo, diría ["https://twitter.com/*"]. Los archivos CSS y JavaScript son todo lo necesario para las extensiones. Por ejemplo, mi productiva extensión de Twitter utiliza estos archivos para anular la apariencia predeterminada de Twitter.

"browser_action": {  "default_title": "Does a thing when you do a thing",  "default_popup": "popup.html",  "default_icon": {    "16": "icons/icon16.png",    "32": "icons/icon32.png"  }}

Hay cosas browser_actionque también son opcionales. Por ejemplo, si la extensión no necesita una ventana emergente para su funcionalidad, entonces se pueden eliminar tanto default_titlecomo . default_popupEn ese caso, todo lo que necesita es el icono de la extensión. Si la extensión solo funciona en algunos sitios, Chrome atenuará el ícono cuando esté inactivo.

Depuración

Una vez que los archivos de manifiesto, CSS y JavaScript estén listos, dirígete a chrome://extensions/la barra de direcciones del navegador y habilita el modo de desarrollador. Eso activa el botón “Cargar descomprimido” para agregar los archivos de extensión. También es posible alternar si la versión para desarrolladores de la extensión está activada o no.

Recomiendo encarecidamente iniciar un repositorio de GitHub para controlar la versión de los archivos en este momento. Es una buena manera de ahorrar el trabajo.

La extensión debe recargarse desde esta interfaz cuando se actualiza. Aparecerá un pequeño icono de actualización en la pantalla. Además, si la extensión tiene algún error durante el desarrollo, mostrará un botón de error con un seguimiento de la pila y más información aquí también.

Funcionalidad emergente

Si la extensión necesita utilizar una ventana emergente que sale del ícono de la extensión, afortunadamente es bastante sencillo. Después de designar el nombre del archivo browser_actionen el archivo de manifiesto, se puede crear una página con cualquier HTML y CSS que desee incluir, incluyendo imágenes (tiendo a usar SVG en línea).

Probablemente querremos agregar alguna funcionalidad a una ventana emergente. Eso requiere algo de JavaScript, así que asegúrese de que el archivo JavaScript esté designado en el archivo de manifiesto y también esté vinculado en su archivo emergente, de esta manera:script src="background.js"/script

En ese archivo, comenzaremos a crear funcionalidad y tendremos acceso al DOM emergente como este:

document.addEventListener("DOMContentLoaded", () = { var button = document.getElementById("submit") button.addEventListener("click", (e) = {   console.log(e) })})

Si creamos un botón en el popup.htmlarchivo, le asignamos una llamada ID submity luego devolvemos un registro de la consola, es posible que observe que en realidad no se registra nada en la consola. Esto se debe a que estamos en un contexto diferente, lo que significa que tendremos que hacer clic derecho en la ventana emergente y abrir un conjunto diferente de DevTools.

¡Ahora tenemos acceso al registro y la depuración! Sin embargo, tenga en cuenta que si se configura algo en localStorage, solo existirá en DevTools de la extensión localStorage; no el navegador del usuario localStorage. (¡Esto me mordió la primera vez que lo probé!)

Ejecutar scripts fuera de la extensión

Todo esto está muy bien, pero ¿digamos que queremos ejecutar un script que tenga acceso a la información de la pestaña actual? Aquí hay un par de maneras en que haríamos esto. Normalmente llamaría a una función separada desde dentro del DOMContentLoadeddetector de eventos:

Ejemplo 1: activar un archivo

function exampleFunction() { chrome.tabs.executeScript(() = {   chrome.tabs.executeScript({ file: "content.js" }) })}

Ejemplo 2: ejecutar solo un poco de código

Esta forma es excelente si solo hay un pequeño fragmento de código para ejecutar. Sin embargo, rápidamente se vuelve difícil trabajar con él, ya que requiere pasar todo como una cadena o un literal de plantilla.

function exampleFunction() { chrome.tabs.executeScript({   code: `console.log(‘hi there’)`  })}

Ejemplo 3: activar un archivo y pasar un parámetro

Recuerde, la extensión y la pestaña operan en contextos diferentes. Eso hace que pasar parámetros entre ellos sea una tarea no tan trivial. Lo que haremos aquí es anidar los dos primeros ejemplos para pasar un poco de código al segundo archivo. Almacenaré todo lo que necesito en una sola opción, pero tendremos que cadenar el objeto para que funcione correctamente.

function exampleFunction(options) { chrome.tabs.executeScript(   { code: "var options = " + JSON.stringify(options) },   function() {     chrome.tabs.executeScript({ file: "content.js" })   } )}

Iconos

Aunque el archivo de manifiesto solo define dos íconos, necesitamos dos más para enviar oficialmente la extensión a Chrome Web Store: uno que tiene 128 px cuadrados y otro que llamo icon128_proper.png, que también tiene 128 px, pero tiene un poco de relleno dentro entre los bordes. de la imagen y el icono.

Tenga en cuenta que cualquier ícono que se utilice debe verse bien tanto en el modo claro como en el modo oscuro del navegador. Normalmente encuentro mis íconos en Noun Project.

Envío a Chrome Web Store

¡Ahora podemos dirigirnos a la consola de desarrollador de Chrome Web Store para enviar la extensión! Haga clic en el botón “Nuevo elemento”, arrastre y suelte el archivo del proyecto comprimido en el cargador.

A partir de ahí, Chrome hará algunas preguntas sobre la extensión, solicitará información sobre los permisos solicitados en la extensión y por qué son necesarios. Advertencia justa: solicitar “activeTab”permisos “tabs”solicitará una revisión más prolongada para asegurarse de que el código no esté haciendo nada abusivo.

¡Eso es todo! ¡Esto debería permitirte configurarlo todo y ponerte en camino a crear una extensión del navegador Chrome!