自作Chrome拡張機能の読み込み手順：デベロッパーモードでの動作確認とデバッグ手法

前回までに、拡張機能の設計ファイル（manifest.json）とメインスクリプト（background.js）が完成しました。

今回は、作成したコードをGoogle Chromeに読み込ませて、実際のブラウザ上で動作テストを行う手順を解説します。

ストアへの申請などをしなくても、Chrome標準の「デベロッパーモード」を使えば、手元のパソコンですぐに自作拡張機能を動かすことができます。

また、思い通りに動かないときの原因調査（デバッグ）のコツも紹介します。

連載目次：右クリックでGoogleカレンダー登録するChrome拡張機能の自作

Chrome拡張機能の読み込み手順とデバッグの確認ポイント

Chromeへの読み込み手順

作成したフォルダをChromeに読み込ませる作業は、わずか数ステップで完了します。

読み込みの3ステップ

Chromeのアドレスバーに chrome://extensions と入力してEnterキーを押し、拡張機能の管理画面を開きます（メニューの「拡張機能」>「拡張機能を管理」からもアクセス可能）。
画面右上にある 「デベロッパーモード」 のスイッチをONにします。
画面左上に現れる 「パッケージ化されていない拡張機能を読み込む」 ボタンをクリックし、先ほど作成したフォルダ（manifest.json が入っているフォルダ）を選択します。

フォルダを選択すると、拡張機能の一覧に「Quick Add to Google Calendar」がカード形式で追加されます。これでインストール完了です。

さっそく、任意のWebページを開いて動作テストを行ってみましょう。

もしメニューが表示されなかったり、エラーが表示されたりする場合は、以下のポイントをチェックしてください。

チェックポイント1：エラーボタンが表示されていないか

拡張機能カードに赤字で「エラー」ボタンが出ている場合、manifest.json の記述（閉じカッコやカンマの漏れ）に構文エラーがある可能性が高いです。エラーボタンをクリックして詳細な行番号を確認しましょう。

チェックポイント2：テキストを選択した状態で右クリックしているか

今回は contexts: ["selection"] を指定しているため、テキストを一切選択していない状態で右クリックしてもメニューは現れません。必ず文字列をドラッグした状態で右クリックしてください。

チェックポイント3：Service Workerのコンソールログ確認

拡張機能カード内の「ビューを検証：サービスワーカー」というリンクをクリックすると、専用のデベロッパーツール（コンソール）が開きます。JavaScriptの実行エラーが出ている場合はここに表示されます。

background.js や manifest.json を編集した場合は、ブラウザにその変更を教える必要があります。

chrome://extensions 画面に戻り、該当する拡張機能カードの右下にある 「丸い矢印（更新/リロード）アイコン」 を1回クリックするだけで、即座に最新コードが反映されます。

これで、自分だけのオリジナル拡張機能がブラウザ上で完璧に動作するようになりました。

最終回となる次回は、アイコンの設定方法や、GoogleカレンダーのURLパラメータを応用してさらに便利にする拡張テクニックを解説します。