本ページでは、Chrome拡張機能の開発方法について解説します。
拡張機能の開発において最低限知っておくべき基本的な情報をまとめたもので、初心者向けの内容となっています。
Chrome拡張機能の基本構造
Chrome拡張機能はManifest File (JSON)を中心に、Javascript、HTML、css、pngなどのファイルで構成されます。
これらのファイルを一つのフォルダにまとめたものが一つの拡張機能となります。
以下は、Chrome拡張機能の基本的な構造となります。
なお、manifest.json以外のフォルダやファイルは任意の名前をつけることができます。
folder/(拡張機能のルートフォルダ)
└ manifest.json ← 拡張機能のManifest File(JSON)
└ js/(スクリプト用のフォルダ)
└ script.js ← 拡張機能で実行するスクリプト(Javascript)
└ icons/(アイコン用のフォルダ)
└ icon.png ← 拡張機能のアイコン(png)
このフォルダをzip形式で圧縮しアップロードすることで、ストアで公開することができます。
Manifest File
Chrome拡張機能ではManifest Fileを必ず用意する必要があります。
具体的には、manifest.jsonという名前のJSONファイルを、拡張機能のルートフォルダに配置します。
Manifest Fileはその拡張機能に関する情報がJSON形式で記されたファイルです。
このファイルには、拡張機能の名前、バージョン、作成者名、説明、アイコン画像、実行するスクリプトや表示させるページ、Chrome APIを用いるためのアクセス許可設定などを記述します。
以下は、Manifest Fileの記述例です。
※ここでは便宜上コメントを付与していますが、実際に記述する際はコメントがあるとエラーとなりますのでご注意下さい。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
{ "manifest_version": 3, // マニフェストのバージョン。(現在有効なバージョンは3なので、とりあえず3と記述しておけばOK) "name": "自作の拡張機能", // 拡張機能の名称 "version": "1.0.0", // 拡張機能のバージョン "author": "作成者名", // 拡張機能の作成者名 "description": "自分で開発したオリジナルの拡張機能です。", // 拡張機能の説明文 "icons": { "16": "icons/16.png", // 拡張機能のアイコン(サイズ毎のアイコンファイルを用意) "48": "icons/48.png", "128": "icons/128.png" }, "content_scripts": [{ "matches": ["https://www.example.com/*"], // Content Scriptを実行するURL "js": ["js/script.js"] // 上記URLへのアクセス時に実行されるスクリプト }], "action": { "default_title": "自作の拡張機能", // 拡張機能のアイコンをホバーしたときに出るテキスト "default_popup": "index.html" // 拡張機能アイコンをクリックしたときに表示されるページ }, "permissions": ["activeTab", "contextMenus", "storage"] // ChromeAPIを使う場合に設定するパーミッション(インストール時に許可が必要。実行時に許可が必要なものはoptional_permissions) } |
Permissions
前項でも触れましたが、拡張機能でChromeAPIを使用する場合はManifest Fileの「permissions」でアクセス許可を設定する必要があります。
以下の表はパーミッションの一例となります。
その他のパーミッションについては、公式ドキュメントをご確認ください。
activeTab | アクティブなタブにアクセスする場合 |
---|---|
bookmarks | ブックマークにアクセスする場合(chrome.bookmarks) |
contextMenus | コンテキストメニューにアクセスする場合(chrome.contextMenu) |
cookies | Cookieにアクセスする場合(chrome.cookies) |
fontSettings | Chromeのフォント設定にアクセスする場合(chrome.fontSettings) |
history | 履歴にアクセスする場合(chrome.history) |
storage | ユーザーデータの保存・読み取りを行う場合(chrome.storage) |
Content Scripts
Chrome拡張機能は、Content Scriptsと呼ばれるスクリプトを任意のページ(Manifest Fileの”matches”で指定したURL)で実行することができます。
なお、Content Scriptsという名前ですが、スクリプト(Javascript)の他にcssを適用することも可能です。
※ここでは便宜上コメントを付与していますが、実際に記述する場合はコメントを付けるとエラーとなりますのでご注意下さい。
1 2 3 4 5 |
"content_scripts": [{ "matches": ["<all_urls>"], // Content Scriptを実行するURL(この場合はあらゆるURLで実行) "js": ["script.js"], // 上記URLへのアクセス時に実行されるスクリプト "css": ["myStyles.css"] // 上記URLへのアクセス時に呼び出されるcssファイル }], |
Content Scriptsで実行されるJavaScriptは、対象ページのDOMへ自由にアクセスすることができますが、対象ページのJavaScriptへは直接アクセスすることができません(ページ内で定義されているJavaScriptの変数や関数へのアクセスは不可)。
また、Chrome APIについても一部のものしか使用することが出来ません。
Background Page(Event Page)
Chrome拡張機能は、Background Pageと呼ばれるバックグラウンドで動くページ(もしくはスクリプト)を持つことができます。
Background Pageでは、継続的に動作させたい処理や重たい計算処理、ファイルのダウンロードなど時間がかかる処理などを行いたい場合に利用します。
Manifest Fileに以下のように記述すると、拡張機能の起動と同時に指定したスクリプトがバックグラウンドで動作を開始します。
※ここでは便宜上コメントを付与していますが、実際に記述する場合はコメントを付けるとエラーとなりますのでご注意下さい。
1 2 3 |
"background": { "service_worker": "background_script.js" // バックグラウンドで動作させるスクリプト }, |
Action
Actionを設定すると、ブラウザの右上に拡張機能のボタンが表示されます。
このボタンは、クリックした時にポップアップを表示させることができます。
表示させるポップアップはhtmlファイルを指定します。
Manifest Fileの記述は以下のようになります。ここで設定したhtmlファイル(popup.html)がポップアップで表示されます。
1 2 3 4 5 6 |
"action": { "default_icon": { "19": "icon19.png" }, "default_popup": "popup.html" } |
公開前の拡張機能をインストールする方法
開発中の動作確認など、ストアへ公開する前に拡張機能をインストールしたい場合があると思います。
公開前の拡張機能をインストールするには、まずChrome設定の「拡張機能の管理」画面へ行き、右上にある「デベロッパーモード」を有効にします。
デベロッパーモードを有効にすると下の画像にあるようなボタンが現れるので、この中の「パッケージ化されていない拡張機能を読み込む」をクリックします。

Chromeのデベロッパーモード
するとフォルダ選択のダイアログが現れるので、ここでインストールしたい拡張機能のルートフォルダを選択するとインストールが完了します。
インストールした拡張機能が正しく動作しない場合は、「拡張機能の管理」画面でエラーボタンが表示されていないか確認します。

エラーボタンが表示された拡張機能
さらに「ビューを検査」のリンクをクリックしてコンソールを表示させ、拡張機能実行時にエラーメッセージが出ないか確認すると良いでしょう。
拡張機能のサンプル
最後に、最小限の構成で作られた拡張機能のサンプルをご紹介します。
ページが読み込まれる度にアラートが表示されるという役に立たない機能ではありますが(笑)、拡張機能の基本を理解するのに役立つかと思います。
まずは「sample_extension」というフォルダを作成し、その中にManifest File(manifest.json)とscript.jsという2つのファイルを作成します。
なお、manifest.jsonとscript.jsの文字コードは共にutf-8で保存してください。
他の文字コードで保存すると、拡張機能のインストールに失敗するので注意が必要です。
sample_extension/(拡張機能のルートフォルダ)
└ manifest.json ← 拡張機能のManifest File(JSON)
└ script.js ← 拡張機能で実行するスクリプト(Javascript)
Manifest File(manifest.json)の中身は、以下のように記述します。
なお、ここでは最小限の構成とするため省略していますが、実際に拡張機能を公開する際には、”author”(作成者名)や”icons”(アイコン)等も設定した方が良いでしょう。
※ここでは便宜上コメントを付与していますが、実際に記述する場合はコメントを付けるとエラーとなりますのでご注意下さい。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
{ "manifest_version": 3, "name": "Sample extension", "version": "1.0.0", "description": "拡張機能のサンプルです。", "content_scripts": [ { "matches": [ "<all_urls>" ], // Content Scriptを実行するURL(この場合はあらゆるURLで実行) "js": [ "script.js" ] // 上記URLへのアクセス時に実行されるスクリプト } ] } |
script.jsの中身は、以下のように記述します。
アラートを表示させるだけなので、たった1行のコードです。
1 |
alert("メッセージのサンプルです。"); |
これで拡張機能のファイルは準備出来たので、これを前項の手順でデベロッパーモードからインストールします。
インストールが完了すると、以下のように拡張機能(Sample extension)が登録されます。

インストールされたSample extension
この拡張機能を有効にした状態で何らかのWebページを開いてみてください。
以下のようなアラートが表示されると思います。

Sample extensionによって表示されたアラート
コメント