[Programming] Chrome拡張入門 Hello Worldから学ぶ最小の作り方講座

1. はじめに

以前から興味のあった、Google Chrome の「拡張機能（Extension）」を作成して見たので、その備忘録メモです。

拡張機能とは、ブラウザにあとから小さなプログラムを追加して、自分好みに機能を拡張できる仕組みのこと。

たとえば、こんなことができます。

ページのデザインを書き換える
ワンクリックで翻訳や検索を呼び出す
文字数カウントやメモ機能を追加する
ショートカットキーや右クリックメニューを拡張する

つまり「Chromeを自分専用にカスタマイズできる道具箱」。

仕組みはとてもシンプル。HTML・CSS・JavaScriptが少しわかれば、誰でも自作できます。

今回の記事では、最小構成の「Hello World」拡張を実際に作りながら、その基本を理解していきます。
さらに記事の最後では、**応用編として「ページの背景色を変える拡張」**も紹介します。

2. 必要なファイルは3つだけ

Chrome拡張を作ると聞くと「難しそう…」と思うかもしれません。
でも実は、たった 3つのファイル だけで「Hello World!」拡張が完成します。

作るのはこの3つです：

manifest.json – 拡張の設定ファイル
- 名前、バージョン、どのファイルを使うかを宣言します。
- Chrome拡張にとって“説明書”のような役割です。
popup.html – 拡張アイコンをクリックしたときに表示される小さなウィンドウ
- HTMLで作るので、普通のWebページと同じ要領で書けます。
popup.js – 拡張の処理を記述するJavaScript
- ここに「やりたい動作」を書きます。
- 今回はログ出力や簡単なDOM操作を試します。

この3つをひとつのフォルダにまとめるだけで、もう拡張として読み込めるようになります。
次の章では、この3ファイルを実際に作って「Hello World!」を表示してみましょう。

3. 最小構成の Hello World

では、いよいよ最小のChrome拡張を作ってみましょう。
今回は「拡張アイコンをクリックすると、小さなポップアップで Hello World! と表示される」シンプルな例です。

1) フォルダを作成

任意の場所に新しいフォルダを作り、名前を付けます。
例：

hello-extension

2) manifest.json

このファイルは拡張の設定をまとめた「説明書」です。

{
  "manifest_version": 3,
  "name": "Hello World Extension",
  "version": "1.0",
  "description": "最小構成のHello World Chrome拡張",
  "action": {
    "default_popup": "popup.html"
  }
}

manifest_version: 現在は必ず3を指定
name: 拡張の名前
version: バージョン番号
action.default_popup: アイコンをクリックしたときに表示するHTMLファイル

3) popup.html

拡張アイコンを押すと表示される小さなウィンドウです。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Hello Extension</title>
</head>
<body>
  <h1>Hello World!</h1>
  <script src="popup.js"></script>
</body>
</html>

4) popup.js

ポップアップで実行されるJavaScriptです。

console.log("拡張が正しく動いています！");

ここではコンソールにログを出すだけですが、後でここに処理を追加すれば拡張がどんどん成長していきます。

5) Chromeに読み込む

Chromeで chrome://extensions/ を開く
右上の デベロッパーモード をONにする
「パッケージ化されていない拡張機能を読み込む」をクリック
作ったフォルダ（hello-extension）を選択

ツールバーに拡張アイコンが追加されれば成功です！
クリックすると「Hello World!」の文字が表示されます。

ここまでで 最小の拡張機能が完成しました。
次の章では、これを実際に動かして確認してみましょう。

4. 動作確認

拡張機能を読み込んだら、実際に動かして確認してみましょう。

Chromeのツールバーに新しい拡張アイコン（パズルピースのようなマークの中に表示）が追加されているはずです。
そのアイコンをクリックすると、小さなポップアップが表示され、画面に 「Hello World!」 と出ます。
同時に、開発者ツール（F12 → Console）を開くと、popup.js で書いた
```
拡張が正しく動いています！
```
というログも確認できます。

よくあるつまずきポイント

manifest.json の書き方を間違えると読み込みエラーになる → Chrome拡張はエラーメッセージを詳しく表示してくれるので落ち着いて修正しましょう。
フォルダを更新してもすぐには反映されない → chrome://extensions/ の画面で 「更新」 ボタンを押すとリロードされます。

これで、拡張が インストールされて動く ところまで確認できました

次の章では、もう一歩進んで「ページの内容を書き換える」体験をしてみます。

5. 応用編：背景色チェンジ

「Hello World!」ができたら、次は実際にページを書き換えてみましょう。
ここではシンプルに「拡張アイコンを押したら、今開いているページの背景色を変える」機能を作ります。

1) manifest.json を修正

content_scripts と permissions を追加します。

{
  "manifest_version": 3,
  "name": "Hello World Extension",
  "version": "1.1",
  "description": "最小構成のHello World Chrome拡張 + 背景色チェンジ",
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": ["scripting", "activeTab"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

2) popup.html を少し変更

ボタンを1つ追加します。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Hello Extension</title>
</head>
<body>
  <h1>Hello World!</h1>
  <button id="changeColor">背景色を変える</button>
  <script src="popup.js"></script>
</body>
</html>

3) popup.js

ボタンがクリックされたら content.js を実行するようにします。

document.getElementById("changeColor").addEventListener("click", async () => {
  // 今開いているタブに対して content.js を実行
  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    files: ["content.js"],
  });
});

4) content.js

ページの背景色を変更するスクリプトです。

document.body.style.backgroundColor = "lightyellow";
console.log("背景色を変更しました！");

5) 動作確認

拡張を「更新」してからアイコンをクリック
ポップアップで「背景色を変える」ボタンを押す
開いているページ全体の背景が 淡い黄色 に変われば成功です 🎉

6. まとめ

Chrome拡張は 3ファイル（manifest.json・popup.html・popup.js） だけで作れる
「Hello World」で最小構成を学んだら、content.js を追加して実際にページを操作できる
今回は背景色を変えるだけでしたが、DOMを書き換えたり、スクレイピング的に情報を取得したり、通知を出すなど応用は無限に広がります

これで「Hello World」から「背景色チェンジ」まで、拡張の基本の流れを体験できました。次の記事では オプション画面やストレージAPIの使い方 を解説すれば、さらに実用的な拡張へ成長させられます。

次回

オプション画面 , ストレージAPIの使い方

1. はじめに#

2. 必要なファイルは3つだけ#

3. 最小構成の Hello World#

1) フォルダを作成#

2) manifest.json#

3) popup.html#

4) popup.js#

5) Chromeに読み込む#

4. 動作確認#

よくあるつまずきポイント#

5. 応用編：背景色チェンジ#

1) manifest.json を修正#

2) popup.html を少し変更#

3) popup.js#

4) content.js#

5) 動作確認#

6. まとめ#

次回#

💬 コメント