Chromeの拡張機能管理ページでの読み込み方法（デベロッパーモード）

Chrome拡張機能をローカルで読み込み、デバッグを行うためには「拡張機能管理ページ（chrome://extensions）」でデベロッパーモードを使用します。以下にその手順を詳しく説明します。

Chromeの拡張機能管理ページでの読み込み方法（デベロッパーモード）

1. 拡張機能の準備

まず、拡張機能を構成するすべてのファイル（manifest.json、popup.html、content_script.js、background.jsなど）を1つのフォルダにまとめておきます。例：

pgsql
my-extension/
├── manifest.json
├── popup.html
├── popup.js
├── content_script.js
└── icons/
    └── icon128.png

2. 拡張機能管理ページを開く

  1. Chromeを起動

  2. アドレスバーに以下を入力して拡張機能管理ページを開く：

    arduino
    chrome://extensions/

  3. ページ右上の 「デベロッパーモード」 を オン にする（スイッチを切り替える）

3. ローカルの拡張機能を読み込む

  1. 「パッケージ化されていない拡張機能を読み込む」ボタンをクリック

  2. ファイル選択ダイアログが表示されるので、拡張機能のルートフォルダ（例：my-extension）を選択して「フォルダを選択」する

→ 正常に読み込まれれば、拡張機能が一覧に追加されます。

4. デバッグ・確認作業

  • 拡張機能の各構成要素に対して「背景ページ（service worker）」や「ポップアップ」の デベロッパーツールを開く ことができます。

    • 例えば、背景ページの右の「service worker」→「inspect」をクリック

    • popup.html については拡張アイコンをクリックしてポップアップを開いた状態で右クリック→「検証」

5. 修正と再読み込み

拡張機能のソースコードを修正した場合、変更内容を反映させるには次の操作が必要です：

  • 拡張機能一覧の中にある「再読み込み（⟳）ボタン」をクリック

  • または、拡張機能フォルダを再読み込みすることで、修正を反映させることができます

補足

  • 読み込む拡張機能フォルダには、必ず manifest.json ファイルが含まれている必要があります。

  • マニフェストファイルの構文やパスの誤りがある場合、読み込み時にエラーメッセージが表示されます。

この手順を使うことで、Chrome拡張機能をローカルで開発・デバッグしながら効率的にテストを行うことができます。

生成日：2025/05/18