opción

Cree y publique extensiones de Chrome siguiendo las mejores prácticas de Manifest V3. Utilice esta habilidad cada vez que el usuario solicite crear, modificar, depurar o comprender extensiones del navegador Chrome, complementos o cualquier elemento relacionado con la API de extensiones de Chrome. Se activará al mencionarse: ‘extensión de Chrome’, ‘extensión del navegador’, ‘manifest.json’, ‘content script’, ‘service worker’ (en contexto de navegador), ‘popup’ (en contexto de extensión de navegador), ‘side panel’, ‘chrome.* API’, ‘declarativeNetRequest’, ‘omnibox’, ‘context menu’ (en ext).

...Expandir todo
10
Tiempo actualizado 26 de agosto de 2026

Acerca de las extensiones de Chrome

Guía para crear extensiones de Chrome de calidad profesional con Manifest V3 y publicarlas en la Chrome Web Store. Se activa cada vez que se realiza una tarea relacionada con la creación, modificación, depuración o comprensión de extensiones del navegador Chrome y las APIs chrome.*, como scripts de contenido, workers de servicio, ventanas emergentes, paneles laterales, declarativeNetRequest, omnibox, menús de contexto y scripts de usuario, así como tareas de publicación en la tienda, como las justificaciones de permisos y las políticas de privacidad.

La parte dedicada a la creación está organizada en un conjunto de reglas obligatorias que abordan las causas más comunes de extensiones defectuosas. Algunos ejemplos incluyen referirse únicamente a archivos de icono que realmente existen (o omitir los iconos por completo), proporcionar un desencadenante explícito para abrir un panel lateral (un simple default_path no es suficiente para que se abra), ejecutar código solo dentro de iframes en entorno aislado ya que el CSP de la extensión bloquea eval y los scripts inline, declarar el permiso para pestañas antes de leer tab.url, utilizar siempre async/await en lugar de cadenas .then(), agrupar las operaciones DOM en scripts de contenido para evitar bloquear el hilo principal, y nunca almacenar estado en variables de workers de servicio porque estos son temporales (use chrome.storage y chrome.alarms en lugar de setTimeout). Otras reglas abordan la estabilización del ID de la extensión para chrome.identity OAuth mediante una clave del manifiesto, ofrecer retroalimentación al usuario después de las acciones en los menús de contexto, utilizar el LanguageModel Extension-Available (Prompt API) en workers de servicio, ventanas emergentes y paneles laterales, y requerir una clave de acción en el manifiesto antes de usar chrome.action.

Úsela cuando desee extensiones que funcionen desde el primer intento y superen la revisión, en lugar de dedicarse a depurar problemas sutiles relacionados con Manifest V3. Cada regla compara código defectuoso con código correcto e indica un archivo de referencia más detallado (relacionado con iconos, paneles laterales, entorno aislado CSP, gestión de pestañas, scripts de contenido, workers de servicio, autenticación/identidad, menús de contexto y el Prompt API). Una segunda sección trata sobre la publicación en la Chrome Web Store, incluyendo la preparación de la extensión, cómo responder a las rechazos en la revisión, redactar justificaciones de permisos y elaborar políticas de privacidad, lo que la hace útil en todo el ciclo de vida, desde la primera creación hasta su publicación en la tienda.

Preguntas frecuentes

¿Cuándo se debe utilizar esta habilidad?

Cada vez que se creen, modifican, depuran o se comprenden extensiones de Chrome y las APIs de extensiones de Chrome, o al publicar en la Chrome Web Store, incluyendo las justificaciones de permisos y las políticas de privacidad.

¿Por qué mi panel lateral no se abre si está definido en el manifiesto?

Definir side_panel.default_path no hace que se abra; es necesario añadir un desencadenante como chrome.sidePanel.open() al hacer clic en una acción o en un botón de ventana emergente, o establecer openPanelOnActionClick.

¿Por qué se pierde el estado de mi extensión?

Los workers de servicio son temporales y se terminan después de unos 30 segundos sin actividad, por lo que el estado almacenado en variables se pierde; guárdelo en chrome.storage y léalo en cada evento, utilizando chrome.alarms en lugar de setTimeout/setInterval.

¿Cómo ejecuto código dinámico teniendo en cuenta el CSP de la extensión?

El CSP de la extensión bloquea eval, new Function y los scripts inline, por lo que ejecute el código solo en iframes en entorno aislado (mediante el entorno aislado del manifiesto y postMessage), o a través de una URL de Blob o srcdoc que cree un origen separado.

¿Incluye información sobre el Prompt API?

Sí. El LanguageModel API funciona en workers de servicio, ventanas emergentes y paneles laterales sin necesidad de permisos adicionales, y las extensiones también tienen acceso a LanguageModel.params(), la cual no está disponible en el entorno web.

Todos los archivos

23 archivosreferences/extensions/context-menus.md1.8 KBVerreferencias/extensions/auth-identity.md3.9 KBVerreferencias/extensions/declarative-net-request.md2.7 KBVerreferencias/extensions/message-passing.md4.1 KBVerreferencias/extensions/api-calling.md2.1 KBVerreferencias/extensions/csp-sandbox.md4.7 KBVerreferencias/extensions/media-capture.md4.7 KBVerreferencias/extensions/prompt-api.md3.7 KBVerreferencias/extensions/tab-management.md3.7 KBVerSKILL.md25.5 KBVerreferencias/extensions/content-scripts.md3.4 KBVerreferencias/extensions/devtools.md2.8 KBVerreferencias/extensions/omnibox.md1.8 KBVerreferencias/extensions/side-panel.md4.4 KBVerreferencias/webstore/chromewebstore-template.md5.6 KBVerreferencias/webstore/review-checklist.md6.8 KBVerreferencias/extensions/icons.md2.7 KBVerreferencias/extensions/popup-ui.md2.3 KBVerreferencias/extensions/storage.md1.9 KBVerreferencias/webstore/store-listing.md7.8 KBVerreferencias/extensions/service-worker.md4.5 KBVerreferencias/extensions/user-scripts.md9.1 KBVerreferencias/webstore/privacy-policy.md4.1 KB

Instalar chrome-extensions

Descargue y extraiga los archivos de habilidades a su directorio .claude/skills/.

Descargar ZIP

Clona el repositorio y copia los archivos de la habilidad a tu proyecto.

git clone # Copy SKILL.md to your .claude/skills/ directory

Copiar Copiar
Configuración rápida: Copie la carpeta de habilidades a .claude/skills; Claude detectará y utilizará automáticamente dicha habilidad.

Habilidades relacionadas

playwright-cli
Tiempo actualizado 29 de junio de 2026
frontend-testing-best-practices
Tiempo actualizado 7 de julio de 2026
Playwright Browser Automation
Tiempo actualizado 29 de junio de 2026
playwright-generate-test
Tiempo actualizado 29 de junio de 2026
OR