Extension de Chrome

Workspace: apps/extension/ · Build: bun run build desde ese directorio · Target: Chrome Web Store (MV3)

La extension de PinTeach para Chrome muestra el contexto del alumno directamente desde Google Meet, sin cambiar de pestaña.

---

Que hace

Cuando el profesor entra a una reunion de Google Meet que esta enlazada a una sesion de PinTeach, la extension abre automaticamente un panel lateral con:

• Datos de la sesion: alumno, servicio, horario
• Datos del alumno: nombre, creditos restantes
• Acciones rapidas: añadir resumen/deberes y completar la sesion sin salir de Meet

---

Arquitectura

Stack: WXT 0.20 + React 19 + TypeScript. Chrome MV3.

apps/extension/
  src/
    entrypoints/
      meet.content.ts        # Content script en meet.google.com/*
      background.ts          # Service worker
      sidepanel/
        index.html
        main.tsx
        App.tsx              # TokenSetup | SessionView
    components/
      TokenSetup.tsx         # Pantalla de configuracion del token
      SessionCard.tsx        # Datos de la sesion actual
      StudentCard.tsx        # Datos del alumno
      QuickActions.tsx       # Resumen + deberes + Completar
    lib/
      api.ts                 # pinteachApi() con X-Extension-Token
      storage.ts             # chrome.storage wrappers tipados

Content Script (meet.content.ts)

Se inyecta en https://meet.google.com/*. Detecta el codigo de reunion en el pathname (/abc-defg-hij), envia MEET_DETECTED al background con la URL limpia. Parchea history.pushState para detectar navegacion SPA dentro de Meet.

Background (background.ts)

Service worker MV3. Escucha mensajes MEET_DETECTED:

1. Llama GET /teacher/sessions/by-meet-url?url={meetUrl} con X-Extension-Token
2. Si hay sesion → guarda en chrome.storage.session → llama chrome.sidePanel.open({ tabId })
3. Si no hay sesion → limpia chrome.storage.session

Side Panel (App.tsx)

• Si no hay token en chrome.storage.local → muestra <TokenSetup> (campo de texto para pegar el token)
• Si hay sesion en chrome.storage.session → muestra <SessionCard> + <StudentCard> + <QuickActions>
• Si no hay sesion (Meet sin clase PinTeach) → estado vacio

---

Autenticacion

El profesor genera un token en Settings → Integraciones → Extension de Chrome (POST /auth/extension-token). El token se muestra una unica vez en claro con boton de copiar.

El profesor pega el token en <TokenSetup>. Se guarda en chrome.storage.local. Todas las llamadas a la API incluyen la cabecera X-Extension-Token: {token}.

En el backend, authenticate('teacher') comprueba esta cabecera antes del cookie de sesion, por lo que todas las rutas /teacher/* son accesibles desde la extension sin cambios adicionales.

Rotar / Revocar: Desde Settings → Extension de Chrome. Revocar elimina teachers.extensionToken de la DB — el token almacenado en la extension deja de funcionar.

---

Build y carga local

cd apps/extension
bun install       # primera vez
bun run build     # genera .output/chrome-mv3/

En Chrome: chrome://extensions → “Cargar desempaquetada” → seleccionar .output/chrome-mv3/.

---

Endpoints usados

Endpoint	Metodo	Proposito
/teacher/sessions/by-meet-url?url=	GET	Busca sesion por Meet URL
/teacher/sessions/:id/content	PATCH	Guarda resumen y deberes
/teacher/sessions/:id/complete	POST	Completa la sesion
/teacher/sessions/:id/no-show/:studentId	POST	Registra no-show
/auth/extension-token	POST	Genera/rota token (desde app web)
/auth/extension-token	DELETE	Revoca token (desde app web)