F
Chrome の拡張機能をテスト・デバッグできるように設定
by futabooo
chrome-devtools-mcp を使用する際に、Chrome に拡張機能を読み込んで有効にした状態でテスト・デバッグできるように設定します。 別プロセスで拡張機能対応の Chrome を起動し、MCP との通信と独立して拡張機能の動作検証ができます。 コード変更後に Chrome を再起動せず拡張機能だけリロードでき、開発サイクルを高速化できます。 Chrome 拡張機能の開発・テストを MCP 環境で行いたい開発者 拡張機能の動作確認をスクリプトで自動化したい方 Playwright などのブラウザ自動化ツールで拡張機能をテストしたい方 このスキルは4つのステップで構成されます。Step 1 では拡張機能つきの Chrome を別プロセスで起動します。コマンドラインは --remote-debugging-port=9223(MCP の 9222 と被らないようする)、--user-data-dir=/tmp/chrome-ext-test(一時ディレクトリで既存プロファイルと分離)、--load-extension=/path/to/dist(ビルド済みフォルダパス指定)、--no-first-run、--no-default-browser-check を含みます。Step 2 で curl http://localhost:9223/json/version で Chrome の起動確認。Step 3 では Playwright で chromium.connectOverCDP('http://localhost:9223') で接続し、chrome://extensions/ にアクセスして拡張機能ID を確認、chrome.developerPrivate API で拡張情報を取得します。Step 4 では chrome.storage.sync.set() で設定を書き込み、対象ページをリロードして拡張機能動作確認。コード変更後はビルド後に拡張機能だけリロードすれば Chrome 再起動は不要です。
テスト