Extensión de Navegador

Las extensiones de navegador proporcionan un entorno seguro para la gestión de identidad con protección contra ataques basados en web mediante el aislamiento de scripts.

Modelo de Seguridad

Característica	Descripción
Contexto Aislado	El script en segundo plano se ejecuta en un entorno aislado
Protección XSS	Los compromisos de sitios web no pueden acceder al almacenamiento de la extensión
Cifrado del Navegador	La Chrome Storage API proporciona persistencia cifrada
Aplicación de CSP	La Content Security Policy previene ataques de inyección
Bypass de Same-Origin	El contexto de la extensión omite las restricciones de mismo origen

Descripción de la Arquitectura

Instalación

Configuración del Manifiesto

Manifest V3 (Chrome)

Firefox (Manifest V2/V3)

Configuración del Script en Segundo Plano

El script en segundo plano es el núcleo de tu extensión, ejecutando el SDK en un contexto aislado.

Content Script para HSM Bridge

El content script maneja las operaciones de HSM UI que requieren interacción del usuario.

Comunicación con Páginas Web

Comunícate con páginas web para manejar ofertas de credenciales:

Documento Offscreen (Procesamiento Persistente en Segundo Plano)

Para operaciones que requieren procesamiento persistente en segundo plano en Manifest V3:

Configuración de Compilación

Webpack

Vite

Pruebas

Cargar Extensión Sin Empaquetar

Compila tu extensión: npm run build
Abre Chrome y navega a chrome://extensions
Activa el "Modo de desarrollador"
Haz clic en "Cargar sin empaquetar" y selecciona tu carpeta dist

Depurar Script en Segundo Plano

En chrome://extensions, encuentra tu extensión
Haz clic en el enlace "service worker" para abrir DevTools
Establece puntos de interrupción e inspecciona el estado

Solución de Problemas

El Service Worker se Detiene

Los service workers de Manifest V3 pueden ser terminados. Persiste el estado en Chrome Storage:

Problemas de CORS

Usa el script en segundo plano para todas las llamadas a la API para evitar CORS:

Próximos Pasos

Guía de Autenticación
Pruebas de Conocimiento Cero
Referencia de API

Modelo de Seguridad

Característica	Descripción
Contexto Aislado	El script en segundo plano se ejecuta en un entorno aislado
Protección XSS	Los compromisos de sitios web no pueden acceder al almacenamiento de la extensión
Cifrado del Navegador	La Chrome Storage API proporciona persistencia cifrada
Aplicación de CSP	La Content Security Policy previene ataques de inyección
Bypass de Same-Origin	El contexto de la extensión omite las restricciones de mismo origen

Descripción de la Arquitectura

Pruebas

Cargar Extensión Sin Empaquetar

Compila tu extensión: npm run build

Abre Chrome y navega a chrome://extensions

Activa el "Modo de desarrollador"

Haz clic en "Cargar sin empaquetar" y selecciona tu carpeta dist

Depurar Script en Segundo Plano

En chrome://extensions, encuentra tu extensión

Haz clic en el enlace "service worker" para abrir DevTools

Establece puntos de interrupción e inspecciona el estado

import { DCIDClient } from '@dcid/sdk'; class BackgroundService { private client: DCIDClient; async initialize() { this.client = new DCIDClient({ platform: 'extension', config: { appId: 'your-signing-app-id', appIdEncryption: 'your-encryption-app-id', env: 'prod' }, apiUrl: 'https://api.your-backend.com' }); await this.client.initialize(); this.setupMessageListeners(); } private setupMessageListeners() { chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { this.handleMessage(request, sender).then(sendResponse); return true; // Keep channel open for async response }); } private async handleMessage(request: any, sender: chrome.runtime.MessageSender) { switch (request.type) { case 'GET_AUTH_STATE': return { isAuthenticated: this.client.auth.isAuthenticated(), email: this.client.auth.getUserEmail() }; case 'INITIATE_SIGN_IN': await this.client.auth.initiateSignIn(request.email); return { success: true }; case 'CONFIRM_OTP': const tokens = await this.client.auth.confirmCode( request.email, request.code ); await this.client.auth.login(tokens.accessToken, tokens.refreshToken); return { success: true }; case 'SIGN_OUT': await this.client.auth.logout(); return { success: true }; case 'HANDLE_CREDENTIAL_OFFER': const email = this.client.auth.getUserEmail(); const token = await this.client.auth.getAccessToken(); const result = await this.client.credentials.handleCredentialOffer({ emailOrPhone: email, credentialUrl: request.url, accessToken: token }); return { success: result }; case 'GENERATE_PROOF': const userEmail = this.client.auth.getUserEmail(); const accessToken = await this.client.auth.getAccessToken(); const proof = await this.client.proofs.createAndVerifyProof({ emailOrPhone: userEmail, proofRequestUrl: request.url, accessToken: accessToken }); return { success: true, proof }; default: return { error: 'Unknown message type' }; } } } // Initialize on extension load const service = new BackgroundService(); service.initialize();

Extensión de Navegador

Modelo de Seguridad

Descripción de la Arquitectura

Instalación

Configuración del Manifiesto

Manifest V3 (Chrome)

Firefox (Manifest V2/V3)

Configuración del Script en Segundo Plano

Content Script para HSM Bridge

Popup UI

Comunicación con Páginas Web

Documento Offscreen (Procesamiento Persistente en Segundo Plano)

Configuración de Compilación

Webpack

Vite

Pruebas

Cargar Extensión Sin Empaquetar

Depurar Script en Segundo Plano

Solución de Problemas

El Service Worker se Detiene

Problemas de CORS

Próximos Pasos

Referencia del SDK

Extensión de Navegador

Modelo de Seguridad

Descripción de la Arquitectura

Instalación

Configuración del Manifiesto

Manifest V3 (Chrome)

Firefox (Manifest V2/V3)

Configuración del Script en Segundo Plano

Content Script para HSM Bridge

Popup UI

Comunicación con Páginas Web

Documento Offscreen (Procesamiento Persistente en Segundo Plano)

Configuración de Compilación

Webpack

Vite

Pruebas

Cargar Extensión Sin Empaquetar

Depurar Script en Segundo Plano

Solución de Problemas

El Service Worker se Detiene

Problemas de CORS

Próximos Pasos

Referencia del SDK