chrome拡張のcontent_scriptsで、閲覧中のWebページにajaxCompleteのイベントリスナーをDOM注入したが、これの発火をcontent

実現したいこと

chrome拡張のcontent_scriptsで、閲覧中のWebページにajaxCompleteのイベントリスナーをDOM注入したが、このイベントリスナーが実行されたことをcontent_script側で検知したい。

発生している問題・分からないこと

以下のソースコードで、ajaxCompleteのイベントリスナーが実行されたときに、

console.log('call ajaxComplete');

のログは出力されるが、

console.log( 'callback : ' + $(this).val() );

のログは出力されない。
一方で、対象のWebページの、$('#control_flg')のテキストボックスに対して、直接、手で値を入力すると、

console.log( 'callback : ' + $(this).val() );

のログが出力される。
そもそも何をしたかったかというと、
ajaxCompleteでサーバから取得した値を、content_scriptsに渡して、
さらに、background.jsに渡して値を保存することで、
対象のWebページが画面遷移した後でもその値を取得して使えるようすることです。
これが実現できれば、まったく別のアプローチでも問題ありません。

該当のソースコード

JavaScript、content_scripts
1const injectScript = (filePath, tag) => {
2	var node = document.getElementsByTagName(tag)[0];
3	var script = document.createElement('script');
4	script.setAttribute('type', 'text/javascript');
5	script.setAttribute('src', filePath);
6	node.appendChild(script);
7	var controllFlg = document.createElement('input');
8	controllFlg.setAttribute('id', 'control_flg');
9	controllFlg.setAttribute('type', 'text');
10	controllFlg.setAttribute('value', '0');
11	node.appendChild(controllFlg);
12	$('#control_flg').change(function() {
13		console.log( 'callback : ' + $(this).val() );
14	});
15}
16injectScript(chrome.runtime.getURL('web_accessible_resources.js'), 'body');
17

JavaScript、web_accessible_resources.js
1$(document).ajaxComplete(async function() {
2	console.log('call ajaxComplete');
3	$('#control_flg').change();
4});

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

content scriptと、閲覧中のWebページのJavaScript環境が別のものであることが原因だと思われますが、この両者でイベントを連動させる方法が調べても分かりませんでした。

補足

特になし

行動規範の内容に同意します

回答1件

ベストアンサー

change()でも動きそうな気がしますけど、何かjQuery特有の事情で動かないのかもしれません。

送信側で window.postMessage("foo", "*") を実行し、受信側で window.addEventListener("message", e => { ... }) で待ち受ける
送信側で特定要素の属性や子ノードを書き換えて、受信側でMutationObserverで待ち受ける

などの方法が取れるかと思います。

chrome.webRequest というAPIがありますが、どうやらレスポンスのコンテンツは取得できないみたいですね。

投稿2024/12/18 04:33