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がクリップボードにコピーされれば成功です！

広告

ConoHa WING

初期費用無料の高速クラウドサーバー

最大3,500円還元

詳しく見る →