新規タブの要素に値を代入できない

Question

前提

JavaScriptの初学者です。
ChromiumであるBrave Browserの拡張機能を作ろうとしたのですが、
思い通りの結果にならず困っております。

実現したい処理というのが、
【拡張機能を起動した時にGoogle翻訳のウェブサイト翻訳機能で現在のURLを翻訳する】
というものです。

現状の問題は、新規タブの要素に値を代入できないことです。
３パターンを試してましたが、エラーの意味がわからず行き詰まっています。
私自身の説明につたないところもあると思いますが、アドバイス頂ければと思います。

実現したいこと

• 拡張機能を起動した時の、現在のタブのURLを取得
• 新しいタブでGoogle翻訳ウェブサイト翻訳機能のページを開く
• フォームに取得したURLを入力し、矢印ボタンを押す
• Google翻訳ウェブサイト翻訳機能のページを閉じる

３つ目の 新規タブの要素に値を代入する時に、色々なエラーが起きます。

試したソースコード

//ソースA
function ElClick(arg) {
	console.log(arg);
	let obj = window.open('https://translate.google.co.jp/?hl=ja&tab=cT&sl=en&tl=ja&op=websites ');
	let timer = setInterval(function () {
		if ($("#i44", obj.document) != undefined) {
			document.getElementById('i44').value = arg;
			obj.document.getElementsByClassName('VfPpkd-Bz112c-LgbsSe yHy1rc eT1oJ DiOXab zhBWDc Pk9dvb')[0].click();
			clearInterval(timer);
		}
	}, 500);
}
chrome.action.onClicked.addListener((tab) => {
	const url = tab.url
	chrome.scripting.executeScript({
		target: { tabId: tab.id },
		function: ElClick,
		args: [url]
	})
})

//ソースB
function _OnLoad() {
	console.log(url);
	document.getElementById('i44').value = url;
	obj.document.getElementsByClassName('VfPpkd-Bz112c-LgbsSe yHy1rc eT1oJ DiOXab zhBWDc Pk9dvb')[0].click();
}
var readStateCheck = function () {
	if (obj.document.readyState == "complete") {
		_OnLoad();
	}
	else {
		setTimeout(readStateCheck, 100);
	}
}
function _OnClick() {
	obj = window.open('https://translate.google.co.jp/?hl=ja&tab=cT&sl=en&tl=ja&op=websites ');
	setTimeout(readStateCheck, 100);
}
chrome.action.onClicked.addListener((tab) => {
	url = tab.url
	chrome.scripting.executeScript({
		target: { tabId: tab.id },
		function: _OnClick
	})
})

//ソースC
function ElClick(arg) {
	let obj = window.open('https://translate.google.co.jp/?hl=ja&tab=cT&sl=en&tl=ja&op=websites');
	obj.addEventListener('load', function () {
		console.log(arg);
		obj.document.getElementById('i44').value = url;
		obj.document.getElementsByClassName('VfPpkd-Bz112c-LgbsSe yHy1rc eT1oJ DiOXab zhBWDc Pk9dvb')[0].click();
	}, false);
}
chrome.action.onClicked.addListener((tab) => {
	const url = tab.url
	chrome.scripting.executeScript({
		target: { tabId: tab.id },
		function: ElClick,
		args: [url]
	})
})

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

//ソースA
Uncaught ReferenceError: $ is not defined

//ソースB
Uncaught ReferenceError: readStateCheck is not defined

//ソースC
エラーメッセージはないが、obj.addEventListener();が動かない

補足情報

manifestのバージョンは3で、background.service_workerを使っています。

Comments

[itagagaki]

Uncaught ReferenceError: $ is not defined
これは $("#i44", obj.document) のことだと思われます。これはJavaScriptにそぐわないです。何かを参考にしましたか？
たぶん obj.document.getElementById('i44') に置き換えれば良さそうな気はしますが。

[jupeeze]

https://honey8823.hateblo.jp/entry/2018/07/30/121744
おっしゃる通り、jQueryの書き方を上記のリンクから真似してしまいました。
置き換えてきます！

[jupeeze]

先述の通り、
if ($("#i44", obj.document) != undefined) { を
if (obj.document.getElementById('i44') != undefined) {
に 置き換えてきましたが、うまくいきません。
Uncaught TypeError: Cannot read properties of undefined (reading 'getElementById')
at <anonymous>:5:20
というErrorが新規タブではなく、最初のタブのConsoleで出力されます。
おそらく 新規タブから要素を探すことができていないと考えたのですが、
なにか対処法はありますか？

[itagagaki]

新しく開かれたタブにスクリプトを挿入すれば、そのスクリプトからそのタブのDOMにアクセスすることが可能になると思います。
ちょうど最近似たような質問に回答したので、その回答が参考になるかもしれません。
https://teratail.com/questions/1h91g27u79z4hv

[itagagaki]

あ、chrome.scripting.executeScript() は使ってるんですね。ただそこでスクリプトを挿入しているタブは、新しく開いたウィンドウのタブではないのでダメなんだと思います。そのタブからさらに新しいウィンドウをオープンしちゃっているわけですよね。

[jupeeze]

新しく開くウィンドウのタブにスクリプトを挿入するにはどうすればいいのでしょうか？
以下のようにしているのですが、targetが存在しないというエラーが起きます。
また、 let obj = () => window.open(); を let obj = window.open();にすると、
window is not definedというエラーが起きるのですが、なぜでしょうか？

let obj = () => window.open('https://translate.google.co.jp/hl=ja&tab=cT&sl=en&tl=ja&op=websites');
chrome.scripting.executeScript({
target: { tabId: obj.id },
function: ElClick,
args: [arg]
})

[itagagaki]

やり方はあると思いますが、それより、DOMアクセス部分についてはバックグラウンドスクリプト（サービスワーカー）ではなくコンテンツスクリプトで動かす方が簡単じゃないですかね。

"content_scripts": [
{
"all_frames": true,
"matches": ["https://translate.google.co.jp/*"],
"run_at": "document_end",
"js": ["./script.js"]
}
],

みたいな感じで。

[jupeeze]

コンテンツスクリプトを使ってGoogle翻訳に翻訳したいタブのURLを入力する場合、
最初に開いている翻訳したいタブのURLはどのように取得すればいいのでしょうか？

[itagagaki]

サービスワーカーからコンテンツスクリプトにメッセージを送信することになると思います。
https://developer.chrome.com/docs/extensions/mv3/messaging/

しかし、ちょっと自分でやってみたんですが、なんかうまくいっていません…

Answer 1

メッセージパッシングを使って実装するのが筋だとは思うのですが、自分でやってみても、どうもうまくいきませんでした。
しかし一晩寝て質問者の目的に沿いそうな代替案を見つけたので紹介します。

manifest.json

{
  "manifest_version": 3,

  "name": "jupeeze",
  "version": "1.0.0",
  "action": {},
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "all_frames": true,
      "matches": ["https://translate.google.co.jp/*"],
      "run_at": "document_end",
      "js": ["content.js"]
    }
  ],
  "host_permissions": ["*://*/*"]
}

background.js

chrome.action.onClicked.addListener(tab=>{
  chrome.tabs.create(
    { url: 'https://translate.google.co.jp/?hl=ja&tab=cT&sl=en&tl=ja&op=websites&jupeezeURL=' + encodeURI(tab.url) }
  );
});

content.js

let arg = new Object;
let pair = location.search.substring(1).split('&');
for (let i = 0; pair[i]; i++) {
  let kv = pair[i].split('=');
  arg[kv[0]] = kv[1];
}
if (arg['jupeezeURL']) {
  console.log(arg['jupeezeURL']);
}

新しいタブで開くページのURLに勝手に jupeezeURL というパラメーターを追加しています。これでサーバーがエラーを返すようだとダメですが、幸い無視してくれているようでした。

そして開かれたページに自動的に挿入される content.js では自分のlocationは当然読めますので、そこからこのパラメーターを拾うことができるし、開いているページのDOMにそれをセットしたりすることもできるはずです。

"host_permissions": ["*://*/*"] は任意のタブのどんなURLでも取得するために必要でした。
もしこの拡張機能を配布するのでしたら、これはちょっと危険視されるかもしれませんね…。

（追記）

コメントを受けて

content.js

const start = ()=>{
  let arg = new Object;
  let pair = location.search.substring(1).split('&');
  for (let i = 0; pair[i]; i++) {
    let kv = pair[i].split('=');
    arg[kv[0]] = kv[1];
  }
  if (arg['jupeezeURL']) {
    document.getElementById('i44').value = arg['jupeezeURL'];
    document.getElementsByClassName('VfPpkd-Bz112c-LgbsSe yHy1rc eT1oJ DiOXab zhBWDc Pk9dvb')[0].click();
    window.close();
  }
};

window.onload = () => start();

こんな風にしたらどうですか？

Comments

[jupeeze]

パラメーターというものを使うんですね！
少し調べて理解できた気がします！
最終的に、以下のようにプログラムを組めたのですが、
最後の三行でタブが閉じてくれないのですが、なにか対処法はあるのでしょうか？
質問に質問を重ねてしまい、申し訳ありませんが、教えてくれれば幸いです。

let arg = new Object;
let pair = location.search.substring(1).split('&');
for (let i = 0; pair[i]; i++) {
var kv = pair[i].split('=');
arg[kv[0]] = kv[1];
}
document.getElementById('i44').value = arg['jupeezeURL'];
document.getElementsByClassName('VfPpkd-Bz112c-LgbsSe yHy1rc eT1oJ DiOXab zhBWDc Pk9dvb')[0].click();
getCurrentTab().then((tab) => {
chrome.tabs.remove(tab.id);
});

[itagagaki]

単に window.close() で閉じるかもです

[jupeeze]

ウィンドウの読み込み中に閉じてしまいます…

[itagagaki]

回答に追記しました

[jupeeze]

window.setTimeoutと組み合わせた結果、思い通りのものができました。
ありがとうございます！！