Overview
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
Details
- Version0.0.6
- UpdatedJuly 21, 2026
- Offered bykiyoshidainagon
- Size228KiB
- Languages2 languages
- Developeriemong
Email
kiyoshidainagon@gmail.com - Non-traderThis developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.
Privacy
This developer declares that your data is
- Not being sold to third parties, outside of the approved use cases
- Not being used or transferred for purposes that are unrelated to the item's core functionality
- Not being used or transferred to determine creditworthiness or for lending purposes
Support
For help with questions, suggestions, or problems, visit the developer's support site
