Media
3 items
Description
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