Chrome拡張機能の開発入門｜最小構成から公開まで

Chrome拡張機能の開発に入門するなら、最初に作るのは manifest.json、ポップアップのHTML、アイコン画像の3つだけで足ります。フォルダを1つ作ってこの3つを入れ、Chromeの拡張機能ページで「デベロッパー モード」をオンにして「展開済みを読み込む」を押せば、ツールバーに自分の拡張機能が出ます。ストアへの登録も費用も、この段階では要りません。注意したいのは、検索で出てくる解説の中に、すでに動かなくなった Manifest V2 の書き方が混ざっていることです。この記事では、2026年10月時点の公式ドキュメントで確かめた内容に沿って、最小構成から公開までを順に説明します。

2026年に覚えるのは Manifest V3 だけ

拡張機能の設定ファイルには世代があり、古い Manifest V2 はすでに使えません。Chromeの公式ドキュメントのタイムラインには、2025年7月24日に Chrome 138 で全ユーザーの Manifest V2 拡張機能が無効になり、2026年8月31日に残りの Manifest V2 拡張機能がすべて Chrome ウェブストアから削除されたと書かれています。

Chrome ウェブストアから残りの Manifest V2 拡張機能がすべて削除されました。Chrome 138 以前にインストール済みの拡張機能は引き続き実行されますが、更新を受け取ったり、削除後に再インストールしたりすることはできなくなります。 出典: developer.chrome.com

入門の段階で困るのは、検索結果の記事がどちらの世代で書かれているかが、見出しだけでは分からないことです。見分け方は単純で、サンプルの manifest.json に "manifest_version": 2 と書かれていれば古い資料です。ほかにも、"background" の中に "page" や "scripts" が出てくる、"browser_action" というキーを使っている、という記事は V2 の書き方なので読み飛ばして構いません。V3 では、ツールバーのアイコンは "action"、裏で動く処理は "background" の "service_worker" で指定します。

公式のマニフェストのリファレンスでは、拡張機能として動かすのに必要なキーは "manifest_version"、"name"、"version" の3つで、"manifest_version" に使える値は3のみと書かれています。"name" は最大75文字です。ストアに出す場合は、さらに "description"（最大132文字）と "icons" が必要になります（出典: マニフェスト ファイルの形式）。

最小の拡張機能を3つのファイルで作る

公式の「Hello World」のチュートリアルは、ツールバーのアイコンを押すと「Hello Extensions」と表示されるだけの拡張機能を作ります（出典: Hello World 拡張機能）。入門の最初の1本としてはこれで十分です。手順は次のとおりです。

• 新しいフォルダを1つ作る。名前は自由で、たとえば hello-ext とする
• その中に manifest.json を作り、"name"、"description"、"version"、"manifest_version": 3、"action" を書く。"action" の中には "default_popup": "hello.html" と "default_icon": "hello_extensions.png" を入れる
• アイコンの画像を同じフォルダに入れ、ファイル名を "default_icon" に書いた名前とそろえる
• hello.html を作り、本文に h1 で「Hello Extensions」と書く

これでファイルはそろいました。チュートリアルによると、拡張機能プロジェクトの構造は自由ですが、manifest.json だけは必ずフォルダの一番上に保存する必要があります。フォルダを選ぶときは、manifest.json が直下にあるフォルダそのものを選びます。

Macでの作業なら、エディタはVisual Studio Codeなど普段のもので構いません。公式のチュートリアルでは、npm パッケージの chrome-types を入れると Chrome の API の自動補完が効くと紹介されています。TypeScriptで書きたい場合も、最初の1本はプレーンなJavaScriptで動かしてから移るほうが、つまずいた場所を切り分けやすくなります。

自分のChromeに読み込んで動かす

作ったフォルダは、ストアを通さずに自分のChromeへ読み込めます。チュートリアルの手順を画面の名前どおりに並べると、次のようになります。

• 新しいタブのアドレスバーに chrome://extensions と入力して、拡張機能ページを開く。パズルの形のボタンから「拡張機能を管理」を選んでも同じページに行ける
• 右上の「デベロッパー モード」の切り替えスイッチをオンにする
• 「展開済みを読み込む」ボタンを押し、作ったフォルダを選ぶ

これで拡張機能ページに自分の拡張機能が表示されます。読み込んだ直後は、ツールバーのパズルのボタンの中に入っているので、横のピンのアイコンで固定するとツールバーに常に出るようになります。アイコンを押して「Hello Extensions」が出れば成功です。

コードを書き換えたあとは、拡張機能ページのカードで、オンとオフの切り替えボタンの横にある更新アイコンを押すと反映されます。チュートリアルの表によると、マニフェストと Service Worker を変えたときは再読み込みが必要で、コンテンツ スクリプトを変えたときは拡張機能に加えて対象のページも読み込み直します。ポップアップとオプション ページは、開き直すだけで反映されます。エラーがあるとカードに「エラー」のボタンが出て、押すと内容と行番号が表示されます。チュートリアルでは、わざと閉じ引用符を消したコードで、このボタンの使い方を確認しています。

つまずきやすい Service Worker の寿命

V3 で裏の処理を担うのが Service Worker です。ここで入門者がもっともつまずくのが、Service Worker は常に動いているわけではない、という点です。公式ドキュメントのライフサイクルの説明では、Chrome は次のいずれかの条件で Service Worker を終了すると書かれています（出典: 拡張機能 Service Worker のライフサイクル）。

• 30秒間、操作がない場合。イベントを受け取るか拡張機能のAPIを呼ぶとタイマーは戻る
• イベントやAPI呼び出しなど1回の処理に5分以上かかる場合
• fetch() の応答が届くまでに30秒以上かかる場合

このため、Service Worker の中でグローバル変数に値を入れておく書き方は使えません。終了した時点で変数の中身は消えるからです。ドキュメントでは、グローバル変数の代わりに chrome.storage に保存するよう勧めています。また、Service Worker の中では localStorage などの Web Storage API は使えないと明記されています。

古い解説で「バックグラウンドページにカウンターを持たせる」と書かれている部分は、V3 ではそのまま動きません。入門のうちは「Service Worker は呼ばれたときだけ起きて、用が済んだら寝る」と覚え、値は必ずストレージに書き出す、と決めておくと迷いません。

権限は必要なものだけを書く

拡張機能が何に触れるかは、manifest.json の "permissions" と "host_permissions" で宣言します。"host_permissions" は、操作できるWebページをURLのパターンで指定するキーです。

入門で作りがちなのは、"host_permissions" に全サイトを意味するパターンを書いてしまう例です。動作は確かめやすくなりますが、インストールする人から見ると、すべてのサイトのデータに触れられる拡張機能になります。特定の管理画面だけを操作したいなら、そのドメインだけを書くほうが、使う人も安心して入れられますし、ストアに出すときに目的を説明しやすくなります。

ストアの掲載情報の入力画面には「プライバシー」のタブがあり、拡張機能の単一の目的と、ユーザーデータの扱い方を申告します（出典: Chrome ウェブストアで公開する）。権限を絞っておくと、ここに書く説明も短く済みます。

Chromeウェブストアに公開するまでの流れ

自分だけで使うなら、ここまでの「展開済みを読み込む」で十分です。他の人にも配りたい場合はChromeウェブストアに出します。公式ドキュメントに沿った流れは次のとおりです。

• デベロッパー アカウントを登録する。公式ドキュメントでは、Chromeウェブストアにアイテムを公開するには登録と1回限りの登録料の支払いが必要で、公開専用の新しいメールアカウントを使うことを勧めています（出典: デベロッパー アカウントを登録する）
• 拡張機能のフォルダをZIPにまとめる
• Chrome デベロッパー ダッシュボードで「新しいアイテムを追加」を押し、「ファイルを選択」からZIPをアップロードする
• 「ストアの掲載情報」「プライバシー」「Distribution」の各タブを埋めて、審査に送る

1つのデベロッパー アカウントで公開できる拡張機能は20個までで、上限に達した場合は引き上げを申請できると、公開の手順のページに書かれています。入門で困る数ではありませんが、小さな拡張機能を量産するつもりなら覚えておくとよい制約です。

拡張機能を作る前に確かめたい、別の手段

拡張機能の開発に入門する人の多くは、拡張機能そのものを作りたいわけではなく、毎日使うWebアプリの具体的な不満を直したい人です。取引先の管理画面で毎回同じボタンを探す、通知の帯が邪魔で画面が狭い、Gmailの仕事用と個人用を同時に開きたい、といったものです。

このうち、見た目を変えたいだけ、特定の要素を隠したいだけ、という用途なら、拡張機能を一から作らなくても済む場合があります。Webアプリをまとめるブラウザの中には、アプリごとに自分のCSSとJavaScriptを読み込ませ、ページを開くたびに自動でかけ直す機能を持つものがあり、その仕組みはできることで説明されています。複数のアカウントに同時にログインしたい、という不満は、拡張機能では解決が難しく、ブラウザの側でログイン状態をアプリごとに分ける作りのほうが向いています。その考え方はワークスペースにまとまっています。

逆に、配布したい、複数のサイトをまたいで処理したい、Chromeを使う同僚にも入れてもらいたい、という場合は、この記事の手順どおりに拡張機能を作るのが正解です。最初の1本は Hello World のまま動かし、次に自分の不満を1つだけ直す機能を足し、Service Worker とストレージの扱いを確かめてから公開に進む、という順番にすると、途中で動かなくなっても原因を絞り込めます。