準備: 開発環境のセットアップ

Chrome拡張機能を作るために必要な準備をしましょう。

必要なもの

1. Google Chrome

Chrome拡張機能を作るには、Google Chromeブラウザが必要です。

ダウンロード: Google Chrome
確認方法: ブラウザの右上の「⋮」メニュー → 「ヘルプ」 → 「Google Chromeについて」

2. テキストエディタ

コードを書くためのエディタが必要です。

おすすめ:

Visual Studio Code: 無料で高機能
Sublime Text: 軽量で高速
Atom: 無料でカスタマイズ可能

Visual Studio Codeのインストール:

Visual Studio Codeをダウンロード
インストールを実行
起動して確認

最初のプロジェクトを作る

1. フォルダを作る

デスクトップや好きな場所にフォルダを作ります。

# 例: デスクトップに「my-first-extension」フォルダを作る

2. ファイルを作る

以下のファイルを作成します：

my-first-extension/
├── manifest.json    # 拡張機能の設定ファイル
├── popup.html       # ポップアップのHTML
├── popup.js         # ポップアップのJavaScript
└── icons/           # アイコンフォルダ
    └── icon.png     # アイコン画像

3. アイコンを用意する

拡張機能のアイコンを用意します。

サイズ: 16x16、48x48、128x128ピクセル
形式: PNG形式
作成方法:
- 画像編集ソフトで作成
- オンラインアイコンジェネレーターを使用
- 無料アイコンサイトからダウンロード

Chromeで拡張機能を読み込む

1. 拡張機能ページを開く

Chromeのアドレスバーに以下を入力：

chrome://extensions/

または、メニューから：

「⋮」メニュー → 「その他のツール」 → 「拡張機能」

2. デベロッパーモードを有効にする

右上の「デベロッパーモード」のトグルをONにします。

3. 拡張機能を読み込む

「パッケージ化されていない拡張機能を読み込む」をクリックして、作成したフォルダを選択します。

動作確認

拡張機能が読み込まれると、以下のように表示されます：

拡張機能のリストに表示される
エラーがないか確認できる
アイコンが表示される

よくあるエラーと対処法

エラー: 「マニフェストファイルが見つかりません」

原因: manifest.jsonファイルがない、または間違った場所にある

対処法:

manifest.jsonファイルが正しい場所にあるか確認
ファイル名が正確か確認（manifest.json）

エラー: 「アイコンが見つかりません」

原因: アイコンファイルが指定した場所にない

対処法:

アイコンファイルが正しい場所にあるか確認
manifest.jsonのパスが正しいか確認

エラー: 「パーミッションが無効です」

原因: manifest.jsonのpermissionsに無効な値が指定されている

対処法:

permissionsの値を確認
Chrome拡張機能の公式ドキュメントで確認

まとめ

開発環境のセットアップ：

Google Chrome: ブラウザをインストール
テキストエディタ: Visual Studio Codeなどをインストール
プロジェクトフォルダ: 拡張機能用のフォルダを作成
ファイル作成: manifest.jsonなどのファイルを作成
読み込み: Chromeで拡張機能を読み込む

準備ができたら、次のステップで最初の拡張機能を作りましょう！