🔧
Chrome拡張機能+Next.jsで『chrome』未定義のエラーにつまづいた時に試すこと
はじめに
この記事は、Chrome 拡張機能を Next.js で作成したことがある方向けの記事となりますので、各種設定は行った上で、追記が必要な箇所に絞って書いていこうと思います！
今回つまづいたのは、ローカル環境でフロントエンドの動作検証をしている時に『chrome』未定義になり検証ができなかったことがありました。
そのエラーに対応した時の対応内容の備忘録となります。
対応内容
フロントエンドの検証環境で LocalStorage に切り替える方法
修正前
以下のコードの場合、yarn devなどローカルで動作検証する場合にchrome.storageにアクセスできないため、フロントエンドのみ検証したい場合にエラーになってしまいます。
const setExtensionStorage = useCallback(async (key, value) => {
await chrome.storage.local.set(
{
[key]: value,
},
() => {}
);
}, []);
修正後
そのため、以下のとおりchromeオブジェクトを参照できなかった場合に、LocalStorage に切り替えるようにしてエラーを回避しました！
また、合わせて chrome の型を確認する条件分岐を入れたことで、コーディング時のエラーも回避できました。
const setExtensionStorage = useCallback(async (key, value) => {
+ if (typeof chrome !== 'undefined') {
+ if (typeof chrome.storage !== 'undefined') {
await chrome.storage.local.set(
{
[key]: value,
},
() => {}
);
+ } else {
+ localStorage.setItem(key, value);
+ }
}
}, []);
パッケージを利用する方法
以下の記事を参考にして chrome オブジェクトに事前に型を定義しておく方法でも回避ができそうですが、オートコンプリ―ションが聞くという事なので合わせてインストールしました！
Chrome の型を定義したパッケージ @types/chrome を npm で事前にインストールしておきます。これをインストールしておくことで、Visual Studio Code などを使用したときのオートコンプリーションが効くようになり、開発が非常に楽になります。
npm でインストール
npm install --save @types/chrome
yarn でインストール
yarn add @types/chrome
さいごに
Next.js で Chrome 拡張機能を作成するにあたって、拡張機能 独特のお作法に引っ張られて苦戦することがありますので、この記事がみなさんのお役に立てば嬉しいです！
参照記事
@types/chrome | Yarn - Package Manager
Discussion