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

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

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

本題

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

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

この段階のgithub

ファイル構成はこんな感じ

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

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

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

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に出力するという感じです。

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はダウンロードしたモジュール

{
  
  "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というファイルを追加します。

export function sub() {
    console.log("sub");
}

content.js追記

+ 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

{
...
	"content_scripts": [
        {
         	"js": ["dist/js/content.js"],
			"matches": ["https://qiita.com/*"]
		}
    ],
...
	"background": {
		"service_worker": "dist/js/background.js",
		"type": "module"
	}
}

• option.html

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

動作確認

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

この段階のgithub

おまけ

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

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

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

詳しくはこちら

参考文献

https://github.com/TansanMilMil/chrome-extention-template
https://youtu.be/KRIe_9ZD8as