概要
Web要素を選択して、HTML・フレームワーク・コンポーネント情報とスクリーンショットをAIエディタ用にコピーするChrome拡張
tegakari は、Webページ上の要素を選択するだけで、その要素のコンテキスト情報を AIエディタ（Claude Code, Cursor など）にそのまま渡せる形でコピーできる Chrome拡張機能です。 「このボタンの挙動を変えたい」「このコンポーネントを修正したい」—— そんなとき、要素をクリックするだけで以下の情報をMarkdown / JSONL形式でまとめて クリップボードにコピーします。 ■ 主な機能 - ページ上の複数要素をクリックして選択・アノテーション - 選択要素にピンを配置し、指示テキストを入力 - 要素周辺のスクリーンショットを自動キャプチャ - HTML情報（タグ・属性・テキスト）を取得 - 選択要素の実効スタイル（computed style 差分）を取得し、余白・色などの修正指示に実測値で対応 - React / Vue のコンポーネント階層・Props・State を自動検出 - コンポーネントのソース位置（file:line）を解決して出力（dev build で取得可能な場合） - Next.js / Nuxt などのメタフレームワークを検出 - ページメタデータ（Viewport, UserAgent, Language）を収集 - JSONL / Markdown 形式を切り替えてコピー - 全アノテーションのスクリーンショットを1枚の画像としてまとめてコピー - アノテーションセットを JSON ファイル（tegakari-annotations-*.json）として書き出し / 読み込み（共有・バックアップ） - URLパターン別のプレフィックス設定（例: [repo=my-app]） - アノテーションをURL単位で永続化（ページ再読み込み後も復元） - ダーク / ライトテーマ対応 ■ こんな方におすすめ - AIエディタにUIの修正を依頼することが多いフロントエンドエンジニア - 「どの要素か」を言葉で説明するのが面倒な方 - コンポーネント階層やPropsをすばやく把握したい方 ■ プライバシー 収集した情報はすべてブラウザ内（ローカル）で処理され、外部サーバーには 一切送信されません。アナリティクスや広告、トラッキングも行いません。 オープンソースで開発しています。 GitHub: https://github.com/iemong/tegakari
詳細
- バージョン0.0.6
- 更新:2026年7月21日
- 提供元kiyoshidainagon
- サイズ228KiB
- 言語2 言語
- デベロッパーiemong
メール
kiyoshidainagon@gmail.com - 非取引業者このデベロッパーは取引業者として申告していません。EU 加盟国の消費者とこのデベロッパーとの間に締結された契約には、消費者の権利が適用されません。
プライバシー
このデベロッパーは、お客様のデータについて以下を宣言しています
- 承認されている以外の用途で第三者に販売しないこと
- アイテムの中心機能と関係のない目的で使用または転送しないこと
- 信用力を判断する目的または融資目的で使用または転送しないこと
サポート
質問や提案、問題がある場合は、デベロッパーのサポートサイトにアクセスしてください。
