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

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

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

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

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Chrome extension

Chrome拡張機能

Q&A

0回答

1490閲覧

Chrome拡張 background.jsでXMLHttpRequestができない

masd

総合スコア0

JavaScript

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

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Chrome extension

Chrome拡張機能

0グッド

0クリップ

投稿2021/06/01 14:47

前提・実現したいこと

データベースの内容を取得するためbackgroun.jsから,XAMPPサーバーのphpへXMLHttpRequestをしようとしたところ以下のエラーメッセージが発生しました.

発生している問題・エラーメッセージ

Uncaught (in promise) ReferenceError: XMLHttpRequest is not defined

該当のソースコード

background.js

JS

1function count_bbs(id) { 2 var req = new XMLHttpRequest();//ここでエラー 3 req.open("GET", "http://XXX.XXX.XX.X/test_ajax.php?id=" + id, true); 4 req.send(null); 5 req.onreadystatechange = function () { 6 if (req.readyState == 4) { 7 // 通信の完了時 8 if (req.status == 200) { 9 // 通信の成功時 10 var resp = JSON.parse(req.responseText); 11 num = resp.length; 12 chrome.browserAction.setBadgeText({ text: String(num) }); 13 } 14 } 15 }; 16}

試したこと

popup.htmlのスクリプトに同様の機能を実装したところ,
問題なくデータベースにアクセスできたのでサーバー側には問題がないと考えています.

補足情報(FW/ツールのバージョンなど)

{ "name": "TMP_NAME", "manifest_version": 3, "version": "1.0", "action": { "default_title": "TMP_NAME", "default_popup": "popup.html" }, "background": { "service_worker": "background.js" }, "permissions": [ "contextMenus", "tabs" ], "host_permissions": [ "http://XXX.XXX.XX.X/" ], "content_scripts": [ { "js": [ "jquery.min.js", "content_script.js" ], "matches": [ "http://*/*", "https://*/*" ] } ] }

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

itagagaki

2021/06/01 15:37

簡単に試してみましたが、再現しませんでした。 count_bbsをだれがどのタイミングで呼んでいるのかによるかもしれないので、その情報が欲しいのと、 あともう一つ念のため試してみて欲しいのは、他の拡張機能をすべて無効化しても再現するのか、 また、他の拡張機能をすべて削除(無効化ではなく)しても再現するのか、です。
masd

2021/06/01 16:07

ご回答ありがとうございます. 他の拡張機能をすべて削除してもエラーはでました. 呼んでいる元の関数を以下に添付します. ```Javascript async function getCurrentTab() { let queryOptions = { active: true, currentWindow: true }; let [tab] = await chrome.tabs.query(queryOptions); return tab; } chrome.tabs.onActivated.addListener(async function (activeInfo) { var tab = await getCurrentTab(); let url_parts = tab["url"].split("/"); let domain = url_parts[2]; count_bbs(domain); }); ``` やりたい流れとしては, 1.タブを切り替えたタイミングでタブのドメインを取得 ex. "teratail.com" 2.そのドメインの文字列をクエリとしてデータベースを検索 3.ヒットした件数をバッジとして表示 です. この実装だとタブを切り替えるたびに同様のエラーで出ます.
dameo

2021/06/03 00:25

manifest.jsonの ... "background": { "service_worker": "background.js" }, ... が効いており、background.jsはservice workerと認識されており(推奨)、からXMLHttpRequestは使えないようです。 fetch APIを使いましょう。
itagagaki

2021/06/03 15:49

なるほど、私は "manifest_version": 2 で試したのでエラーにならなかったのかな?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問