Chrome拡張機能の作り方をわかりやすく解説【超入門】

Google Chromeには「Chrome拡張機能（Chrome Extension）」というブラウザに便利な機能を後から追加できる仕組みがあります。

実はこのChrome拡張機能、インストールして使うだけでなく自分で作ることもできるのをご存じでしょうか？

自作すれば、たとえばこんなことが簡単に実現できます。

• 作業効率をアップする便利機能を追加したい
• よく使うWeb操作をワンクリックで自動化したい
• 自分専用の便利ツールを作りたい

「難しそう…」と感じるかもしれませんが、心配ありません。

この記事では、『最もシンプルな構成でChrome拡張機能を作る方法』を初心者にもわかりやすく解説します。

この記事の手順通りに進めるだけで、数分後にはあなたのPCで動くオリジナルのChrome拡張機能が完成します。

Chrome拡張機能とは？

Chrome拡張機能（Chrome Extension）は、Google Chromeに便利な機能を後から追加できるアプリケーションです。

たとえば、以下のような機能を追加できます。

• Webページのデザインを自由に変える
• クリック1つでメニューやポップアップを表示させる
• ページの文章を書き換える
• APIと連携して情報を表示する
• よく使う作業を自動化して作業効率アップさせる

このChrome拡張機能はインストールして使うだけでなく、自分専用のChrome拡張機能を自作することも可能です。公開しなければ、あなたのPCだけで使える「非公開のChrome拡張機能」として活用できます。

Chrome拡張機能を作るために必要なもの

Chrome拡張機能を作るために必要なものは、とてもシンプルです。以下の2つだけあれば、すぐに開発を始められます。

• Google Chrome（ブラウザ）
• テキストエディタ（VSCodeなど）

また、Chrome拡張機能は目的に応じて複数のファイルで構成されます。

「JavaScriptファイル」と「manifest.json（設定ファイル）」だけあれば、最小構成のChrome拡張機能が作れます。初心者でも始めやすいのがChrome拡張機能の魅力です。

Chrome拡張機能の作り方

ここでは「JavaScriptファイル」と「manifest.json（設定ファイル）」の2つで動く、最もシンプルなChrome拡張機能を作ります。作り方の手順を以下に示します。

これから各手順について順番に説明してきます。

フォルダを作成する

まず、拡張機能用のフォルダを作ります。以下のような構成にしてください。

my-extension/
 ├─ manifest.json
 └─ content.js

manifest.json（設定ファイル）を作成する

manifest.jsonはChrome拡張機能の設定を書く重要なファイルです。

以下をそのままコピーして保存してください。

{
  "manifest_version": 3,
  "name": "Simple Chrome Extension",
  "version": "1.0",
  "description": "JavaScriptとmanifestだけで動く拡張機能。",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

今回、matchesで"<all_urls>"を指定しているため、すべてのWebサイトで「JavaScriptファイル（content.js）」が実行されます。

JavaScriptファイル（content.js）を作成する

以下を「JavaScriptファイル（content.js）」にコピーして保存してください。

document.body.style.backgroundColor = "lightyellow";

これだけで、表示中ページの背景色が淡い黄色になります。ここのJavaScriptを好きな処理に変更すれば、自由な動作を作ることができますが、今回はシンプルなChrome拡張機能を作成するので、1行のみにしています。

Chromeに拡張機能を追加する

ここが初心者が一番つまずきやすいポイントです。手順通りに進めれば問題ありません。

まずChromeを開き、URLバーにchrome://extensions/を入力します。

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

左上の「パッケージ化されていない拡張機能を読み込む」をクリックします。

フォルダ選択ダイアログが表示されるので、作成したフォルダ（my-extension）を選択します。

これでChromeに拡張機能が追加されます。

【補足】追加した拡張機能を動作確認する

任意のWebサイトを開いてみてください。背景が黄色になれば成功です。「JavaScriptファイル（content.js）」と「manifest.json（設定ファイル）」の2ファイルだけで、動くChrome拡張機能が完成しました。

Chrome拡張機能のポイント

Chrome拡張機能を作るときに、必ず理解しておきたいのが次の4つの要素です。

• manifest.json（設定ファイル）
• Content Script（ページに介入するスクリプト）
• Toolbar Action（拡張アイコンの操作）
• Service Worker（バックグラウンド処理）

ここでは、それぞれの役割と使い方をわかりやすく説明します。

manifest.json（設定ファイル）

manifest.jsonは拡張機能の「すべての設定」を記述する最重要ファイルです。

• どんなファイルを使うか
• どの機能を有効にするか
• どの条件で動作させるか

といった情報をすべてmanifest.jsonに書きます。

はじめて見ると少し難しく感じますが、フォーマットは決まっているので慣れるとスムーズです。

Content script

Content Script（コンテントスクリプト）は、Chrome拡張機能の中でWebページの内容（DOM）にアクセスできる唯一の仕組みです。

• ページのテキストを取得したい
• ページのデザインを変えたい
• HTML要素を操作したい

といった「ページに直接触れる処理」はすべてContent Scriptが担当します。

Content Scriptは、通常のWebページ上で実行されるJavaScriptとほぼ同じようにDOMを操作できます。

たとえば、Content Scriptを使うと次のような機能を追加できます。

• ページ内のテキストを取得
  • const title = document.querySelector("h1")?.innerText;
• 要素を書き換え
  • document.body.style.backgroundColor = "lightyellow";
• クリックイベントを監視
  • document.addEventListener("click", () => console.log("clicked!"));
• ページの見た目を変更
  • document.body.style.fontSize = "20px";

なお、Content ScriptはWebページ内で動作しますが、表示しているページとは別のJavaScriptコンテキストで実行されます。そのため、表示ページのwindowオブジェクトに直接アクセスすることはできません。

Content Scriptを利用するには、manifest.jsonに「どのURLで」「どのJavascriptを」動かすかを記述する必要があります。Content Scriptの設定例を以下に示します。

{
  "manifest_version": 3,
  "name": "Simple Chrome Extension",
  "version": "1.0",
  "description": "JavaScriptとmanifestだけで動く拡張機能。",
  "content_scripts": [
    {
      "matches": ["https://example.com/*"],
      "js": ["content.js"],
      "run_at": "document_end"
    }
  ]
}

run_atで指定できるdocument_start / document_end / document_idleの違いを以下に示します。

Toolbar Action（拡張アイコンの操作）

Toolbar Action（ツールバーアクション）は、Chromeの右上にある拡張機能アイコン（パズルマークの一覧）に表示される自分の拡張機能のアイコンを操作する仕組みです。

通常、インストールした拡張機能はパズルマークの中に表示されます。その中の「拡張機能のアイコン」をアクションアイコンと呼びます。

Chrome拡張機能を「ユーザーの操作に反応するUI」として使いたい場合、このToolbar Actionが重要です。Toolbar Actionを使うと、拡張機能のUIを作ることができます。

たとえば、Toolbar Actionを使うと次のような機能を追加できます。

• アイコンをクリックするとポップアップを表示
• バッジ（数字・ラベル・色付きの通知）を表示
• ポップアップ内ボタン → Content Scriptへ命令を送る
• 拡張機能全体のメニュー画面として利用
• アイコン自体の見た目（画像）を切り替える

Toolbar Actionはmanifest.jsonのactionプロパティで設定します。設定例を以下に示します。

{
  "manifest_version": 3,
  "name": "Simple Chrome Extension",
  "version": "1.0",
  "description": "拡張アイコンをクリックするとポップアップを表示するシンプルなChrome拡張機能。",
  "action": {
    "default_popup": "popup.html",
    "default_title": "拡張機能のポップアップ",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  }
}

上記の設定例ではmanifest.jsonと同じディレクトリにimagesディレクトリを用意し、その中に3種類のサイズでアイコンを格納していることを想定しています。

default_popupで指定しているpopup.htmlの例を以下に示します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Popup</title>
</head>
<body>
  <button id="btn">実行</button>

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

popup.htmlではボタンをクリックすると、popup.jsを実行しています。popup.jsを以下のように実装すると、ボタンクリック時にアラートが発生するようになります。

document.getElementById("btn").addEventListener("click", () => {
  alert("クリックされました");
});

Service Worker（バックグラウンドで動くスクリプト）

Service Workerは、Chrome拡張機能の「裏で動くスクリプト」です。ページとは独立して動作し、拡張機能全体の管理やイベント処理を担当します。

たとえば、Service Workerを使うと次のような機能を追加できます。

• 拡張アイコン（Toolbar Action）のクリックを検知
• Content Scriptとのメッセージ送受信
• APIの呼び出し
• 定期処理（アラーム）
• ストレージへのデータ保存
• 拡張機能のインストール時の初期処理

ページ操作ができない代わりに、全体の動きを管理するのが得意です。

Service Workerはmanifest.jsonのbackgroundプロパティで設定します。設定例を以下に示します。

{
  "manifest_version": 3,
  "name": "Simple Chrome Extension",
  "version": "1.0",
  "description": "バックグラウンドで動作する Service Worker を利用したシンプルな拡張機能。",
  "background": {
    "service_worker": "background.js"
  }
}

service_workerで指定しているbackground.jsの例を以下に示します。以下のJavaScriptでは拡張アイコンをクリックすると、ログを出力するようにしています。

// 拡張アイコンをクリックしたときのイベント
chrome.action.onClicked.addListener((tab) => {
  console.log("アイコンがクリックされました");
});

本記事のまとめ

この記事では『Chrome拡張機能を作る方法』を説明しました。

Chrome拡張機能は、一度仕組みを理解すれば誰でも簡単に作れる「小さなアプリケーション」です。今回紹介したように、JavaScriptファイルとmanifest.jsonの2つだけでも、実際に動く拡張機能を作ることができます。

ぜひこの記事をきっかけに、あなたのブラウザをもっと便利にする「自作のChrome拡張機能」を作ってみてください。

お読みいただきありがとうございました。