Permisos en Extensiones para Chrome

Introducción

En este post, exploraremos cómo desenfocar imágenes en cualquier página web usando una extensión para Chrome. También discutiremos la importancia de los permisos en las extensiones de Chrome y cómo configurarlos correctamente.

Cómo Desenfocar Imágenes Usando una Extensión para Chrome

Crear el Archivo CSS:

Primero, necesitamos un archivo CSS que aplique el efecto de desenfoque. Crea un archivo llamado contentstyle.css y añade el siguiente código:

img, video {
  filter: blur(10px);
}

Actualizar el Manifiesto:

Asegúrate de que tu manifest.json incluya este archivo CSS como un content script:

{
  "manifest_version": 3,
  "name": "Mi Extensión",
  "version": "0.0.1",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "css": ["contentstyle.css"]
    }
  ]
}

Probar la Extensión:

Carga tu extensión en Chrome y navega a cualquier sitio web. Verás que todas las imágenes y videos aparecen desenfocados.

Importancia de los Permisos en las Extensiones para Chrome

Con el avance de las versiones del manifiesto (de V1 a V3), Chrome ha incrementado las restricciones en el uso de permisos para mejorar la seguridad. Ahora es obligatorio que las extensiones declaren los permisos necesarios en el archivo manifest.json.

Declarar Permisos:

Los permisos permiten que la extensión acceda a determinadas APIs de Chrome y realice acciones específicas. Aquí tienes un ejemplo de cómo declarar permisos:

{
  "manifest_version": 3,
  "name": "Mi Extensión",
  "version": "0.0.1",
  "permissions": [
    "storage",
    "tabs"
  ],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "css": ["contentstyle.css"]
    }
  ]
}

Permisos de Host:

Los permisos de host permiten que la extensión interactúe con páginas específicas. Puedes especificar patrones de URL para estos permisos:

"host_permissions": [
  "https://*.example.com/*"
]

Permisos Opcionales:

Los permisos opcionales se solicitan al usuario solo cuando son necesarios. Esto mejora la experiencia del usuario al no pedir demasiados permisos desde el inicio.

Uso del API de Almacenamiento en Extensiones

El API de almacenamiento permite que las extensiones guarden datos específicos del usuario de forma persistente.

Configurar el Almacenamiento:

Declara el permiso de almacenamiento en tu manifest.json:

{
  "permissions": ["storage"]
}

Guardar y Recuperar Datos:

Utiliza el API de almacenamiento para guardar y recuperar datos:

// Guardar datos
chrome.storage.local.set({key: "value"}, function() {
  console.log('Datos guardados');
});

// Recuperar datos
chrome.storage.local.get(['key'], function(result) {
  console.log('Valor recuperado:', result.key);
});

Ejemplo Práctico de Uso de Permisos y Almacenamiento

Actualizar el Archivo content-script.js:

Crea un archivo llamado content-script.js y añade el siguiente código:

chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
  console.log(response.farewell);
});

Actualizar el Archivo background.js:

Crea o actualiza el archivo background.js para escuchar y responder al mensaje:

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.greeting === "hello")
      sendResponse({farewell: "goodbye"});
  }
);

Probar la Comunicación:

Recarga tu extensión y verifica la consola de la página web para ver el mensaje de respuesta.

Conclusión

Crear extensiones para Chrome puede parecer complejo, pero con una comprensión clara de los content scripts, permisos y APIs de almacenamiento, puedes desarrollar herramientas poderosas y útiles. Sigue explorando estas técnicas y lleva tus extensiones al siguiente nivel.

Espero que esta guía te haya sido útil. ¡No olvides suscribirte para más contenido y seguir mejorando tus habilidades de desarrollo!