tegakari

Web要素を選択して、HTML・フレームワーク・コンポーネント情報とスクリーンショットをAIエディタ用にコピーするChrome拡張

tegakari は、Webページ上の要素を選択するだけで、その要素のコンテキスト情報を AIエディタ（Claude Code, Cursor など）にそのまま渡せる形でコピーできる Chrome拡張機能です。 「このボタンの挙動を変えたい」「このコンポーネントを修正したい」—— そんなとき、要素をクリックするだけで以下の情報をMarkdown / JSONL形式でまとめて クリップボードにコピーします。 ■ 主な機能 - ページ上の複数要素をクリックして選択・アノテーション - 選択要素にピンを配置し、指示テキストを入力 - 要素周辺のスクリーンショットを自動キャプチャ - HTML情報（タグ・属性・テキスト）を取得 - React / Vue のコンポーネント階層・Props・State を自動検出 - Next.js / Nuxt などのメタフレームワークを検出 - ページメタデータ（Viewport, UserAgent, Language）を収集 - JSONL / Markdown 形式を切り替えてコピー - URLパターン別のプレフィックス設定（例: [repo=my-app]） - アノテーションをURL単位で永続化（ページ再読み込み後も復元） - ダーク / ライトテーマ対応 ■ こんな方におすすめ - AIエディタにUIの修正を依頼することが多いフロントエンドエンジニア - 「どの要素か」を言葉で説明するのが面倒な方 - コンポーネント階層やPropsをすばやく把握したい方 ■ プライバシー 収集した情報はすべてブラウザ内（ローカル）で処理され、外部サーバーには 一切送信されません。アナリティクスや広告、トラッキングも行いません。 オープンソースで開発しています。 GitHub: https://github.com/iemong/tegakari