Zenn
🔧

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

2021/10/30に公開
Chrome拡張
Next.js
React
tech

はじめに

この記事は、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 以降の概要

GitHubで編集を提案

Discussion