Crear una extensión de Chrome con Manifest V3 y permisos mínimos

Prompt

Actúa como desarrollador especializado en extensiones de navegador basadas en Chromium con Manifest V3.

Contexto:
- Qué debe hacer la extensión: {{proposito}}
- Sitios donde funciona: {{sitios}}
- Interfaz y puntos de entrada: {{interfaz}}
- Datos que guarda y si deben sincronizarse entre dispositivos: {{datos}}

Entregables:
1. Arquitectura: qué hace el service worker, el content script y el popup u opciones, y cómo se comunican (chrome.runtime.sendMessage, puertos), con un diagrama sencillo.
2. manifest.json completo con los permisos mínimos necesarios: justifica cada permiso y host_permissions; usa activeTab u optional_permissions cuando sea posible.
3. Código de cada archivo (service worker, content script, popup HTML/CSS/JS, opciones si hacen falta) en JavaScript moderno, sin código remoto ni eval, respetando la política de seguridad de contenido de MV3.
4. Persistencia con chrome.storage (local o sync según {{datos}}), teniendo en cuenta que el service worker puede detenerse en cualquier momento y no guarda estado en memoria.
5. Accesibilidad básica del popup (etiquetas, foco, contraste) y textos preparados para traducción con _locales.
6. Cómo probarla: cargar descomprimida en chrome://extensions, depurar el service worker y el content script, y casos de prueba.
7. Checklist de publicación en la Chrome Web Store: descripción de uso de permisos, política de privacidad si trata datos, capturas e iconos.

Restricciones:
- Nada de recogida de datos ni rastreo que el usuario no haya pedido; si la extensión maneja datos personales, indica qué debe declarar en la política de privacidad.
- Si una API puede variar entre versiones, márcala como [VERIFICAR en la documentación de Chrome Extensions].
- Si no queda claro qué debe hacer la extensión en cada sitio, pregúntame antes.

Formato: secciones numeradas, árbol de archivos y un bloque de código por archivo.

Cómo usarlo

Ejemplo de uso

Resultado de ejemplo

{
  "manifest_version": 3,
  "name": "__MSG_extName__",
  "version": "1.0.0",
  "default_locale": "es",
  "action": { "default_popup": "popup.html", "default_title": "__MSG_saveTitle__" },
  "permissions": ["activeTab", "storage"]
}

const list = document.querySelector('#list');

async function render() {
  const { links = [] } = await chrome.storage.sync.get('links');
  list.replaceChildren(...links.map(({ title, url }) => {
    const a = Object.assign(document.createElement('a'), { href: url, textContent: title, target: '_blank' });
    const li = document.createElement('li');
    li.append(a);                          // textContent: nunca innerHTML con datos de la página
    return li;
  }));
}

document.querySelector('#save').addEventListener('click', async () => {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  if (!tab?.url) return;
  const { links = [] } = await chrome.storage.sync.get('links');
  if (!links.some((l) => l.url === tab.url)) {
    links.unshift({ title: tab.title || tab.url, url: tab.url, savedAt: Date.now() });
    await chrome.storage.sync.set({ links });
  }
  render();
});

render();

Datos clave

Categoría

Programación y desarrollo · Plugins

Tipo de resultado

Código

Nivel

Intermedio

Pensado para

ChatGPT, Claude, Gemini y Microsoft Copilot

Verificado en

Pendiente de verificación editorial

Variables

Propósito, Sitios, Interfaz y Datos y sincronización

Idioma

Español

Precio

Gratis, sin registro

Actualizado

07/11/2026

Preguntas frecuentes