Chrome拡張機能は、ブラウザに独自の機能を追加できる強力な仕組みです。「自分だけの便利ツールを作りたい」「業務効率化のためにブラウザをカスタマイズしたい」——そんな方に向けて、Chrome拡張機能の作り方を基礎からわかりやすく解説します。

2024年にManifest V2のサポートが段階的に終了し、2026年現在はManifest V3が標準です。本記事ではManifest V3に完全対応した内容でお届けします。

Chrome拡張機能の基本構造

Chrome拡張機能は、いくつかの決まったファイルで構成されます。まずは全体像を押さえましょう。

manifest.json — 拡張の設計図

manifest.jsonは拡張機能の設定ファイルで、名前・バージョン・権限・使用するスクリプトなどをすべてここに記述します。Manifest V3では"manifest_version": 3を指定します。

Popup — ツールバーアイコンのUI

拡張アイコンをクリックしたときに表示される小さなウィンドウです。HTMLとCSSで自由にデザインでき、JavaScriptで動的な処理も可能です。action.default_popupで指定します。

Content Script — Webページ上で動くスクリプト

閲覧中のWebページのDOMにアクセスできるスクリプトです。ページの内容を読み取ったり、見た目を変えたりする処理に使います。content_scriptsフィールドで対象URLとスクリプトを指定します。

Service Worker（旧Background Script）

Manifest V3では、バックグラウンド処理はService Workerとして動作します。V2時代の常駐型Background Pageとは異なり、イベント駆動で必要なときだけ起動します。APIの呼び出しやメッセージのハブとして使います。

実践：ページタイトルをコピーする拡張を作ろう

それでは、実際に簡単なChrome拡張を作ってみましょう。「現在のページタイトルとURLをワンクリックでクリップボードにコピーする拡張」を作ります。

ステップ1：プロジェクトフォルダを作成

任意の場所にtitle-copierフォルダを作り、以下の3ファイルを用意します。

ステップ2：manifest.jsonを書く

{
  "manifest_version": 3,
  "name": "Title Copier",
  "version": "1.0",
  "description": "ページタイトルとURLをコピーします",
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "48": "icon48.png"
    }
  },
  "permissions": ["activeTab"]
}

activeTab権限を指定すると、ユーザーがアイコンをクリックしたときだけ現在のタブにアクセスできます。最小限の権限でセキュリティ的にも安心です。

ステップ3：popup.htmlを作る

<!DOCTYPE html>
<html>
<head>
  <style>
    body { width: 300px; padding: 16px; font-family: sans-serif; }
    button { width: 100%; padding: 10px; font-size: 14px; cursor: pointer; }
    #result { margin-top: 8px; color: #4caf50; font-size: 13px; }
  </style>
</head>
<body>
  <button id="copy">タイトルとURLをコピー</button>
  <div id="result"></div>
  <script src="popup.js"></script>
</body>
</html>

ステップ4：popup.jsでロジックを実装

document.getElementById('copy').addEventListener('click', async () => {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  const text = `${tab.title}\n${tab.url}`;
  await navigator.clipboard.writeText(text);
  document.getElementById('result').textContent = 'コピーしました！';
});

ステップ5：Chromeに読み込んでテスト

  1. chrome://extensionsを開く
  2. 右上の「デベロッパーモード」をONにする
  3. 「パッケージ化されていない拡張機能を読み込む」をクリック
  4. title-copierフォルダを選択

ツールバーにアイコンが表示されたら、適当なページでクリックしてみましょう。タイトルとURLがクリップボードにコピーされれば成功です！

広告スペース

Manifest V3の注意点

Manifest V2からV3への移行で、いくつか重要な変更があります。

  • Service Workerはイベント駆動 — 常駐しないため、状態の保持にはchrome.storageを使う必要があります。グローバル変数に値を保持しても、次回起動時にはリセットされます。
  • リモートコードの実行禁止 — CDNからJSを読み込んで実行することができなくなりました。すべてのコードを拡張パッケージ内に含める必要があります。
  • host_permissionsの分離 — V2ではpermissionsにURLパターンを含めていましたが、V3ではhost_permissionsという別フィールドに分離されました。
  • PromiseベースのAPI — 多くのChrome APIがPromise対応になり、async/awaitで書けるようになりました。コールバック地獄から解放されます。

Chrome Web Storeへの公開手順

拡張機能が完成したら、Chrome Web Storeで公開して世界中のユーザーに届けましょう。

  1. デベロッパーアカウント登録 — Chrome Web Store Developer Dashboardで登録。初回のみ$5の登録料が必要です。
  2. ZIPファイルを作成 — 拡張フォルダの中身をZIPに圧縮します（フォルダ自体ではなく中身を）。
  3. ダッシュボードからアップロード — ZIPをアップロードし、説明文・スクリーンショット・カテゴリなどのストア情報を入力します。
  4. 審査を待つ — Googleの審査は通常数日〜1週間程度。権限が少ないシンプルな拡張ほど早く通過する傾向があります。

プライバシーポリシーの掲載が必要な場合もあるため、ユーザーデータを扱う拡張では事前に用意しておきましょう。

デバッグのコツ

Chrome拡張の開発では、効率的なデバッグが重要です。

  • Popupのデバッグ — ポップアップ上で右クリック→「検証」でDevToolsが開きます。console.logの出力もここで確認できます。
  • Service Workerのデバッグ — chrome://extensionsの拡張カードにある「Service Worker」リンクをクリックするとDevToolsが開きます。
  • Content Scriptのデバッグ — 通常のページのDevTools（F12）で確認できます。Sourcesパネルの「Content scripts」セクションにファイルが表示されます。
  • エラーの確認 — chrome://extensionsで「エラー」ボタンが表示されたらクリックして詳細を確認。パーミッション不足やファイルパスの間違いが多い原因です。
  • ホットリロード — コードを変更したら、chrome://extensionsで拡張の更新ボタン（🔄）をクリック。ポップアップは閉じて開き直す必要があります。

まとめ

Chrome拡張機能の開発は、Web技術（HTML・CSS・JavaScript）の知識があれば誰でも始められます。Manifest V3への移行で一部のAPIに変更がありましたが、基本的な開発フローはシンプルです。

まずは今回紹介した「ページタイトルコピー拡張」のような小さなツールから始めて、徐々にContent ScriptやService Workerを活用した高度な拡張に挑戦してみてください。自分専用のブラウザツールを作れるようになると、日々の作業効率が格段に上がります。

Chrome拡張機能開発の世界へようこそ！

広告スペース