Closed5
ReactでChrome拡張機能を作りたい
たーけ
こちらの記事を参考に作っていきます！
エラーでなかなか進めなかったので、それを共有できれば。
たーけ
yarn dev時のパスのエラー
C:\Users\---\Documents\path\node_modules\@crxjs\vite-plugin\node_modules\fs-extra\lib\mkdirs\utils.js:16
const error = new Error(`Path contains invalid characters: ${pth}`)
^
Error: Path contains invalid characters: C:/Users/---/Documents/path/src/C:\Users\---\Documents\path\dist/content
相対パス・絶対パスの間違いな感じがするが…。
関連Issue
とりあえず、/vite.config.tsを
build: {
- outDir: resolve(__dirname, "dist"),
+ outDir: "/Users/---/Documents/path/dist",
rollupOptions: {
こうすれば動く。
ただし、こうするとyarn buildの時に失敗してしまう。
Windowsのファイルシステムの問題な気がしたので、WSLでやってみたら動いた。
（WSL…Windows内でlinuxを動かすツール。環境構築は以下のリンクなどを参考に。）
今後はWSL上で開発することにする。
たーけservice workerの読み込み失敗
yarn devでサーバーを起動し、options・popupなどを開くとこのような状態になってしまった。
関連Issue
Chromeのバージョンアップが原因らしい。
それに伴って関連するパッケージもアップデートされているので、それを使う。
/package.jsonを手動で書き換えた。（あまり良くないと思うが他のエラーが起きてしまったので…）
"devDependencies": {
- "@crxjs/vite-plugin": "^2.0.0-beta.17",
+ "@crxjs/vite-plugin": "^2.0.0-beta.32",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.4.3",
そのあとyarn install・yarn devで動いた！
たーけ
Denying load of chrome-extension://_extension-id_/vendor/react-refresh.js
Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.
manifest.json内のresources・matches・use_dynamic_urlなどを変えてみたが動かない。
解決
間違えて、現在サーバーを動かしていないフォルダを拡張機能に設定してしまっていた。
複数の拡張機能を同時に作っている方はご注意を！！
たーけ
こちらの記事が更新されていて、使うテンプレートやUIコンポーネントライブラリが変わっていました。
↑に書いたような不具合はおそらく無くなるでしょう。
このスクラップは10日前にクローズされました
ログインするとコメントできます