DevTools CSS Diff Assistant

Chrome DevToolsでCSSを編集した際の変更内容を自動検出し、JSON・CSS形式で抽出できます。Elements タブのサイドバーから即座にコピー可能で、AI活用やコード管理に最適です。

DevTools CSS Diff Assistant - Chrome ウェブストア掲載用詳細説明 ========================================== 概要 DevTools CSS Diff Assistant は、 Chrome DevTools で CSS を編集した際の変更内容を自動検出し、 JSON・CSS 形式で即座に抽出できる開発者向け拡張機能です。 AI チャットツールへの受け渡しやコード管理を効率化し、 DevTools での CSS 編集作業を劇的にスピードアップします。 --- 主な機能 リアルタイム検出 ・DevTools の Styles パネルで CSS を編集すると、1 秒ごとに変更を自動検出 ・手動での抽出操作は不要、編集中の変更が即座に表示されます Elements タブに統合 ・DevTools の Elements タブのサイドバーに「CSS Changes」パネルとして表示 ・既存の Computed、Styles パネルと同じエリアに配置されるため、使い慣れた操作感で利用可能 複数の出力形式 ・JSON 形式: AI チャットツール（ChatGPT、Claude など）への受け渡しに最適 ・CSS 形式: そのままコードエディタに貼り付け可能な CSS コード レスポンシブ対応 ・メディアクエリ内の CSS 変更も正確に検出 ・@media ルールを含むセレクタで出力されるため、どのブレークポイントでの変更かが一目瞭然 ワンクリックコピー ・抽出結果をクリップボードに即座にコピー ・AI チャットや Slack への共有が瞬時に完了 初期化機能 ・「Reset Initial State」ボタンで基準状態をいつでもリセット可能 ・複数回の編集セッションで段階的に変更を確認できます --- こんな方におすすめ Web デザイナー・フロントエンドエンジニア ・DevTools で微調整した CSS を本番コードに即座に反映 AI チャット活用派 ・CSS 変更を ChatGPT や Claude に渡してリファクタリングやドキュメント生成 チーム開発者 ・CSS の変更差分を Slack や GitHub Issue で共有 デバッグ作業中の開発者 ・どのプロパティをどう変更したか記録を残したい --- 使い方 基本的な使い方 1. DevTools を開く ・任意の Web ページで F12 キーまたは右クリック →「検証」 2. Elements タブを選択 ・右側のサイドバーに「CSS Changes」パネルが表示されます 3. CSS を編集 ・Styles パネルでプロパティを変更すると、リアルタイムで変更が検出されます 4. 結果をコピー ・「Copy JSON」または「Copy CSS」ボタンで即座にクリップボードへコピー ボタン操作 ・Reset Initial State: 現在の状態を新しい基準として再設定 ・Extract Changes: 即座に変更を抽出（リアルタイム監視と併用可） ・Copy JSON: JSON 形式でコピー（AI チャット向け） ・Copy CSS: CSS 形式でコピー（コードエディタ向け） --- 出力例 JSON 形式 { "body, html": { "min-height": "112vh", "overflow-x": "clip" }, "@media (max-width: 768px) { .header }": { "font-size": "1.5rem", "line-height": "1.8" } } CSS 形式 body, html { min-height: 112vh; overflow-x: clip; } @media (max-width: 768px) { .header { font-size: 1.5rem; line-height: 1.8; } } --- 対応範囲 対応 ・通常の CSS ルール ・メディアクエリ内のルール（@media） ・外部スタイルシート（link タグで読み込んだ CSS） ・インラインスタイルシート（style タグ内の CSS）【v1.1.0 で追加】 ・CSS 変数（var()）を含むショートハンドプロパティ【v1.1.0 で追加】 ・複数セレクタ（, 区切り） 非対応 ・JavaScript 経由で動的に追加されたスタイル（element.style） ・ユーザーエージェントスタイル（ブラウザデフォルトの CSS） --- プライバシーとセキュリティ ・データ収集なし: 個人情報や閲覧履歴は一切収集しません ・外部送信なし: すべての処理はブラウザ内で完結します ・権限最小化: DevTools API のみを使用し、特別な権限は不要です 詳細はプライバシーポリシー（ https://gist.github.com/kei-nishio/201191479ae20eed034639eb4ff65dc8 ）をご覧ください。 --- 活用シーン シーン 1: AI チャットで CSS を最適化 1. DevTools で CSS を微調整 2. 本拡張機能で変更を JSON 形式でコピー 3. ChatGPT に「以下の CSS を最適化して」と指示 シーン 2: チームでデザイン調整を共有 1. デザイナーが DevTools で CSS を調整 2. 変更を CSS 形式でコピーして Slack に投稿 3. エンジニアがそのまま本番コードに反映 シーン 3: 段階的なデバッグ作業 1. 問題箇所を DevTools で修正 2. 「Reset Initial State」で基準を更新 3. 次の問題箇所を修正 → 差分を確認 --- 技術スタック ・Chrome Extensions Manifest V3 ・Chrome DevTools API - chrome.devtools.panels.elements.createSidebarPane() - chrome.devtools.inspectedWindow.eval() ・Vanilla JavaScript（ES6+） ・CSSOM API（CSSStyleSheet, CSSRule） --- サポート ご質問やバグ報告は、以下の連絡先までお願いいたします。 ・GitHub Issues: https://github.com/plutoid-jp/_tool_chrome_dev_tool_css_change/issues ・開発者: Kei Nishio ・メール: contact@plutoid.jp --- ライセンス MIT License --- 最終更新日: 2026 年 3 月 4 日