Google Chrome 拡張機能（Chrome extensions V3）の作り方

## 概要
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ブラウザでは拡張機能の使用はできない**みたいです（執筆現在）。
ただし、別のスマホアプリやスマホ対応ブラウザを使えば、なんとか無理矢理動かすこともできるようです（正常動作は保証されない）。
![スクリーンショット 2022-10-02 17.40.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199602/f48ed1ae-346b-b4f2-91e7-a298e86dbd02.png)
技術情報に関する公式サイトは [こちら](https://developer.chrome.com/docs/extensions/) 👈

## 仕組みと使い方

- 必要なもの
- Google Chrome（Webブラウザ）
- まず、JavaScript (JS) で実現したい処理を作る
  - 画面を伴わない場合もあるため、HTML/CSS は必須ではない
  - HTML/CSS も使って設定を行えば、右上にサブウィンドウ（子画面）も表示させられる
- manifest.json ファイルというものを用意するだけで、拡張機能としてChromeに登録ができる
  - ブラウザの設定画面から、ローカルで開発したソースを読み込むだけで、使用できる
  - Developer登録を行えば、作った機能を世界に公開もできる
  - 拡張機能のバージョンは、このファイル内の定義 `manifest_version` で決まる

## 作り方❶（子画面が無い拡張機能）
子画面が無く、拡張機能を有効化したら規定の処理を実行するだけの場合

以下のようにフォルダ/ファイルを用意する
![スクリーンショット 2022-10-02 22.10.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199602/7e485d3c-3be1-2610-0174-7558f1f2e03b.png)

- 任意のフォルダ名を用意
- フォルダ内に、manifest.json を作成
- フォルダ内に、任意のファイル名で .js ファイルを作成

### manifest ファイルの書き方
最低限必要なもののみ記載する

```json-doc:manifest.json
{
  // ********** 必須の設定項目 **********/
  "manifest_version": 3, // バージョン V3 を示す
  "name": "My Extension", // 任意の拡張機能名
  "version": "1.0.0.0", // 拡張機能のバージョン

  // ********** 以降、任意の設定項目 **********/
  // 処理を登録
  "background": {
    "service_worker": "任意のファイル名.js" // background.js とかで良い
  }
}
```

### 登録処理の中身
`"background"` として登録する任意の処理については、余裕があれば後で、別途、開発記事を作成します。

## 作り方❷（子画面がある拡張機能）
アイコンを押したら子画面が開くタイプの拡張機能を作る場合

以下のようにフォルダ/ファイルを用意する
![スクリーンショット 2022-10-02 22.27.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199602/05bf64b5-60a2-e5b5-f6a1-769b9f451344.png)

- 任意のフォルダ名を用意
- フォルダ内に、manifest.json を作成
- フォルダ内に、任意のファイル名で .html ファイルを作成
  - 合わせて、任意のファイル名で .css、 .js ファイルも作成 
  - ※ CSS、JSファイルは、すべてHTMLファイルに内包するなら用意不要

### manifest ファイルの書き方
最低限必要なもののみ記載する

```json-doc:manifest.json
{
  // ********** 必須の設定項目 **********/
  "manifest_version": 3, // バージョン V3 を示す
  "name": "My Extension", // 任意の拡張機能名
  "version": "1.0.0.0", // 拡張機能のバージョン

  // ********** 以降、任意の設定項目 **********/
  // 子画面 （処理を含む） を登録
  "action": {
    "default_popup": "任意のファイル名.html" // popup.html とかで良い
  },
}
```

### 登録処理の中身
`"action"` として登録する任意の画面・処理については、別途、開発記事を作成します。

## 作り方❸（特定のページで自動実行する拡張機能）
事前に設定したページに画面遷移したら、自動で用意したプログラムが動くタイプの拡張機能を作る場合

以下のようにフォルダ/ファイルを用意する
![スクリーンショット 2022-10-02 22.10.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199602/7e485d3c-3be1-2610-0174-7558f1f2e03b.png)

- 任意のフォルダ名を用意
- フォルダ内に、manifest.json を作成
- フォルダ内に、任意のファイル名で .js ファイルを作成

### manifest ファイルの書き方
最低限必要なもののみ記載する

```json-doc:manifest.json
{
  // ********** 必須の設定項目 **********/
  "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"` として登録する任意の画面・処理については、別途、開発記事を作成します。

## 上記、３つの機能は同時に搭載できる
先に挙げた特徴的な拡張機能は、全て同時に仕様することも可能

```json-doc:manifest.json
{
  "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" 
    ]
  }]
}
```

## その他

拡張機能のアイコンや、拡張機能の説明も自分で設定可能

```json-doc:manifest.json
{
  "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