質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Chrome extension

Chrome拡張機能

解決済

JavaScript ファイルでjQueryのファイルを読み込むのがうまくいかない(Chrome拡張機能のv2からv3への移行がうまくいかない)

tansann
tansann

総合スコア0

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Chrome extension

Chrome拡張機能

1回答

0評価

2クリップ

1175閲覧

投稿2021/12/28 02:27

編集2022/01/04 06:05

概要

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

"background": { "service_worker": [ "jquery-3.6.0.min.js", "background.js" ], "presistent": false }

変更後です。

json

"background": { "service_worker": "background.js" }

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Chrome extension

Chrome拡張機能