概要
Manifest versionがv2で作ってちゃんと動いていた自作のChrome拡張機能を、v3仕様にしようとしたところ、うまく動かなくなってしまいました。
その拡張機能は、特定のサイトにボタンを挿入して、それをクリックするとGoogleスプレッドシートにサイトの内容が記録されるというものです。
不具合
特定のサイトにアクセスして挿入されたボタンをクリックしても、スプレッドシートに記録ができなくなっています。ChromeでF12を押して「コンソール」を見たところ、サイトの内容を取得することまではできています。
ページ内の情報を取得、整理する"content.js"はうまくいっているけれど、それをスプレッドシートに送る"background.js"がうまくいっていないように思われます。
やったこと
ファイルはこのようになっています
├─background.js ├─content.js ├─jquery-3.6.0.min.js └─manifest.json
v2からv3に移行するにあたって、それぞれのファイルで変更した箇所を記します。
manifest.json
- "manifest_version": 2 を3にしました。
- "background.scripts"の中に"jquery-3.6.0.min.js"と"background.js"という2つのjsファイルがあったので、このサイトを参考に、"background.js"だけにしました。
- "persistent": false を削除しました。
以下が変更前のmanifest.json のbackcroundです
json
1"background": { 2 "service_worker": [ 3 "jquery-3.6.0.min.js", 4 "background.js" 5 ], 6 "presistent": false 7 }
変更後です。
json
1"background": { 2 "service_worker": 3 "background.js" 4 }
background.js
- 冒頭1行目でjQueryのファイルを読み込むことにしました。
importScripts("jquery-3.6.0.min.js");
それで上記の不具合がでています。
追記
stack overflowには、importScripts("jquery-3.6.0.min.js");
は、$.ajax
を使用していると使えないので代わりにfetch()
を使うとよいと書かれていました。
私の拡張機能のbackground.jsにも$.ajax
使用されているので、fetch()
を使う形で作り変えてみました。
manifest-versionが2のときはちゃんと動きましたが、3になると動かなくなってしまいました。
追記 エラー
ビューを検証 Service Worker では、このようなエラーが出ています。
jquery-3.6.0.min.js:2 Uncaught TypeError: Cannot read properties of undefined (reading 'createElement') at ce (jquery-3.6.0.min.js:2) at jquery-3.6.0.min.js:2 at jquery-3.6.0.min.js:2 at jquery-3.6.0.min.js:2 at jquery-3.6.0.min.js:2 at background.js:2
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。