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

Question

### 前提

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

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

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

### 実現したいこと

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

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

### 試したソースコード

```JavaScript
//ソース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]
	})
})

```

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

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

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

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

### 補足情報

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

Accepted Answer

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

manifest.json
```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
```JavaScript
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
```JavaScript
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();
```

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

前提

実現したいこと

試したソースコード

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

補足情報

関連した質問