🧩

Google Chrome拡張機能開発のチュートリアルを実施してみた（Hello World編）

2025/08/06に公開

チュートリアルの概要

Google公式のチュートリアルに取り組みながら、Google Chromeの拡張機能の開発の基礎知識を身につけていきます。

チュートリアルの流れは以下の通りです。

Step 1. マニフェストファイルを作成
Step 2. アイコンをダウンロード
Step 3. ポップアップを作成
Step 4. 拡張機能を読み込む
Step 5. 拡張機能の修正を反映
Step 6. ログを確認

チュートリアル完了後、作成した拡張機能のアイコンをクリックすると以下のように"Hello Extensions"と表示されます。

Step 1. マニフェストファイルを作成

まず、任意の名前のディレクトリを作成して移動します。
これをルートディレクトリとし、拡張機能に必要なドキュメントを格納していきます。
次に、マニフェストファイルを作成します。
マニフェストファイルとは拡張機能のメタデータや構造、挙動を定義する必須のファイルです。
必ずmanifest.jsonという名前でルートディレクトリ直下に配置する必要があります。
今回はルートディレクトリ直下に以下のようなマニフェストファイルを作成します。

manifest.json

{
    "manifest_version": 3,
    "name": "Hello Extensions",
    "version": "1.0",
    "description": "Base Level Extension",
    "action": {
        "default_icon": "hello_extensions.png",
        "default_popup": "hello.html"
    }
}

それぞれのフィールドの意味は以下の通りです。

フィールド	必須/任意	説明
`manifest_version`	必須	マニフェストファイルの形式のバージョン。現在サポートされている値は`3`のみ。
`name`	必須	拡張機能の名称。最大75文字。日本語可。
`version`	必須	拡張機能のバージョン。0〜3個のドットで区切られた整数。
`description`	Google Chromeウェブストアに公開する場合は必須	拡張機能の説明。最大132文字。日本語可。
`action.default_icon`	任意	ツールバー上の拡張機能のアイコンのサイズと相対パスの辞書。Google Chromeがデバイスに合わせてサイズの近いアイコンを選択し、必要に応じてリサイズするため、解像度が気になる場合は複数サイズ用意しておく。今回のようにアイコンを1つだけ指定する場合、サイズと相対パスの辞書ではなく、相対パスの文字列を設定してもよい。
`action.default_popup`	任意	ツールバー上の拡張機能のアイコンをクリックした時に表示されるHTMLファイルの相対パス。

Step 2. アイコンをダウンロード

拡張機能のアイコンを設定します。
画像をチュートリアルサイトからルートディレクトリ直下にダウンロードし、マニフェストファイルで指定したhello_extensions.pngという名前を付けます。

Invoke-WebRequest -Uri "https://developer.chrome.com/static/docs/extensions/get-started/tutorial/hello-world/image/icon.png" -OutFile "hello_extensions.png"

Step 3. ポップアップを作成

ツールバー上で拡張機能のアイコンをクリックした時に"Hello Extensions"と表示するポップアップを作成します。
ファイル名はマニフェストファイルで指定した通りhello.htmlとし、ルートディレクトリ直下に配置します。

hello.html

<html>
    <body>
        <h1>Hello Extensions</h1>
    </body>
</html>

Step 4. 拡張機能を読み込む

拡張機能が完成したので、Google Chromeで読み込んでみましょう。
Google Chromeのアドレスバーにchrome://extensionsと入力し、拡張機能の管理ページを開きます。
「デベロッパーモード」を有効化して「パッケージ化されていない拡張機能を読み込む」をクリックし、ルートディレクトリを選択します。

拡張機能を読み込めたらツールバーにピン留めし、アイコンをクリックすると"Hello Extensions"と表示されます。

Step 5. 拡張機能の修正を反映

拡張機能の名称を変更してみましょう。
マニフェストファイルのnameフィールドの値をHello Extensions of the world!に変更します。

manifest.json

{
    "manifest_version": 3,
    "name": "Hello Extensions of the world!",
    "version": "1.0",
    "description": "Base Level Extension",
    "action": {
        "default_icon": "hello_extensions.png",
        "default_popup": "hello.html"
    }
}

ファイルを修正しただけでは変更は反映されません。^[1]
拡張機能の管理ページにて再読み込みマークをクリックし、名称が変更されたことを確認しましょう。

Step 6. ログを確認

最後に、コンソールにログを出力してみましょう。
拡張機能のアイコンをクリックしてポップアップを表示したらコンソールにログを出力するようファイルを修正します。
ポップアップファイルに<script src="popup.js"></script>を追記します。

hello.html

<html>
    <body>
        <h1>Hello Extensions</h1>
        <script src="popup.js"></script>
    </body>
</html>

そして、helloディレクトリ内に以下のようなスクリプトファイルpopup.jsを作成します。

popup.js

console.log("This is a popup!")

スクリプトファイルを作成できたら、拡張機能のアイコンをクリックして表示されたポップアップを右クリックし、「検証」をクリックします。

DevToolsが開かれたら、コンソールタブに遷移します。
すると、コンソールに"This is a popup!"というログが記録されていることを確認できます。

次に、エラーログを確認してみます。
popup.js内の二重引用符をわざと削除します。