Chrome拡張機能の作り方｜初心者向けの手順と公開方法

Chrome 拡張機能の作り方を、最初の Hello World から、ページを書き換える拡張機能、Chrome ウェブストアでの公開まで順に紹介します。必要なファイル、manifest.json の書き方、公開前に気をつけたいこともまとめました。

毎日使う Web サイトに「ここにボタンがあれば便利なのに」と思ったことはありませんか。Chrome 拡張機能なら、HTML・CSS・JavaScript の知識で、ブラウザに自分の欲しい機能を足せます。

この記事では、Chrome 拡張機能の作り方を、最初の1つを動かすところから、Chrome ウェブストアで公開するところまで順に紹介します。

Chrome 拡張機能とは：ブラウザに機能を足す小さなプログラム

Chrome 拡張機能は、Google Chrome に機能を追加する小さなプログラムです。 Web ページと同じ HTML・CSS・JavaScript で作れるので、Web 制作の経験があれば、新しい言語を覚えずに始められます。

拡張機能でできることの例は次のとおりです。

ツールバーのアイコンをクリックすると、小さな画面（ポップアップ）が開く
開いている Web ページの見た目を変えたり、ボタンを追加したりする
右クリックのメニューに項目を追加する
選んだ文字を、ほかのサービスに送る

個人開発の題材としても手頃で、「自分が毎日困っていること」を解決する小さな拡張機能は、同じ悩みを持つ人にも使ってもらえることがあります。

必要なもの

必要なのは、Chrome と、テキストエディターだけです。 特別な開発ツールのインストールはいりません。

Google Chrome
テキストエディター：VS Code など
HTML・CSS・JavaScript の基本的な知識：分からなければ、AI に書いてもらいながら進めることもできる

Chrome ウェブストアで公開する場合だけ、デベロッパー登録（1回限りの登録料）が必要です。自分で使うだけなら、登録しなくても作って使えます。

最初の拡張機能を作る手順（Hello World）

Chrome の公式ドキュメントにある「Hello World 拡張機能」を例に、最初の1つを動かしてみます。 アイコンをクリックすると「Hello Extensions」と表示される、一番シンプルな拡張機能です。

Chrome for Developers の「Hello World 拡張機能」ページ — 出典：Chrome for Developers「Hello World 拡張機能」（https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world?hl=ja）2026年10月14日撮影

1. フォルダを作る

拡張機能のファイルを入れる、新しいフォルダを1つ作ります。 名前は自由です（例：hello-extension）。

2. manifest.json を書く

manifest.json は、拡張機能の名前や機能を Chrome に伝える設定ファイルです。 フォルダの一番上（ルート）に置く必要があります。

{
  "name": "Hello Extensions",
  "description": "Base Level Extension",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png"
  }
}

項目	意味
`name`	拡張機能の名前
`description`	拡張機能の説明
`version`	バージョン番号。更新するたびに上げる
`manifest_version`	manifest の書式のバージョン。今は 3 を使う
`action`	ツールバーのアイコンと、クリックしたときに開くページ

3. ポップアップのページを作る

アイコンをクリックしたときに表示する hello.html を作ります。

<html>
  <body>
    <h1>Hello Extensions</h1>
  </body>
</html>

アイコン画像（hello_extensions.png）も同じフォルダに置きます。画像がなくても、Chrome が標準のアイコンを使ってくれるので、最初は省略してもかまいません。

4. Chrome に読み込む

作った拡張機能を、Chrome に読み込んで動かします。

Chrome のアドレス欄に chrome://extensions と入力して開く
右上の「デベロッパーモード」をオンにする
「パッケージ化されていない拡張機能を読み込む」（「展開済みを読み込む」）を押し、作ったフォルダを選ぶ

ツールバーの拡張機能のアイコン（パズルのピースの形）から、作った拡張機能を固定すると、アイコンをクリックしてポップアップを開けます。ファイルを書き換えたら、chrome://extensions の画面で再読み込みのボタンを押すと反映されます。

Web ページを書き換える拡張機能を作る

拡張機能らしいことをするなら、開いているページを書き換える「コンテンツスクリプト」を使います。 コンテンツスクリプトは、指定した Web ページの中で動く JavaScript です。

たとえば、すべてのページの見出しの色を変える拡張機能なら、manifest.json に次のように書き足します。

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

そして content.js に、ページを書き換える処理を書きます。

document.querySelectorAll("h1").forEach((el) => {
  el.style.color = "tomato";
});

matches には、拡張機能を動かすページの URL のパターンを書きます。動かすページは、必要なものだけに絞りましょう。すべてのページで動く拡張機能は、ストアの審査や、使う人の安心感の面でも不利になります。

公式ドキュメントには、このほかにも「すべてのページでスクリプトを実行する」「アクティブなタブにスクリプトを挿入する」などのチュートリアルがあり、作りたいものに近い例から始められます。

Chrome ウェブストアで公開する手順

作った拡張機能をほかの人にも使ってもらうなら、Chrome ウェブストアで公開します。 流れは次のとおりです。

1. デベロッパーとして登録する

Chrome デベロッパーダッシュボードで、デベロッパーとして登録します。 公式ドキュメントによると、デベロッパー契約とポリシーに同意したうえで、1回限りの登録料を支払う必要があります。拡張機能に関する大切な連絡が届くので、公開用のメールアドレスを用意しておくことがすすめられています。

2. ZIP ファイルにしてアップロードする

拡張機能のフォルダを ZIP ファイルにまとめ、ダッシュボードの「新しいアイテムを追加」からアップロードします。 manifest.json と ZIP ファイルに問題がなければ、掲載情報の編集画面に進めます。

Chrome for Developers の「Chrome ウェブストアで公開する」ページ — 出典：Chrome for Developers「Chrome ウェブストアで公開する」（https://developer.chrome.com/docs/webstore/publish?hl=ja）2026年10月14日撮影

3. 掲載情報とプライバシーの項目を入力する

ストアに表示する説明文、アイコン、スクリーンショットなどを入力します。 あわせて、「プライバシー」の項目で、拡張機能の目的（単一の目的）と、ユーザーのデータをどう扱うかを申告します。データを集める場合は、プライバシーポリシーも必要になります。書き方はアプリのプライバシーポリシーの作り方を参考にしてください。

4. 審査に送る

「審査のために送信」を押すと、審査が始まります。 審査にかかる時間は、拡張機能の内容によって変わります。審査を通ったら公開され、ストアで検索して見つけてもらえるようになります。審査に通ったあと自動で公開しない設定にした場合は、30日以内に自分で公開する必要があります。

公開する前に気をつけたいこと

拡張機能は、使う人のブラウザの中で動くため、ほかのアプリ以上に信頼が大切です。

権限は必要最小限にする：「すべてのサイトのデータの読み取りと変更」のような強い権限は、本当に必要なときだけにする。権限が多いと、インストールをためらわれる原因になる
目的を1つに絞る：Chrome ウェブストアでは、拡張機能の目的を明確にすることが求められる。機能を詰め込みすぎない
外部のコードを読み込まない：実行するコードは拡張機能の中に含める。Manifest V3 では、外部から読み込んだコードの実行が制限されている
集めたデータの扱いを説明する：ユーザーのデータを外部に送る場合は、何を、何のために送るのかを説明する

まとめ

Chrome 拡張機能は、次の手順で作れます。

フォルダを作り、manifest.json（manifest_version は 3）を書く
ポップアップの HTML や、ページを書き換える JavaScript を作る
chrome://extensions でデベロッパーモードをオンにして読み込む
公開するなら、デベロッパー登録をして ZIP をアップロードし、審査に送る

まずは自分が毎日使うサイトで「ちょっと不便」と思っているところを1つ選んで、それを解決する小さな拡張機能を作ってみてください。

公開した拡張機能は、Devoch に掲載して、使ってくれる人に届けることができます。