Cómo hacer una extensión para varios navegadores utilizando JavaScript y API de navegador

Este tutorial cubrirá cómo crear una extensión web que funcione en varios navegadores. Le mostrará cómo estructurar un proyecto y escribir código JavaScript para interactuar con las pestañas del navegador, según el navegador que se esté utilizando. Esto significa que puede codificar y luego distribuir un paquete de extensión a las tiendas web de varios navegadores.

Esta publicación se centrará en los navegadores Chrome y Firefox, junto con la distribución de extensiones a través de los sitios web de Chrome Web Store y complementos de Firefox. También hay disponibles otros navegadores y opciones de distribución para las extensiones web.

Comience con una plantilla: ¡copie, edite y publique!

Para ver un ejemplo completo, aquí hay un enlace a una extensión que hice llamada Link Formatter, con el JavaScript de varios navegadores dentro de popup.js. El mismo paquete aparece en las tiendas web de Chrome y Firefox.

Extensiones de navegador

Las extensiones son una forma fantástica de ampliar la funcionalidad de su navegador y le permiten mejorar su experiencia en línea. Si está construyendo el primero o desea obtener más información sobre ellos, le recomiendo los siguientes tutoriales:

  • Extensiones de navegador - Mozilla | MDN
  • ¿Qué son las extensiones? - Google Chrome
  • Anatomía de una extensión - Mozilla | MDN

Cargue su extensión localmente en su computadora

Al desarrollar su extensión, puede cargarla localmente sin tener que publicarla y descargarla desde un sitio web externo. La forma en que lo hace depende del navegador que esté utilizando.

Cromo

  • Visita chrome://extensions/en tu navegador Chrome
  • Hacer clic Load Unpacked
  • Seleccione la carpeta de la extensión

Firefox

  • Visitar about:debugging
  • Haga clic en Load Temporary Add-on
  • Seleccione manifest.jsondentro de la carpeta de la extensión

Consejo de depuración : para ver la consola (por ejemplo, para ver errores), haga clic derecho / control haga clic en el icono de extensión web o en la ventana emergente y seleccioneinspect

Escribir JavaScript para la extensión de su navegador

Hay muchas API de JavaScript que se pueden utilizar en la extensión de su navegador. Esta publicación se centrará en la API de pestañas.

Para obtener más información sobre las API de extensión web, consulte API de JavaScript - Mozilla | MDN.

Una extensión del navegador que incluye una página HTML emergente cuando el usuario hace clic en el icono en la barra de herramientas del navegador podría tener una estructura de proyecto como esta:

extension├── css│ └── style.css├── js│ └── popup.js├── manifest.json└── popup.html

La popup.htmlpágina luego ejecutaría el js/popup.jsscript en la parte inferior de la página. Agregaría su JavaScript aquí.

Nota : otras estructuras de proyectos podrían tener una carpeta para el código de la biblioteca, así como archivos JavaScript que se ejecutan en otras áreas de la extensión. Por ejemplo, en las secuencias de comandos de fondo de la extensión y en cualquier otro documento incluido con la extensión, incluidas las acciones del navegador o las ventanas emergentes de acción de la página, las barras laterales, las páginas de opciones o las páginas de nuevas pestañas.

API de la pestaña del navegador

Al escribir una extensión web, debe utilizar la API de pestañas para interactuar con las pestañas en el navegador. También debe solicitar permiso al usuario para hacer esto.

Solicitar permisos para acceder a pestañas

Los permisos deben establecerse manifest.json. Cuando un usuario intenta instalar la extensión, le pedirá que confirme que esta acción está permitida.

"permissions": [ "tabs" ]

Consultar pestañas con la API del navegador

Los navegadores, como Firefox, utilizan la browser.tabsAPI para interactuar con las pestañas del navegador. Para solicitar información sobre las pestañas de la ventana, usa el querymétodo, que devuelve una promesa con una matriz de pestañas.

browser.tabs.query( queryInfo // object)

Lea más sobre browser.tabs.query en tabs.query () - Mozilla | MDN

Para solicitar la pestaña activa para la ventana del navegador, debe escribir el siguiente JavaScript:

browser.tabs.query({active: true, currentWindow: true}) .then(logCurrentTabData)

Para obtener la pestaña actual, recupera la primera pestaña de la matriz de pestañas devuelta. Siguiendo esta estructura, puede obtener los datos desde la pestaña del navegador.

const logCurrentTabData = (tabs) => { currentTab = tabs[0] console.log(currentTab.title); console.log(currentTab.url);}

Sin embargo, cuando intentas abrir la extensión en Chrome…

Consultar pestañas con la API de Chrome

Chrome tiene su propia API para consultas de pestañas. Esto sigue la sintaxis chrome.tabs→ su consulta

chrome.tabs.query(object queryInfo, function callback)

Lea más sobre la API de pestañas de Chrome aquí: chrome.tabs - Google Chrome.

So to use this method call, you would write the following in your browser extension:

chrome.tabs.query( {active: true, currentWindow: true}, (arrayOfTabs) => { logCurrentTabData(arrayOfTabs) });

Combining tab queries

Detect which API to use

You can then include both types of browser queries in your extension by using a conditional statement to determine which one to use.

if(chrome) { chrome.tabs.query( {active: true, currentWindow: true}, (arrayOfTabs) => { logCurrentTabData(arrayOfTabs) } );} else { browser.tabs.query({active: true, currentWindow: true}) .then(logCurrentTabData)}

Adding more code for each browser type

Within each side of the condition, you can then add other pieces of code that depend on the different APIs, for example to create new tabs.

chrome.tabs.create()browser.tabs.create()

Here is the code with the extra methods added in that opens a link in a new tab.

if(chrome) { chrome.tabs.query( {active: true, currentWindow: true}, (arrayOfTabs) => { logCurrentTabData(arrayOfTabs) } ); $('a').click( (event) => { chrome.tabs.create({url:event.target.href}) } )} else { browser.tabs.query({active: true, currentWindow: true}) .then(logCurrentTabData) $('a').click( (event) => { browser.tabs.create({url:event.target.href}) } )}

Publishing your extension

With this code in place, you can now interact with the current browser without having to write two or more different web extension projects. You can now package your extension and publish to multiple web stores with the same file!

  • Publish in the Chrome Web Store — Google Chrome
  • Developer Hub :: Add-ons for Firefox

Read more from Medium

  • How to link to a specific paragraph in your Medium article (2018 Table of Contents method) by Quincy Larson in freeCodeCamp
  • Improving the Medium Experience: One browser extension at a time by in cedric amaya in freeCodeCamp

Read more from ryanwhocodes

  • How you can make a progressive web app in an hour
  • Mind your programming language: How to use Github Linguist and gitattributes to detect your app’s code type accurately
  • Make your terminal more colourful and productive with iTerm2 and Zsh!