Element to LLM Prompt Context

A Firefox extension for developers: point at elements in a web app, attach short comments, preview a compact evidence report, and copy it as Markdown. The report gives an LLM coding agent exact DOM context — selectors, text, semantics, bounds, and a sanitized HTML fragment — without screenshots.

The in-app panel and toolbar use the short name Element Context.

Principles

• Local and user-controlled. No telemetry, accounts, remote services, or network calls of any kind at runtime.
• Least privilege. Runs only after you click the toolbar button, and only on the active tab (activeTab + scripting). No all-sites host permission and no persistent content scripts.
• Safe with hostile pages. All page content is treated as untrusted. Page strings are never interpolated into extension UI markup, secret-like attributes and form values are redacted, and captured evidence is bounded and escaped before it reaches the report.
• Compact. Bounded capture budgets and three output presets (compact, standard, diagnostic).
• Local persistence. Annotations are saved to browser.storage.local, keyed by the page's origin + path, so they survive reload and navigating away and back. Nothing is ever transmitted off the device. Because captured evidence (including sanitized DOM) is written to local storage, use Clear to remove it when you're done — closing the panel keeps it.

Build

Requires Node.js 20+.

npm ci
npm run build          # produces an unpacked extension in dist/firefox
npm test               # unit tests for the sanitizers, selector, and formatter
npm run verify         # typecheck + test + build + web-ext lint

Run in Firefox

Temporary install (fastest during development):

1. npm run build
2. Open about:debugging#/runtime/this-firefox in Firefox.
3. Click Load Temporary Add-on… and select dist/firefox/manifest.json.
4. Open any normal http(s) page and click the Element Context toolbar icon. Clicking it starts a session (and drops you into pick mode if the page has no saved issues yet); clicking it again closes the panel.

Or let web-ext launch a fresh profile with the extension loaded:

npm run run:firefox

Usage

1. Clicking the toolbar icon starts a session and drops you straight into pick mode — hover highlights the exact target; click freezes it and opens the comment composer. Escape cancels.
2. Save (button or Ctrl/Cmd+Enter) creates a numbered marker and an issue, and automatically copies the full report to the clipboard. Add another target attaches more elements to the same issue, and Pick element starts the next issue.
3. Copy report in the panel re-copies the whole report; each issue also has its own Copy button. Preview shows the exact text first, with byte count and redaction/truncation warnings.
4. Close hides the panel but keeps your saved issues on the page; Clear deletes them from local storage.

Review the report before pasting it anywhere: even after redaction it can contain sensitive page content.

Privacy

Everything runs locally; nothing is transmitted off your device. See PRIVACY.md for what is stored and which permissions are used.

License

MIT — see LICENSE.

Status

Pre-release (0.1.0). Not yet published on addons.mozilla.org.