المهارات browser-extension-builder
📦

browser-extension-builder

آمن

Desarrolla Extensiones de Navegador con Claude

Desarrollar extensiones de navegador requiere comprender APIs complejas, los requisitos de Manifest V3 y la compatibilidad entre navegadores. Esta habilidad proporciona orientación experta sobre arquitectura de extensiones, scripts de contenido, patrones de almacenamiento y publicación en tiendas web.

يدعم: Claude Codex Code(CC)
🥉 74 برونزي
1

تنزيل ZIP المهارة

2

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

3

فعّل وابدأ الاستخدام

اختبرها

استخدام "browser-extension-builder". Help me create a browser extension that changes the background color of all paragraphs on a page.

النتيجة المتوقعة:

Te ayudaré a crear una extensión de navegador para modificar los fondos de párrafos. Aquí está la estructura del proyecto: manifest.json para configuración, content.js con código de manipulación del DOM usando querySelectorAll, y permisos apropiados en el manifiesto. El script de contenido inyectará un cambio de estilo al cargar la página usando document.addEventListener('DOMContentLoaded').

استخدام "browser-extension-builder". How do I save user preferences in my extension?

النتيجة المتوقعة:

Usa las APIs chrome.storage.local.set() y chrome.storage.local.get(). Te mostraré el patrón de envoltura asíncrona con Promesas para un código más limpio. Esto persiste datos localmente en el navegador con un límite de 5MB. Para configuraciones que se sincronizan entre dispositivos, usa chrome.storage.sync en su lugar.

استخدام "browser-extension-builder". What's the difference between content scripts and background scripts?

النتيجة المتوقعة:

Los scripts de contenido se ejecutan en el contexto de páginas web y pueden acceder al DOM, mientras que los background service workers se ejecutan independientemente y manejan eventos, mantienen estado y coordinan entre componentes. Los scripts de contenido ven la página; los background workers ven el navegador. La comunicación ocurre vía chrome.runtime.sendMessage y chrome.runtime.onMessage.

التدقيق الأمني

آمن
v1 • 2/25/2026

Static analysis detected 36 potential issues, all of which are false positives from code examples in documentation. The flagged patterns (shell command syntax, innerHTML usage, URLs, storage keys) appear exclusively within markdown code blocks as educational examples for browser extension development. No executable code or security threats were found. This is a legitimate documentation skill.

1
الملفات التي تم فحصها
266
الأسطر التي تم تحليلها
1
النتائج
1
إجمالي عمليات التدقيق
مشكلات منخفضة المخاطر (1)
SKILL.md:133
innerHTML Usage in Documentation Example
Line 133 contains innerHTML usage in a code example demonstrating UI injection. While this pattern has XSS risks when used with untrusted input, this is documentation showing a common browser extension pattern. The example is for educational purposes and the risk is minimal since it's not executable code.
تم تدقيقه بواسطة: claude

درجة الجودة

38
الهندسة المعمارية
100
قابلية الصيانة
87
المحتوى
50
المجتمع
100
الأمان
91
الامتثال للمواصفات

ماذا يمكنك بناءه

Crear una Extensión de Productividad

Crea una extensión de Chrome que mejore tu experiencia de navegación con herramientas y atajos útiles.

Desarrollar Extensiones Multi-Navegador

Construye extensiones que funcionen sin problemas en Chrome, Firefox y otros navegadores usando APIs estándar.

Monetizar Extensiones de Navegador

Crea y publica extensiones de navegador con estrategias de monetización para la Chrome Web Store.

جرّب هذه الموجهات

Crear una Extensión Simple 
Help me create a simple browser extension that highlights specific text on web pages. I need the manifest.json, content script, and popup UI files.
Añadir Almacenamiento a la Extensión 
I have a basic browser extension. Help me add Chrome Storage API so users can save their settings across sessions.
Implementar Patrón de Comunicación 
Show me how to set up message passing between my extension's popup, background service worker, and content scripts. I need to send data from the popup to modify page content.
Publicar en Chrome Web Store 
I have a completed browser extension. Guide me through the process of preparing it for publication on the Chrome Web Store, including packaging, screenshots, and store listing requirements.

أفضل الممارسات

  • Solicita los permisos mínimos necesarios para que tu extensión funcione, y usa permisos opcionales para características que pueden habilitarse más tarde
  • Mantén los background service workers ligeros ya que Manifest V3 termina workers inactivos para ahorrar recursos
  • Usa selectores DOM estables y añade manejo de errores para prevenir fallos cuando los sitios web actualicen su estructura

تجنب

  • Solicitar permisos amplios como <all_urls> o tabs cuando solo necesitas acceso a sitios específicos
  • Realizar procesamiento pesado en background workers en lugar de delegar a scripts de contenido o usar alarms
  • Usar selectores frágiles que se rompen cuando los sitios web cambian, sin manejo de errores o monitoreo

الأسئلة المتكررة

¿Qué es Manifest V3 y por qué es importante?
Manifest V3 es la versión más reciente del formato de manifiesto de extensiones de navegador. Introduce service workers en lugar de background pages, nuevos modelos de permisos y seguridad mejorada. Chrome Web Store requiere MV3 para nuevas extensiones.
¿Puede esta habilidad publicar mi extensión en Chrome Web Store?
No. Esta habilidad proporciona código y orientación para construir extensiones, pero debes crear manualmente una cuenta de desarrollador, pagar la tarifa, empaquetar tu extensión y enviarla a través del panel de Chrome Web Store.
¿Las extensiones funcionan igual en Chrome y Firefox?
La mayoría de las APIs modernas de extensiones son similares, pero hay diferencias. Esta habilidad cubre patrones multi-navegador, pero debes probar tu extensión en cada navegador objetivo y revisar su documentación específica.
¿Cómo depuro mi extensión de navegador?
Usa Chrome DevTools para scripts de contenido (inspecciona elementos en la página), y chrome://extensions para depurar background service workers e interfaces popup. Recarga tu extensión después de cambios en el código.
¿Cuáles son los límites de almacenamiento para extensiones de navegador?
Chrome Storage local tiene un límite de 5MB, mientras que el almacenamiento sync está limitado a 100KB total con 8KB por elemento. Para datos más grandes, considera IndexedDB o almacenamiento del lado del servidor.
¿Puedo usar frameworks como React en mi extensión?
Sí, pero debes construir tu código frontend para el entorno de la extensión. La mayoría de frameworks modernos funcionan con extensiones usando herramientas de construcción. Esta habilidad se enfoca en JavaScript vanilla para claridad y para evitar complejidad de construcción.

تفاصيل المطور

المؤلف

sickn33

الترخيص

MIT

المستودع

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/browser-extension-builder

مرجع

main

بنية الملفات

📄 SKILL.md