Web Picker

Selecciona un elemento de la interfaz en una página localhost de tu navegador, escribe una petición de corrección y tu agente de codificación MCP (Claude Code, Codex, ...) lo recoge y edita el código.

Deja de describir los elementos con palabras. Haz clic en el elemento. La captura lleva las pistas mínimas que un agente necesita para encontrar ese elemento exacto en tu código — sin filtar jamás valores sensibles.

v1 es solo localhost por diseño. No hay nube, no hay cuentas, no hay claves de API.

Cómo funciona

 Browser (localhost page)            Local machine                Coding agent
 ┌────────────────────────┐     ┌───────────────────────┐     ┌──────────────────┐
 │ content script         │     │ Daemon (127.0.0.1)    │     │ MCP adapter      │
 │  pick + mask + rank    │     │  durable queue        │     │  connect / list  │
 │          │ runtime msg │     │  extension HTTP       │     │  pull / resolve  │
 │ service worker ────────┼HTTP►│  token IPC /ipc      │◄────┤  (7 MCP tools)   │
 └────────────────────────┘     └───────────────────────┘ IPC └──────────────────┘

• El daemon solo se enlaza a 127.0.0.1. El worker de la extensión solo acepta mensajes de pestañas localhost verificadas por Chrome, y los endpoints de extensión del daemon solo aceptan el Origin fijado chrome-extension://mnglicpibnccgcifdndemfpidkcgboli. El IPC del adaptador MCP está protegido por un token específico de cada ejecución.

• Neutral respecto al agente: el daemon nunca sabe si el agente es Claude Code o Codex. Solo cambia el paso de registro.

• El enmascaramiento preserva la identidad: los valores de entrada, los correos y los tokens nunca se exportan; se conservn las etiquetas cortas visibles, el selector, los ancestros y el landmark para que el agente pueda localizar el elemento objetivo.

Related MCP server: Peek

Requistos

• Node.js >= 20.18.0 (probado con 20.20.2)

• Google Chrome (MV3, load unpacked)

• Un agente de codificación que hable MCP (Claude Code o Codex)

Instalación

./bootstrap.sh          # macOS/Linux  (installs deps + builds)
# or
pwsh ./bootstrap.ps1    # Windows

Despues:

1. Carga la extensión de Chrome chrome://extensions → activa el Modo de desarrollador → Cargar descomprimida → selecciona la carpeta extension/.

2. Registra el servidor MCP con tu agente:

   ./scripts/register-claude-code.sh   # Claude Code
   ./scripts/register-codex.sh         # Codex

   Ambos apuntan al agente a scripts/run.cjs, que inicia el daemon de forma diferida.

Ruta de evaluación en cinco minutos (sin claves ni cuentas)

El recorrido completo es reproducible solo desde la página de demostración. La verificación automática normalmente termina en menos de cinco minutos en una máquina con Chrome instalado y un escritorio gráfico; no hace falta clave de API de ningún modelo ni descargar el navegador de Playwright.

1. Preparación

   ./bootstrap.sh

2. Sirve el demo en localhost

   python3 -m http.server 3000 --directory test-page

   Abre http://localhost:3000. Tiene tres botones, todos etiquetados 저장 ( en la cabecera, el área principal y el plea), un grupo señuelo deliberado.

3. Carga la extensión (ver paso 1 de Instalación) y registra tu agente (paso 2 de Instalación).

4. Elige un elemento

   • Click en el botón 픽 ( abajo a la derecha) → 요소 selection.

   • Pasa el cursor sobre el botón 저장 del área principal ( dentro de la tarjeta de perfil) y haz clic en el.

   • Escribe una petición, por ejemplo 이 버튼의 파란색으로, y pulsa 보내기.

   • Deberías ver 요청의 큐에 보냈습니다.

5. Récupiralo con el agente In a Claude Code / Codex session:

   • connect_web_picker → reclama el picker, muestra el número pendiente de solicitudes.

   • list_web_requests → muestra tu solicitud con su id y estado.

   • get_web_request con ese id → muestra las pistas del objetivo. Nota: landmark: section (y el selector #profile-save) o distinción de los señuelos 저장 de la cabecera/pie de página (landmark: header / landmark: footer), aunque los tres compartan la etiqueta visible 저장.

   • resolve_web_request con el id → lo marca como resuelto.

Esa ruta completa está cubierta tanto por la suite de integración sin navegador como por el E2E real de Chrome, más abajo.

Reproducir sin navegador (completamente automatizado)

npm test

test/integration.test.ts publica tres capturas señuelo, luego ejecuta las herramientas MCP reales a través de connect → listo → get → resolve, verificando que el elemento seleccionado se identifica de forma única. También arranca en frío el daemon compilado desde dist/.

Reproducir con la extensión real de Chrome

npm run test:e2e abre un Google Chrome instalado en un perfil nuevo con ventana, carga la extensón extension/ descomprimida, realiza la seleçaoión del botón de perfil a través de la interfaz real de contenido, y veriifica y resuelve la solicitud en fla a través del cliente MCP. Requiere una sesión de escritorio gráfica y normalmente termina en unos 10 segundos. No descarga nenhún navegador.

macOS o Linux:

npm run test:e2e

# For a non-standard Chrome install:
PLAYWRIGHT_CHROME_EXECUTABLE=/path/to/google-chrome npm run test:e2e

Windows PowerShell:

npm run test:e2e

# For a non-standard Chrome install:
$env:PLAYWRIGHT_CHROME_EXECUTABLE = 'C:\Path\To\chrome.exe'
npm run test:e2e

Si Chrome no está presente o la anulación no apunta a un ejecutable instalado, la prueba falla con:

Google Chrome is required for npm run test:e2e; install Chrome or set PLAYWRIGHT_CHROME_EXECUTABLE

Valores de seguridad por defecto

• Daemon confinado a 127.0.0.1 úniamente.

• La extensión se activa solo en localhost / 127.0.0.1 / *.localhost.

• El worker la extensión solo acepta remitentes de pestañas localhost verificadas por Chrome; los endpoints HTTP de la extensión requieren el Origin fijado y exacto. El IPC requiere un token (comprado en tiempo compte), almacenado como 0600 en ~/.web-picker/token.

• Los valores de entrada y las cadenas con forma de correo, dígitos largos o token no se exportan nunca. El mismo filtro cubre selector, id, class, role, aria-label, name, resúmenes de ancestros y HTML enmascarado, mx y conserva tokens de clase seguros para la identidad del objetivo. dataset envía solo nombres de claves no sensibles después de la normalización del DOM; los valores nunca salen de la página.

Herramientas MCP

Desarollo

npm test          # vitest (unit + jsdom + integration; excludes real Chrome)
npm run test:e2e  # headed installed-Chrome round trip
npm run build     # tsc -> dist/
npm run benchmark # deterministic target-disambiguation benchmark -> artifacts/
npm run sbom      # CycloneDX 1.5 inventory -> artifacts/sbom.cdx.json

npm run sbom rechaza versiones de Node por debajo del mínimo indicate, restaura metadatos de. integridad/desarrollo/opcional derivados del v. llockfile, valida el JSON final de CycloneDX y escribe bytes canónicos independientes de la caché oculto de npm.

npm run benchmark mide la desamuación de focos objectivos solo on 30 fixtures HTML estáticos. Include controls equilibrados de étiquetas ambigonías y únicas, así como resoluciones de locator correcta y no exitosa. No es una medida de la productividad del agente de codificación ni de la consulta de las fuentes. Los resultados registran la resolución textual, la resolución de localizadores de Web Picker, la calibración de confianca global y por categoría, estratos de étiquetas y tamaños de bytes de lade datos de captura serializada en artifacts/benchmark-resultados.json y artifacts/benchmark-resultados.md.

Aguitectura: núcleo puro (src/daemon/state.ts) + manejadores de aplicación (extensión-api, ipc-api, tools) + adaptadores ligeros (server.ts, código del adaptator MCP en src/shim/, spawn.ts). Los fuertos se inyectan, por lo que todo se pruebe sin socket. Marcelate docs/architecture.md.

Evidencia de la entrega: docs/dependencies.md, docs/video-scrip.md y docs/submission-checklist.md. Las URL públicas del repositorio y YouTube están blocand explíacitamente en la lista de verificación hasta que el propietario las publicque y las verifiquie.

Licencia

MIT Las licendas bloqueadas se registran desde los metadatos de paquetes instalados en docs/dependencies.md. No hay ninguna dependencia de ejecución de la familia GPL.