Crear una extensión de navegador personalizada te permite ampliar la funcionalidad de tu navegador, mejorar la productividad o resolver un problema recurrente con un solo clic. Con la creciente compatibilidad con estándares comunes, desarrollar una única extensión compatible con múltiples navegadores se ha convertido en un objetivo realista tanto para principiantes como para profesionales.
El éxito de una extensión depende de comprender su estructura de archivos, su mecanismo de permisos y cómo interactuar con las páginas web de forma segura y eficiente. Al seguir las prácticas estándar, se pueden minimizar las modificaciones necesarias por navegador y acelerar el proceso de implementación.
Esta guía proporciona pasos claros para crear una extensión de navegador compatible con Chrome, Firefox y otros, centrándose en las mejores prácticas que garantizan el rendimiento a largo plazo, la estabilidad y la facilidad de mantenimiento.
Gracias a la iniciativa WebExtensions y a las tecnologías web fundamentales, desarrollar extensiones compatibles con varios navegadores se ha vuelto fácil. Con un formato estandarizado, se pueden crear extensiones que funcionen en cualquier lugar, sin necesidad de usar navegadores específicos.
Aprenda a programar y probar su primer complemento para realizar ediciones personalizadas en cualquier página web.
¿Qué son los complementos web?
Los plugins web son extensiones compatibles con diversos navegadores que utilizan interfaces de programación de aplicaciones (API) para mejorar la funcionalidad predeterminada de los navegadores. Se distribuyen como código fuente y utilizan un conjunto de tecnologías web fundamentales: HTML, CSS y JavaScript.
Aunque las extensiones existen desde hace casi 30 años, los navegadores tradicionalmente han utilizado diferentes métodos para ofrecerlas. Esto significaba que una extensión de Chrome no era compatible con Firefox, y viceversa. Gracias a los esfuerzos de estandarización y a la unificación de muchos navegadores en torno al motor Chromium, esto se ha vuelto menos problemático. Desde 2021, la iniciativa WebExtensions busca regular formalmente este ecosistema. Idealmente, esto permitiría a los desarrolladores crear una extensión una sola vez y ponerla a disposición de todos los navegadores.
Sigue leyendo para aprender a desarrollar extensiones modernas compatibles con todos los navegadores utilizando la plataforma web. ¡Es más fácil de lo que crees!
Nota: Aunque las WebExtensions están diseñadas para ser independientes del navegador, Firefox es el navegador más fácil de desarrollar para ellas, ya que permite cargar la extensión temporalmente. En cambio, Safari requiere una suscripción de desarrollador de pago.
Escritura de un archivo de manifiesto: Todo complemento solo necesita un archivo de manifiesto que describa su estructura general. Aquí tienes un ejemplo:
{
"manifest_version": 3,
"name": "my first extension",
"version": "1.0",
"icons": {
"16": "app/images/icon16.png",
"48": "app/images/icon48.png",
"128": "app/images/icon128.png"
},
"permissions": [
"webNavigation",
"storage"
],
}
ملاحظة
Este archivo está en formato JSON, lo que significa que puedes usar cualquiera de las herramientas disponibles para editarlo o visualizarlo.
Solo se requieren tres claves: nombre, versión y manifest_version. Las claves de nombre y versión son específicas de tu aplicación y sus valores reales no son cruciales para esta explicación. Sin embargo, Chrome no cargará tu extensión si la versión no es válida, así que asegúrate de que sea un número entero separado por puntos del 1 al 4, como "0" o "0.0.1".
manifest_version es un punto un poco delicado: mientras que otros navegadores pueden soportar las versiones 1 y 2, Chrome se negará a cargar cualquier extensión a menos que uses la versión 3. Usar esta versión reduce tu control, pero si quieres que Chrome sea compatible, debes usarla.
Además, el archivo de manifiesto puede usar otras claves para describir la naturaleza de tu complemento. Estas incluyen autor, descripción e iconos, que pueden ser útiles para promocionarlo en la tienda. La tecla de comando permite definir atajos de teclado.
La clave content_scripts es una de las claves de manifiesto más importantes, ya que permite que su complemento cargue archivos JavaScript o CSS y los aplique a la página web.
"content_scripts": [{
"matches": ["https://en.wikipedia.org/wiki/*"],
"js": ["script.js"],
"css": ["style.css"]
}]
Cada elemento del archivo content_scripts debe contener una clave de coincidencias, que especifica las URL en las que se ejecuta la extensión. Las claves `js` y `css` permiten listar los scripts u hojas de estilo que la extensión debe cargar al mostrar una página coincidente.
Escribiendo el código de extensión
Este sencillo ejemplo simula TampermonkeyTampermonkey es una extensión popular que te permite personalizar páginas web. Con ella, puedes hacer cosas como corregir tu feed de Reddit para evitar mostrar el mejor contenido.
Con un archivo de manifiesto y un poco de JavaScript, puedes escribir fácilmente una extensión web sencilla. Este ejemplo cambiará tu forma de ver las páginas de Wikipedia, pero las posibilidades son infinitas; todo lo que puedes hacer con una página web es posible.
{
"manifest_version": 3,
"name": "tweakipedia",
"description": "Tweak Wikipedia pages to our liking",
"version": "1.0",
"content_scripts": [{
"matches": ["https://en.wikipedia.org/wiki/*"],
"js": ["tweakipedia.js"],
"css": ["tweakipedia.css"]
}]
}
Comenzaré de forma sencilla, usando código CSS para modificar algunas cosas según mis preferencias. Por ejemplo, no me gusta el aviso "Se necesitan más referencias"; distrae al lector promedio. Así que lo ocultaré especificando la categoría del elemento y estableciendo su propiedad de visualización en "ninguna".
.box-More_citations_needed { display: none; }
Si no te sientes dispuesto a hacer el bien, también puedes ocultar el anuncio de recaudación de fondos:
.cn-fundraising { display: none; }
Después de eso, encuentro que los marcadores de notas al pie distraen un poco, así que reduciré ligeramente su importancia ajustando su color:
sup a { color: rgb(51, 102, 204, 0.5); }
Tenga en cuenta que este es el color predeterminado con un canal alfa del 50 %, lo que significa que es casi transparente. Esto ayuda a reducir la visibilidad de estas marcas.
Analizando este concepto más a fondo, me gustaría ocultar (o modificar) otros elementos, pero solo cuando sea necesario, con la posibilidad de deshacer los cambios fácilmente. Esto requiere un poco de JavaScript, ¡pero es muy sencillo!
toggle_on_key("Escape", "sup a,.mw-editsection,.vector-page-toolbar");
function toggle_on_key(key, sels) {
document.addEventListener("keydown", function (ev) {
if (ev.key === key) {
document.querySelectorAll(sels).forEach(function (node) {
node.style.display = node.style.display === "none" ? "" : "none";
});
}
});
}
He creado una práctica función para ocultar o mostrar elementos específicos al pulsar una tecla. El controlador de eventos simplemente busca una tecla coincidente, encuentra todos los elementos que coinciden con un selector y los oculta o muestra según su estado visual. Esto utiliza la misma propiedad CSS (display) que la hoja de estilos, pero usa JavaScript para implementarla dinámicamente.
Instalar y utilizar la extensión
Una vez que todo esté listo, es hora de instalar la extensión y probarla.
En Firefox, ve a "about:debugging", selecciona "Este Firefox" en la barra lateral y haz clic en el botón "Cargar un complemento temporal". Selecciona cualquiera de tus archivos (archivo de manifiesto o cualquier archivo de código) y ábrelo.
En Chrome, ve a chrome://extensions/, activa el modo de desarrollador con el interruptor en la esquina superior derecha y haz clic en el botón "Cargar archivos sin comprimir" en la esquina superior izquierda. Selecciona la carpeta que contiene los archivos de tu extensión.
Deberías poder ver la extensión funcionando en cualquier página de Wikipedia. Debería cambiar la apariencia de la página a algo como esto:
Cuando la extensión esté instalada y activada, la página de Wikipedia debería verse así, con el aviso destacado oculto y los enlaces a las notas al pie en un color más claro:
Desarrollar una extensión de navegador compatible con varios navegadores facilita un acceso más amplio y una mejor experiencia de usuario sin mayor complejidad. Adherirse a estándares comunes desde el principio reduce el esfuerzo y aumenta las probabilidades de éxito de la extensión.
Comience con un pequeño paso, pruebe la extensión en más de un navegador y amplíe gradualmente sus funciones para garantizar una alta calidad y una distribución más amplia entre los usuarios.
