Chrome拡張機能の作り方概要｜Manifest V3とmanifest.jsonの基本構成

この記事の要点

Chrome拡張はHTML/CSS/JavaScriptで作るブラウザ用の小さなアプリ。中心は設定ファイルmanifest.json
現行仕様はManifest V3。manifest_versionは3、バックグラウンドはService Workerで記述する
最小構成はmanifest.json＋アイコン＋（必要に応じて）popup用HTML/JS。フォルダにまとめる
chrome://extensions で「デベロッパーモード」をON→「パッケージ化されていない拡張機能を読み込む」で即テストできる
権限（permissions）は必要最小限に。過剰な権限は審査落ちやユーザー離脱の原因になる
content scriptはWebページにJSを注入、popupはツールバーアイコンのUI、background(SW)は常駐ロジックを担う

概要

Chrome拡張機能は、Google Chromeに機能を追加する小さなアプリで、HTML・CSS・JavaScriptという普段のWeb制作と同じ技術で作れます。特別な言語やコンパイルは不要で、フォルダにファイルを置いてブラウザに読み込ませるだけで動かせるのが魅力です。中心となるのがmanifest.jsonという設定ファイルで、拡張機能の名前・バージョン・権限・どのファイルを使うかをここで宣言します。本記事では現行仕様Manifest V3を前提に、作成の全体像を解説します。

拡張機能の構成要素

Chrome拡張は、役割の異なるいくつかの部品から成り立ちます。

部品	役割
manifest.json	拡張機能の設計図。名前・バージョン・権限・各ファイルの参照を宣言する必須ファイル
popup（HTML/CSS/JS）	ツールバーのアイコンをクリックしたときに表示される小さなUI
content script	閲覧中のWebページに注入され、ページのDOMを操作するJavaScript
background（Service Worker）	イベント待ち受けや通信などの裏方処理。V3ではService Workerで記述する
アイコン	16×16・48×48・128×128の各サイズを用意する

使い方・手順

1. フォルダとmanifest.jsonを作る
作業用フォルダを作り、中にmanifest.jsonを置きます。最小構成の例は次の通りです（V3）。JSONの文字列はダブルクオートで囲みます。

{
  "manifest_version": 3,
  "name": "My First Extension",
  "version": "1.0",
  "description": "最初のChrome拡張機能",
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon48.png"
  },
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "permissions": ["storage"]
}

2. popup用のHTML/JSを作る
アイコンクリックで開くUIを用意します。

<!-- popup.html -->
<!DOCTYPE html>
<html>
  <body>
    <h1>Hello!</h1>
    <button id="btn">クリック</button>
    <script src="popup.js"></script>
  </body>
</html>

// popup.js
document.getElementById("btn").addEventListener("click", () => {
  alert("ボタンが押されました");
});

3. 拡張機能を読み込む（テスト）

1. アドレスバーに chrome://extensions と入力して開く
2. 右上の「デベロッパーモード」をONにする
3. 「パッケージ化されていない拡張機能を読み込む」をクリック
4. 作成したフォルダを選択する

ツールバーにアイコンが追加され、すぐに動作を確認できます。コードを修正したら拡張機能カードの再読み込みボタンを押せば反映されます。

実用例・Tips

content scriptでページを操作：閲覧中のページにJavaScriptを注入したい場合は、manifest.jsonにcontent_scriptsを宣言します。

"content_scripts": [
  {
    "matches": ["https://*/*"],
    "js": ["content.js"]
  }
]

背景処理はService Workerで：V3では常駐スクリプトの代わりにイベント駆動のService Worker（background.service_worker）を使う。
chrome.storageで保存：設定値はlocalStorageでなくchrome.storage APIを使うと拡張機能全体で共有・同期できる。
公開はChrome Web Store：完成した拡張はZip化してデベロッパー登録後に申請・公開できる。

注意点・落とし穴

Manifest V2は廃止：新規はV3で作る。古い記事のV2記法（background pages等）はそのままでは動かない。
権限の取り過ぎ：permissionsやmatchesを広く取り過ぎると、審査落ちやユーザーの不信につながる。最小限にする。
JSONの構文エラー：manifest.jsonは末尾カンマやコメント不可。崩れていると読み込み時にエラーになる。
アイコンの欠落：指定したアイコンファイルが無いと警告やエラーになる。パスとサイズを揃える。
Service Workerの寿命：V3のSWは常駐せず随時起動・停止する。グローバル変数に状態を持たず、chrome.storage等に保存する。

ページ一覧

その他

Chrome拡張機能の作り方概要｜Manifest V3とmanifest.jsonの基本構成

概要

拡張機能の構成要素

使い方・手順

実用例・Tips

注意点・落とし穴

関連リンク

人気ページ

最近更新/作成されたページ