Next.jsでChrome拡張機能のポップアップページを作成する方法

はじめに

この記事は、Next.jsでフロントエンドを開発されていてChrome拡張機能でポップアップページに表示するタイプの拡張機能を作成する方向けの記事となりますので、各種設定は行った上で、追記が必要な箇所に絞って書いていこうと思います！

変更箇所

想定しているファイル構成

.
├── README.md
├── extensions
│   ├── dist
│   └── manifest.json
├── .gitignore
├── next.config.js
├── package.json
└── pages
    └── index.js

動作環境

  "next": "^11.1.2",
  "react": "^17.0.2",
  "react-dom": "^17.0.2",

Chrome 拡張機能側の変更点

manifest.json 追記

ポップアップ画面で表示するhtmlファイルを今回Next.jsで出力したindex.htmlファイルを指定するように変更します！
manifest側のバージョンによって微妙に記入内容が変わりますのでお手元のコードに合わせて記入内容を変更頂ければと思います！

manifest v2

manifest.json

{
  "manifest_version": 2,
  ...
  "browser_action": {
    ...
    "default_popup": "./dist/index.html"
  },
}

manifest v3

manifest.json

{
  "manifest_version": 3,
  ...
  "action": {
    ...
    "default_popup": "./dist/index.html"
  },
}

Next.js 側の変更点

.gitignore 追記

Git側へはNext.jsで動的に生成したファイルをアップする必要はないため、必要に応じて.gitignoreで除外しておきます！

.gitignore

extensions/dist

next.config.js 追記

各種ファイルの参照先が相対参照で生成されるようにコンフィグを変更。

このあとTailwind.cssを導入したりしていく中でうまく動作しないパターンがあり、以下の設定をしてみたところうまく動作したのですが、なぜ設定が必要かを理解できていないため、ご存じの方がいらっしゃったらコメントよろしくお願いします！

next.config.js

module.exports = {
  ...
  assetPrefix: './',
};

package.js 追記

拡張機能用のファイルを生成するためのコマンドをNode.jsに追加します！

package.js

{
  ...
  "scripts": {
    ...
    "export": "next build && next export -o extensions/dist",
  },
}

Next.js で chrome 拡張機能用の html ファイルを生成する方法

動作検証

ページの動作確認は通常のNext.jsの開発と同様にdevで検証できます！

npm

npm run dev

Yarn

yarn dev

拡張機能用ファイル生成

npm

npm run export

Yarn

yarn export

さいごに

想像していたよりも手軽に拡張機能用のページを作成・検証できるので、
Next.jsを触ったことがあって、Chrome拡張機能を開発されている方がいらっしゃれば、
参考になるかと思いますのでぜひ試してみてください！

また、Next.jsやReact.jsのバージョンアップで動作が変わる可能性もありますのでご注意頂ければと思います！

参考

• next.config.js: CDN Support with Asset Prefix | Next.js
• chrome.action - Chrome Developers
• chrome.browserAction - Chrome Developers
• Next.js を使用して Google Chrome の拡張機能を作るとレイアウトとルーティングができるので結構楽に拡張の開発ができる。 - Qiita
• Chrome 拡張機能（マニフェスト v3）と React17 以降の概要