chrome拡張機能開発時、importを使いたい場合の簡単な例(webpack使用)

※投稿者は初心者です。説明不足や間違っているところがあるかもしれませんが悪しからず

chrome拡張機能開発でどうしてもimportを使いたかったけど使えない。色々調べた結果webpackが必須とのことだったので簡単な例を備忘録としてまた同じような悩みを持った人の助力なれば幸いです。

## 本題

githubに作成したものをアップしてるのでご参考ください
こちらはdistのみで拡張機能として動きます。再度webpackを使いたい場合は「node_module」が必要になるので```yarn install```を実行してからwebpackを使ってください

https://github.com/Myuy973/Chrome-Import-Example

### まずは簡単な拡張機能を作っておく

この段階のgithub

https://github.com/Myuy973/Chrome-Import-Example/tree/05968709851b0e50d169c053aefe58ac6a80fde5

ファイル構成はこんな感じ
```
C:.
│  manifest.json
│  option.html
│  README.md
│  webpack.config.js
│
├─css
│      option.css
│
└─js
        background.js
        content.js
        option.js
```
この段階で直下に「webpack.config.js」を加えておく
(中身は空でokです)

### webpackを導入する

webpackは簡単に言えば複数ファイルを実行しやすいように少数ファイルにまとめるモジュールのことです。それだけでなくローカルサーバーを立てることもできるので何かと重宝します。
詳しくわこちら

https://youtu.be/KRIe_9ZD8as

今回はyarnを使わせていただきます。
(yarnはほとんどnpmと同じ機能です。使いたい場合は別途ダウンロードしてください)

まだnode.jsをインストールされてなければこちらを参考にしてください(node.jsの説明も下記にあります)

https://qiita.com/sefoo0104/items/0653c935ea4a4db9dc2b

node.jsの準備ができたらコマンドプロンプトやvscodeのターミナルを開き対象のプロジェクトに移動します。

``` 
C:\Users\~~~\Desktop\chrome-import-example>
```

まず初期化を実行。-yとするとすべての問いにyesで答えたことになります。
```
yarn init -y
```

webpackとwebpack-cliをインストール
```
yarn add -D webpack webpack-cli
```


## webpack実行準備

* webpack.config.js
entryで記述したファイルをoutputで書いたdist/jsに出力するという感じです。
```js
const path = require('path');

module.exports = {
  entry: {
    background: path.join(__dirname, "js/background.js"),
    content: path.join(__dirname, "js/content.js"),
    option: path.join(__dirname, "js/option.js")
  },
  output: {
    path: path.join(__dirname, "dist/js"),
    filename: "[name].js",
  },
};

```

* package.json
devDependenciesはダウンロードしたモジュール
```json
{
  
  "scripts": {
    "webpack": "webpack --mode=production"
  },
  
  "devDependencies": {
    "webpack": "^5.82.1",
    "webpack-cli": "^5.1.1"
  }
}

```
```scripts```これは設定しておくとコマンドを省略して実行できます。
```"webpack":```の名前はなんでもokです
```
// まだ実行しないでください
// 設定前
yarn webpack --mode=mode=production
// 設定後
yarn webpack
```
ちなみに```--mode=production```以外に```--mode=development```があるのですがchrome拡張機能に関してはproductionでしか動かなかったのでこちらのみにしています。
deveplopmentでも動くかもしれませんが方法がわからないため詳しい方がいましたらご教授いただけると幸いです。

## import記述
import機能を実装していきます。

jsフォルダーにsub.jsというファイルを追加します。
```js
export function sub() {
    console.log("sub");
}
```
content.js追記
```diff_javascript
+ import {sub} from "./sub.js"

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if(message["message"] == "to content") {
        console.log("content");
+        sub();
    }
});
```
うまく実行すれば「"content"」のあとに「"sub"」が表示されるはずです。

## webpack実行、各種参照先変更

#### webpack実行
準備ができましたのでwebpackを実行しファイルの変換をしていきます。
```
yarn webpack
```

実行すると直下にdistフォルダーが作成されその中にjsフォルダーに格納された変換済みの.jsファイルがあります。
あとwebpackは複数ファイルを少数ファイルにまとめるという機能でしたが、今回でいうとcontent.jsとsub.jsをひとまとめにし別途background.js、option.jsを出力しているという感じです。

#### 各種参照先変更
* manifest.json
```json
{
...
	"content_scripts": [
        {
         	"js": ["dist/js/content.js"],
			"matches": ["https://qiita.com/*"]
		}
    ],
...
	"background": {
		"service_worker": "dist/js/background.js",
		"type": "module"
	}
}
```

* option.html
```html
    <script src="dist/js/option.js"></script>
</body>
</html>
```

## 動作確認
![2023-05-16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667226/6599edc1-aa24-895d-2f96-9bd281486288.png)

期待通りの結果になったのではないでしょうか。

この段階のgithub

https://github.com/Myuy973/Chrome-Import-Example/tree/cf67b24c602eefc9423f775d5c176c1e02f200ac

## おまけ
今回の例ではもしアプリケーションを共有したいときに「node_module」も共有することになってしまいます。省くにしても少し手間ですよね。
そこで便利なのが「copy-webpack-plugin」です。ダウンロードは```yarn add copy-webpack-plugin```です。簡単に説明するとすでにあるフォルダーを例えばdistの中に丸々コピーできます(以下の例ではpublic)。今回のコードを書き換えると以下のようになります。

https://github.com/Myuy973/Chrome-Import-Example

共有したい場合はdistフォルダーのみでいいため、「node_module」や「package.json」「webpack.config.js」といった余計なものを共有しなくて済みますね。


あとgithubを除いている方は気づいているかもしれませんが「.gitignore」というファイルが密かに追加されています。
これは「.gitignore」に記載されたものは```git add .```に加えないようすることができます。そのため時間のかかる「node_module」を省くことができスムーズに開発を進めることができます。
「node_module」がなく再度生成する必要があれば```yarn install```で再度インストールすることができます。

詳しくはこちら

https://qiita.com/inabe49/items/16ee3d9d1ce68daa9fff

## 参考文献
https://github.com/TansanMilMil/chrome-extention-template
https://youtu.be/KRIe_9ZD8as