Sebastian Gomez

Jul 20, 2024

Updated: Jun 24, 2026

Permisos en Extensiones para Chrome

En este post exploraremos cómo desenfocar imágenes en cualquier página web usando una extensión para Chrome. También veremos por qué los permisos son tan importantes en las extensiones de Chrome y cómo configurarlos correctamente. Trabajaremos siempre sobre Manifest V3, así que empecemos.

Nota: Manifest V2 ya está completamente retirado del Chrome estable, el proceso de eliminación se completó durante 2024 y 2025. Hoy Manifest V3 es el único objetivo válido para publicar extensiones, así que todo lo que veremos aquí parte de "manifest_version": 3.

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 content-style.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": ["content-style.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 declararlos:

{
  "manifest_version": 3,
  "name": "Mi Extensión",
  "version": "0.0.1",
  "permissions": [
    "storage",
    "tabs"
  ],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "css": ["content-style.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, ya que no le pedimos 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: En Manifest V3 el service worker admite plenamente la forma con promesas, así que lo idiomático hoy es usar async/await:

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

// Recuperar datos
const result = await chrome.storage.local.get(["key"]);
console.log("Valor recuperado:", result.key);

Si prefieres mantener el estilo clásico con callbacks, también sigue funcionando:

// Forma con callbacks (heredada, pero válida)
chrome.storage.local.set({ key: "value" }, function () {
  console.log("Datos guardados");
});

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. Fíjate en que protegemos response y revisamos chrome.runtime.lastError, porque si ningún listener responde, response llega como undefined y leer response.farewell lanzaría un error en consola:

chrome.runtime.sendMessage({ greeting: "hello" }, function (response) {
  if (chrome.runtime.lastError) {
    console.warn("No hubo respuesta:", chrome.runtime.lastError.message);
    return;
  }
  if (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 revisa 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, los permisos y el API de almacenamiento, puedes desarrollar herramientas poderosas y útiles. Sigue explorando estas técnicas y lleva tus extensiones al siguiente nivel.

Ejercicios propuestos

1. Modifica la regla de CSS para que solo se desenfoquen las imágenes (img) y no los videos, y comprueba el resultado en distintos sitios.
2. Añade el permiso storage y guarda una preferencia del usuario (por ejemplo, el nivel de desenfoque) usando la forma con async/await, recuperándola al cargar la página.
3. Convierte uno de los permisos de host en un permiso opcional y solicítalo solo cuando el usuario active la funcionalidad.

Resumen en 3 puntos

1. En Manifest V3, que ya es el único objetivo válido, toda extensión debe declarar sus permisos en manifest.json, incluidos los host_permissions y los permisos opcionales.
2. El API de almacenamiento admite la forma moderna con promesas y async/await, aunque los callbacks siguen funcionando.
3. Al pasar mensajes entre content-script.js y background.js, protege siempre response y revisa chrome.runtime.lastError para evitar errores en consola.

Eso es todo, espero que esta guía te sea de utilidad y la puedas aplicar a algún proyecto que tengas en mente. Déjame un comentario si te sirvió o si tienes alguna duda, y recuerda que si te gustó también puedes compartirla usando los links a las redes sociales aquí abajo. Buena suerte y sigue mejorando tus habilidades de desarrollo.