【初心者向け🔰】Chrome拡張機能 ハンズオン

# はじめに

Chrome拡張機能をご存知でしょうか。

https://chromewebstore.google.com/?hl=ja

Chrome Web Storeからインストールするだけで、Chromeがより便利になるものです。

具体的には、以下のようなものがあります。

|                                                                                                                                                    |                                                                                                                                                    |
| :------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------: |
| ![スクリーンショット 2024-06-09 18.02.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/2fbf34dd-eb4c-3f8f-46bc-95a0862256e4.png) | ![スクリーンショット 2024-06-09 18.04.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/df66f6bf-67b2-b186-337d-4e572a061c8e.png) |
|                                                        どんな技術スタックが使われているかわかる<br>"Wappalyzer"                                                        |                                                            タブの自動整理をしてくれる<br>"TabTabTab"                                                            |
| ![スクリーンショット 2024-06-09 18.05.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/7d2b851b-24e9-d15c-260d-5e4c803b2ebe.png) | ![スクリーンショット 2024-06-09 18.08.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/796ad2bc-98bd-f533-2666-403622978e5e.png) |
|                                                     選択するだけで翻訳してくれる<br>"Google Translate 拡張機能"                                                      |                               YoutubeやNetflixなどをPicture in Pictureで表示できる<br>"Picture-in-Picture Extension by Google"                               |

<font color="red">このChrome拡張ですが、始めるのはめちゃくちゃ簡単です。</font>

# 最も簡単なChrome 拡張

それでは、Chrome拡張開発を始めましょう。

<font color="red">「超ミニマムで、5分でできる」がテーマです。</font>

ステップは以下のとおりです。
1. ローカルのフォルダーを作成する
2. フォルダーの中に以下のファイルを作る
      - `manifest.json`
      - `popup.html`
3. ファイルを編集する
4. Chromeの設定からフォルダーを読み込む
5. ポップアップを確認する

## 1. フォルダーの作成

Finder・ターミナルなどなんでもいいので、自分のPCにフォルダーを作成します。

ターミナルで作成する場合

```zsh
% mkdir kantan_chrome_ex
```

## 2. ファイルの作成

方法はなんでもいいので、先程のフォルダーの中に`manifest.json`と`popup.html`を作成します。

ターミナルで作成する場合
```zsh
% cd kantan_chrome_ex

% touch manifest.json
% touch popup.html
```

## 3. ファイルの編集

先程のフォルダーをエディタで開きます。

今回はターミナルからVS Code を呼び出しますが、この他の方法・エディタでも大丈夫です。

```zsh
% code .
```

| |
| :---: |
| ![スクリーンショット 2024-06-09 18.49.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/c93b0403-8705-53de-b5fd-675d2c6b2c67.png) |
|このような画面になればOKです。|

### `manifest.json`を編集

以下を貼り付けてください。
```json
{
  "manifest_version": 3,
  "name": "かんたんChrome拡張",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html"
  }
}
```

<details><summary>コードの解説</summary>

- `"manifest_version": 3`
  最新（version 3）のマニフェストに準拠します、という宣言
- `"name": "かんたんChrome拡張"`
  拡張機能の名前
- `"version": "1.0"`
  この拡張機能のバージョン。特に気にせず`1.0`で良いです
- `"action"`
  この拡張機能の、ツールバーでの外観・機能を定義します
- "default_popup": "popup.html"
  「デフォルトのポップアップ表示に、`popup.html`を使用します」という定義
</details>

### `popup.html`を編集

以下を貼り付けてください。
```html
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    Hello, world!
  </body>
</html>
```

## 4. フォルダーを読み込む

Chrome の 拡張機能 管理画面 を開きます。

| | |
|:---:|:---:|
|![スクリーンショット 2024-06-09 19.07.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/7103686d-99b8-daff-5f62-3b58f74f229f.png)|![スクリーンショット 2024-06-09 19.16.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/553dbbc4-5eb0-3c1b-0bcc-516a79d78d05.png)|
|1.「拡張機能を管理」をクリック|2.このような画面（chrome://extensions/）が開けばOK|
|![スクリーンショット 2024-06-09 19.16.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/747aaeb4-487b-3f0d-61d1-2716c3238ce3.png)|![スクリーンショット 2024-06-09 19.17.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/faddac33-dfb5-37ea-ced2-efedcaa73a34.png)|
| 3.デベロッパーモードをONにする | 4.「パッケージ化されていない拡張機能を読み込む」→先程のフォルダーを選択|
|![スクリーンショット 2024-06-09 19.21.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/880383d3-0154-4816-224e-5557af10a0dc.png)| |
| 5.「かんたんChrome拡張機能」が表示されていればOK |

## 5. ポップアップを確認する
| | |
|:---:|:---:|
|![スクリーンショット 2024-06-09 19.26.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/546faa9f-7312-ea2d-3b17-f15bf3f679b8.png)|![スクリーンショット 2024-06-09 19.27.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/a30aef56-4a05-1fd0-e935-f60a1f23da85.png)|
|1.「詳細」をクリック|2.「ツールバーに固定する」をON|
|![スクリーンショット 2024-06-09 19.29.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/d46836a8-1447-60c7-bd78-77901b8aab0a.png)|![スクリーンショット 2024-06-09 19.29.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/dfbed5c7-1cb5-5638-bca4-75042f115708.png)|
|3.右上に表示されているのを確認し、クリック|4."Hello, world!"と表示されているのを確認|

うまく表示されましたか？

<font color="red">これにて（超ミニマム）Chrome拡張機能 作成完了です！</font>


# 【応用】JavaScript / CSS / 日本語表示

最後に、拡張機能を発展させるための簡単なガイドを紹介します。

## JavaScriptを導入する場合
1. jsファイルを作る（仮に`popup.js`とする）
2. `popup.html`で`popup.js`を読み込み

```diff_html
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    Hello, world!
+    <script src="popup.js"></script>
  </body>
</html>
```

## CSSを導入する場合
1. cssファイルを作る（仮に`style.css`とする）
2. `popup.html`で`style.css`を読み込み

```diff_html
<!DOCTYPE html>
<html>
  <head>
+   <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    Hello, world!
  </body>
</html>
```

## 日本語表示に対応する

文字化けを防ぐコードを追加します。

```diff_html
<!DOCTYPE html>
<html>
  <head>
+   <meta charset="UTF-8">
  </head>
  <body>
    Hello, world!
  </body>
</html>
```
# おわりに

以上、超ミニマムでしたが、Chtome拡張機能の作り方でした。

自分のための便利ツールを作れるようになるので、ぜひやってみてください。