chrome extensionでedge拡張機能「コード選択子画面」を作りたい

■実現したい事
Microsoft Edgeの拡張機能として、以下を実装したい

１．親画面の入力エリアで右クリックし、コンテキストメニューから「コード選択」をクリック
２．子画面が開き、選択候補から設定したい値のボタンをクリック
３．親画面の入力エリアに、選択した値が反映

■実装した事

１．background.jsで、コード選択のコンテキストメニューを追加
２．コンテキストメニューをクリック時、window.openで、子画面(code_select.html)を開く
３．しかし、子画面から親画面のdocumentは参照できない（backgroundのdocumentとなる）
４．background.jsから、content.jsを呼び出し、親画面の値を変更はできた

■検討中
１．sendMessage onMessageで、code_select.htmlで選択した値を、
background.jsに渡して、それをcontent.jsに渡して、content.jsが親画面を編集するべきか。
２．子画面の選択値を、sessionStorageに設定して、content.jsがsessionStorageの値を親画面に設定するべきか。
３．そもそも考え方がNGなのか。。

■確認事項
1.実現したい事について、ご助言頂ければありがたいです（。。
2.子画面から親画面に値を設定する実装方法を、ご教示お願いします（。。

■ソース
manifest.json

json
1{
2    "name": "コード選択",
3    "author": "テスト開発者",
4    "version": "0.1",
5    "manifest_version": 2,
6    "description": "選択したコードを設定します",
7    "background": {
8        "scripts": ["background.js"],
9        "persistent": true,
10    },
11    "permissions": [
12        "contextMenus","activeTab"
13    ]
14}

background.js

javascript
1//Edge の名前空間(browser) がなけれぱ chrome の名前空間を使用する
2var browser = browser||chrome;
3
4// ------------------------------------------------------------------------------------------
5//コンテキストメニューに拡張のメニューを追加 
6browser.contextMenus.create({
7
8  id: 'codeSelect',
9
10  title: 'コード選択',
11
12  contexts: ['editable'],
13
14  onclick: (info, tab)=>{ //クリックされた際のアクション。info:onclick イベントの仮引数
15      window.open('code_select.html','','titlebar=yes,toolbar=yes,location=yes,status=no,menubar=yes,scrollbars=yes,resizable=yes,width=700,Height=300,left=0,top=0');
16
17      // tab で contextMenu.js を実行する
18      chrome.tabs.executeScript(tab.id, { file: 'content.js' })
19
20  }
21});

content.js

javascript
1document.getElementById("code1").value = '設定したい内容';

親画面

html
1<!DOCTYPE>
2<head>
3<meta content="ja" http-equiv="Content-Language" />
4<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
5<title>親画面テストページ</title>
6<script>
7</script>
8</head>
9<body>
10<p>サブ画面からインプット</p>
11<p>名前コード</p><br />
12	<input id="code1" type="text" onchange="mychange()" /><br />
13</body>
14</html>
15

子画面(code_select.html)

html
1<!doctype html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title>コード選択</title>
6<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
7<script type="text/javascript" src="js/bootstrap.min.js"></script>
8<!-- コード選択処理 -->
9<script type="text/javascript" src="js/test.js"></script>
10</head>
11
12<body>
13<button id="t01">テスト</button>
14</body>
15</html>
16

itagagaki

2021/10/20 02:46

window.opener.documentで参照できませんでした？（自分では確認しないでのお尋ねですが）

val0307

2021/10/20 03:56

子画面で実行：alert(window.opener.document.documentURI); 結果：chrome-extension://bgkhiknncjemjpfgfaohffbhnjpkehea/_generated_background_page.html となったため、子画面からは、background.js側のpageが参照され、親画面は参照不可と判断しておりました。