Mi primera extensión de Chrome

Por Arrecio


Lo primero y más importante, la extensión que funciona en Chrome funciona en cualquier navegador basado en Chromium, o debería.

Hablando de las extensiones de chrome esto son complementos que añadidos a chrome terminan añadiéndole funcionalidad, o al menos es lo que se pretende. La arquitectura de las extensiones es relativamente sencilla, estando formada a grosso modo por todos o parte de los elementos que se muestran en este dibujo:

Arquitectura de extensión de chrome

Empezamos por el manifest.json. En este archivo se configura la extensión de tal manera que se identifican los archivos auxiliares así como se declaran los permisos que necesitará, así como otras opciones que mejor consultar siguiendo el enlace. Por destacar las principales partes, en action establecemos como se comportará la parte de la extensión que se visibiliza en la barra de herramientas. Podemos cambiar el icono a mostrar ahí así como el archivo .html que se renderizará cuando pulsemos en él.

En background se configuran los service workers que son scripts que se ejecutan en segundo plano ideados para realizar tareas de auxilio a la extensión.

En content_scripts colocamos scripts (JavaScript o CSS) que se incrustarán en DOM, es decir en la web que se esté renderizando en la ventana del navegador, con el que podremos leer o modificar su contenido. Los "content_scripts" deben estar asociados siempre a un patron url que de encajar con la web visitada produce el activado del script.

Y por comentar un último elemento, permissions enumera la lista de permisos de API que necesitará hacer uso la extensión. Esto es importante ya que se informará al usuario de estos por si prefiriera evitar el uso de la extensión por este motivo.

Con un ejemplo mejor

Para ver el funcionamiento voy a mostrar una funcionalidad sencilla como es la de cambiar el fondo de https://gemini.google.com/ a un color salmón. Para este simple ejemplo no va a ser necesario implementar ninguna funcionalidad service_worker.

Creamos una carpeta para la extensión y dentro de ella un archivo manifest.json con el siguiente contenido:

{
  "name": "Backgroud Changer",
  "description": "Chrome extension test",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  },
  "content_scripts": [
    {
      "matches": [
        "https://gemini.google.com/*"
      ],
      "js": [
        "jquery.js",
        "bg-changer.js"
      ]
    }
  ]
}

En el apartado action tan sólo indicamos el icono a mostrar en la barra de herramientas y respecto al default_popup, que es lo que se mostrará cuando pinchemos en él, creamos un archivo popup.html con el siguiente contenido:

<!DOCTYPE html>
<html>
<body style="width:400px;">
<div id='message'>Disfruta de tu color favorito.</div>
</body>
</html>

La funcionalidad se la damos con los content_scripts. Con la configuración anterior lo que estamos diciéndole es que cuando visitemos cualquier web cuya url encaje en el patron https://developer.chrome.com/* tiene que cargar como scripts los archivos jquery.js y bg-changer.js, ambos deben estar en el mismo directorio de la extensión y en el caso del jquery lo obtenemos de su web. Respecto al otro lo dotamos del siguiente contenido inicial:

function onWindowLoad() {
    console.log("TEST")
}

window.onload = onWindowLoad;

Toca ahora probar que el plugin funciona. Para ello vamos a realizar un test cargándolo. Primero ingresamos en el navegador chrome://extensions/, seleccionamos el modo de desarrolladores y la damos a Cargar desempaquetado, navegamos a la carpeta de nuestra extensión y le damos a seleccionar.

Hecho lo anterior si visitamos la web https://gemini.google.com/ y pulsamos F12 obtendremos las herramientas de desarrollador donde pulsaremos en Console y si todo va bien veremos nuestro mensaje TEST.

Hecho esto vamos a hacer que en realidad de mostrar ese mensaje haga el trabajo que pretendíamos. Modificamos bg-changer.js a lo siguiente:

function onWindowLoad() {
    $("body").css("background-color", "#fa8072");
}

window.onload = onWindowLoad;

Por comentar lo que hace el script, al finalizar de renderizar la web ejecuta la función onWindowLoad que como única línea de código tiene una llamada a jQuery que modifica la propiedad CSS background-color del body al color #fa8072.

Y por supuesto no es más que un muy simple ejemplo de lo que se puede realizar mediante extensiones con Chrome.