Cómo implementar una extensión de Chrome

A todos nos gusta navegar por la web. Y a todos nos gusta que las cosas estén al alcance de la mano. ¿Por qué no crear algo que responda a estas dos verdades absolutas?

En este artículo, explicaré los componentes básicos de una extensión de Chrome. Después, solo tendrás que pensar en una buena idea como excusa para hacer una.

¿Por qué Chrome?

Chrome es, con mucho, el navegador web más popular. Algunas estimaciones llegan al 59% . Entonces, si desea llegar a la mayor cantidad de personas posible, desarrollar una extensión de Chrome es la mejor manera de hacerlo.

⚠️ Para poder publicar una extensión de Chrome, debe tener una cuenta de desarrollador que implica una tarifa de registro única de $ 5.

Cada extensión de Chrome debe tener estos componentes: el archivo de manifiesto , popup.html y popup.js y un script de fondo . Echemos un vistazo a ellos.

¿Qué constituye una extensión de Chrome?

El archivo manifiesto

¿Qué es un archivo de manifiesto? Es un archivo de texto en formato JSON (JavaScript Object Notation) que contiene ciertos detalles sobre la extensión que vas a desarrollar.

Google usa este archivo para adquirir detalles sobre su extensión cuando la publique. Hay campos obligatorios , recomendados y opcionales .

Necesario

{ "manifest_version": 2, "name": "My Chrome Extension", "version": "1.0", "default_locale": "en" }
  • manifest_version- Versión del formato del archivo de manifiesto. A partir de Chrome 18, la versión 1 está obsoleta
  • name- Puede tener hasta 45 caracteres. Se utiliza para mostrar el nombre de su extensión en los siguientes lugares: diálogo de instalación, interfaz de usuario de administración de extensiones, Chrome Web Store
  • version- Versión de su extensión de Chrome. Puede tener hasta cuatro dígitos separados por puntos (p. Ej., 1.0.0.0)
  • default_locale- Esta carpeta reside dentro de la _localscarpeta y contiene los literales de cadena predeterminados. La _localscarpeta se utiliza para la internacionalización (lo que permite que su extensión admita varios idiomas). Es un campo obligatorio si _localsexiste una carpeta; de lo contrario, no debería estar presente

Si desea admitir varios idiomas, lea más aquí.

Recomendado

 "description": "A plain text description", "author": "Your Name Here", "short_name": "shortName", "icons": { "128":"icon128.png", "48":"icon48.png", "16":"icon16.png" },
  • description - Puede utilizar hasta 132 caracteres para describir la extensión
  • short_name - Limitado a 12 caracteres, se usa en los casos en que no hay suficiente espacio para mostrar el nombre completo de la extensión (Iniciador de aplicación y Página Nueva pestaña)
  • icons- Los iconos que representan la extensión. Incluya siempre un icono de 128X128 porque lo utiliza Chrome Web Store y durante la instalación de su extensión

Los campos opcionales son específicos de cada caso, por lo que no los analizaremos en este artículo.

Después de cubrir los datos necesarios para el archivo de manifiesto, ahora podemos pasar al lugar donde realmente escribiremos código para nuestra extensión, Popup y Background .

Ventana emergente y fondo

La ventana emergente se refiere a la página principal que ven los usuarios cuando usan su extensión. Consta de dos archivos: Popup.html y un archivo JavaScript, Popup.js .

Popup.html es el archivo de diseño de cómo se verá su extensión. Dependiendo de lo que haga su extensión, el marcado de este archivo cambiará.

Un script en segundo plano es el único que puede interactuar con los eventos que ocurren y usar la API de Chrome. Para utilizar secuencias de comandos en segundo plano, debe agregar lo siguiente a su archivo manifest.json:

{ "manifest_version": 2, "name": "My Chrome Extension", "version": "1.0", "background":{ "scripts": ["yourScript.js"], "persistent": false } }

La clave scriptstiene el valor de una matriz de nombres de secuencias de comandos.

persistentes una clave con un valor booleano que denota el uso de su extensión con la API chrome.webRequest para bloquear o modificar solicitudes de red. La API Chrome.webRequest no funciona con páginas de fondo no persistentes.

Cómo se abrirá su extensión

Cada extensión de Chrome agrega un pequeño ícono a la barra de herramientas en la parte superior de su navegador. Una vez que el usuario hace clic en ese icono, puede elegir cómo desea que se abra su extensión en el navegador:

  1. Puede anular una nueva pestaña para no interrumpir la actividad del usuario actual

2. Puede abrir una pequeña ventana en la pestaña actual del usuario, para mantener al usuario en la misma pestaña

Cada elección tiene sus consecuencias y depende de usted decidir cuál es la mejor opción para usted.

A continuación se muestra el código necesario para llevar a cabo cada una de las opciones. Ambos usarán el mismo archivo popup.html que se describe a continuación:

  Chrome Extension Example   

Hello From Extension

Poniendolo todo junto

Anular nueva pestaña

//In manifest.json { "name": "ChromeExampleNewTab", "version": "1.0", "manifest_version": 2, "chrome_url_overrides": { "newtab": "popup.html" }, "browser_action": {}, "permissions":[ "tabs" ], "background":{ "scripts": ["background.js"], "persistent": false } } //In background.js chrome.browserAction.onClicked.addListener(function(tab) { chrome.tabs.create({'url': chrome.extension.getURL('popup.html')}, function(tab) { // Tab opened. }); });

Abrir en la pestaña actual

//In manifest.js { "name": "ChromeExample", "version": "1.0", "manifest_version": 2, "browser_action": { "default_popup": "popup.html" } }

Observe cómo hemos anulado la browser_actionclave en ambos ejemplos.

Tenemos que hacer esto, ya que no queremos que el navegador abra una nueva pestaña de la manera habitual.

Además, dado que si queremos abrir una nueva pestaña con nuestra extensión, debemos agregar una clave de permisos al manifiesto y especificar el valor de las pestañas. Esto le permite al navegador saber que necesitamos el permiso del usuario para sobrescribir el comportamiento predeterminado de abrir una nueva pestaña.

Hay mucho más en las extensiones de Chrome (mensajería, menús contextuales y almacenamiento, por nombrar algunos). Espero haberle dado una idea de las extensiones de Chrome. ¡Quizás lo suficiente como para intrigarte y hacer uno propio!

Y mientras lo hace, marque uno que hice aquí.