概要
Webブラウザ「Google Chrome」の拡張機能である Chrome extensions を開発する方法についての備忘録
前提
執筆時点では、最新のバージョンは「V3」だったので、このバージョンについての内容で記載する（Manifest V3）。
必要最低限のファイルの用意と、ブラウザに登録する方法までを記載する。
拡張機能をパッケージ化して世の中に公開する方法については触れない。
シリーズ記事
- 拡張機能の概要・作り方（最低限の設定方法） 👈 イマココ
- 子画面がない拡張機能の作り方（Background） ※ 記事作成予定
- 子画面がある拡張機能の作り方（Action） ※ 記事作成予定
- 特定ページで自動処理する拡張機能の作り方（Content Scripts） ※ 記事作成予定
Chrome拡張機能（Chrome extensions）とは
Chrome extensions（クローム・エクステンションズ）とは、Google Chrome 専用のブラウザ拡張機能のことで、Web技術（HTML/CSS/JS）で書かれたプログラムのことです。
Chrome ブラウザの右上のアイコンから選択することで、動作・使用できる「アイツ」のことです。
Chrome ブラウザ専用拡張機能なので、当然、Google Chrome以外では使用できません。
また、拡張機能が使用できるのはPC版のみであり、iOS/Android のChromeブラウザでは拡張機能の使用はできないみたいです（執筆現在）。
ただし、別のスマホアプリやスマホ対応ブラウザを使えば、なんとか無理矢理動かすこともできるようです（正常動作は保証されない）。
技術情報に関する公式サイトは こちら 👈
仕組みと使い方
- 必要なもの
- Google Chrome（Webブラウザ）
- まず、JavaScript (JS) で実現したい処理を作る
- 画面を伴わない場合もあるため、HTML/CSS は必須ではない
- HTML/CSS も使って設定を行えば、右上にサブウィンドウ（子画面）も表示させられる
- manifest.json ファイルというものを用意するだけで、拡張機能としてChromeに登録ができる
- ブラウザの設定画面から、ローカルで開発したソースを読み込むだけで、使用できる
- Developer登録を行えば、作った機能を世界に公開もできる
- 拡張機能のバージョンは、このファイル内の定義
manifest_versionで決まる
作り方❶（子画面が無い拡張機能）
子画面が無く、拡張機能を有効化したら規定の処理を実行するだけの場合
以下のようにフォルダ/ファイルを用意する
- 任意のフォルダ名を用意
- フォルダ内に、manifest.json を作成
- フォルダ内に、任意のファイル名で .js ファイルを作成
manifest ファイルの書き方
最低限必要なもののみ記載する
{
// ********** 必須の設定項目 **********/
"manifest_version": 3, // バージョン V3 を示す
"name": "My Extension", // 任意の拡張機能名
"version": "1.0.0.0", // 拡張機能のバージョン
// ********** 以降、任意の設定項目 **********/
// 処理を登録
"background": {
"service_worker": "任意のファイル名.js" // background.js とかで良い
}
}
登録処理の中身
"background" として登録する任意の処理については、余裕があれば後で、別途、開発記事を作成します。
作り方❷（子画面がある拡張機能）
アイコンを押したら子画面が開くタイプの拡張機能を作る場合
以下のようにフォルダ/ファイルを用意する
- 任意のフォルダ名を用意
- フォルダ内に、manifest.json を作成
- フォルダ内に、任意のファイル名で .html ファイルを作成
- 合わせて、任意のファイル名で .css、 .js ファイルも作成
- ※ CSS、JSファイルは、すべてHTMLファイルに内包するなら用意不要
manifest ファイルの書き方
最低限必要なもののみ記載する
{
// ********** 必須の設定項目 **********/
"manifest_version": 3, // バージョン V3 を示す
"name": "My Extension", // 任意の拡張機能名
"version": "1.0.0.0", // 拡張機能のバージョン
// ********** 以降、任意の設定項目 **********/
// 子画面 （処理を含む） を登録
"action": {
"default_popup": "任意のファイル名.html" // popup.html とかで良い
},
}
登録処理の中身
"action" として登録する任意の画面・処理については、別途、開発記事を作成します。
作り方❸（特定のページで自動実行する拡張機能）
事前に設定したページに画面遷移したら、自動で用意したプログラムが動くタイプの拡張機能を作る場合
以下のようにフォルダ/ファイルを用意する
- 任意のフォルダ名を用意
- フォルダ内に、manifest.json を作成
- フォルダ内に、任意のファイル名で .js ファイルを作成
manifest ファイルの書き方
最低限必要なもののみ記載する
{
// ********** 必須の設定項目 **********/
"manifest_version": 3, // バージョン V3 を示す
"name": "My Extension", // 任意の拡張機能名
"version": "1.0.0.0", // 拡張機能のバージョン
// ********** 以降、任意の設定項目 **********/
// 処理を登録
"content_scripts": [{
"matches": ["https://example.com/"], // 処理を動作させたい Web サイト
"js": [
"任意のファイル名.js" // 検知したら実行する処理. content.js とかで良い
]
}]
}
登録処理の中身
"content_scripts" として登録する任意の画面・処理については、別途、開発記事を作成します。
上記、３つの機能は同時に搭載できる
先に挙げた特徴的な拡張機能は、全て同時に仕様することも可能
{
"manifest_version": 3,
"name": "My Extension",
"version": "1.0.0.0",
// 以下の３つは組み合わせ可能
"background": {
"service_worker": "background.js"
}
"action": {
"default_popup": "popup.html"
},
"content_scripts": [{
"matches": ["https://example.com/"],
"js": [
"content.js"
]
}]
}
その他
拡張機能のアイコンや、拡張機能の説明も自分で設定可能
{
"manifest_version": 3,
"name": "My Extension",
"version": "1.0.0.0",
// 拡張機能 概要
"description": "拡張機能の説明がここにきます",
// 拡張機能 アイコン
"icons": {
"16": "icon16.png",
"32": "icon32.png",
"48": "icon48.png",
"128": "icon128.png"
},
}
アイコンは、同じフォルダもしくは配下のフォルダに格納して呼び出す
作った拡張機能をブラウザに追加する方法
- Chromeブラウザのアドレスバーに
chrome://extensions/と入力してアクセス - ブラウザ画面右上の「デベロッパー モード」というスイッチを ON にする
- 「パッケージ化されていない拡張機能を読み込む」をクリックして、
manifest.jsonが格納されたフォルダを選択 - エラーがあった場合は、読み込み時に「エラー」ボタンが表示され、詳細が確認できる
- 追加した拡張機能はピンマーク（画びょうのアイコン）を有効にすれば、ブラウザの右上に常に表示されるようになる
※ ソースを修正した場合は、リロードアイコンもしくは「更新」ボタンで再読み込みされます
※ 読み込みの時だけ、ソースが設置されているファイルを参照するので、開発ソースの管理場所はご自身で考慮してください
※ 拡張機能をパッケージ化して公開する方法についてはここでは触れません
関連リンク
Google Chrome の GitHub 公開リポジトリに、取得可能なサンプルソースがありました（リンク先のフォルダがそれぞれ１つの拡張機能）
https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/apps/samples