Click any element on a web page to copy it as Markdown for AI coding assistants. Detects React, Vue, and Svelte component names and source files.
This is a Firefox build that bundles react-grab (MIT, by Aiden Bai) at version 0.1.29 — the release that ships Vue and Svelte detection alongside React. Markdown conversion is via Turndown. Toolbar icon derived from Phosphor Icons. See NOTICE for full attribution.
- Click the toolbar button to enable a selection cursor on the active tab.
- Click any element. The element is copied to the clipboard as Markdown, with the React / Vue / Svelte component name and source file appended when available.
- Paste into ChatGPT, Claude, Cursor, Copilot Chat, etc.
| Framework | Method |
|---|---|
| React | Walks the fiber tree via bippy, resolves the nearest named component |
| Vue 3 | Reads __vueParentComponent, then type.__name and type.__file (dev builds), plus data-v-inspector from vite-plugin-vue-inspector |
| Svelte | Reads __svelte_meta |
In production builds without dev metadata, copies clean HTML and a CSS selector instead.
pnpm install
pnpm build # outputs dist/
pnpm package # outputs grab-context.xpiabout:debugging#/runtime/this-firefox- Load Temporary Add-on… → select
dist/manifest.json.
Self-distribution signing via AMO:
pnpm dlx web-ext sign \
--source-dir=dist \
--api-key="$AMO_JWT_ISSUER" \
--api-secret="$AMO_JWT_SECRET" \
--channel=unlistedThe signed XPI from web-ext-artifacts/ installs permanently in regular Firefox.
- Targets Firefox 128+ (
world: "MAIN"content scripts). - Background uses
background.scripts(event page), notservice_worker. - Uses the
chrome.*API (Firefox 109+ aliases), so the upstream content-script source is unchanged. - Default click action is
copyinstead ofcomment, so a single click copies immediately with no prompt. - Add-on id is
grab-context@tomerdanan.dev— change it insrc/manifest.jsonif you republish under a different namespace.
MIT — see LICENSE. Bundled dependencies remain under their own MIT licenses; see NOTICE.