chrome拡張のpopup内要素の取得方法を教えてください

chrome拡張を使ってpopupのテキストボックス内に入力した値を
特定のwebページのテキストボックスに入力したいのですが
自作したpopupのテキストボックスから値の取得ができません。

やりたいことのイメージは以下の図です

イメージ説明

popupのボタン押下後コンソール画面にて
Uncaught ReferenceError: textname is not defined
のエラーがでておりおそらく
textname = document.forms[0].elements[0].value;
ここで代入ができていないのだと思うのですが正しい代入方法をご教授いただきたいです。

お手数おかけしますがよろしくお願いします。

以下がhtmlとjsファイルとmanifest.jsonです

popup.html
<!DOCTYPE html>
<html>
<body style="min-width:100px">
<!--<input type="button" id="id_Red" value="Red">
<br><br>
<label for="uname">入力してください: </label>
<input type="text" name="textname" size="15" maxlength="20" value="川口">-->
<form id="form">
	<input type="text" name="inputnamet" size="15" maxlength="20" value></input>
	<input type="submit" class="btn btn-primary" value="保存">
</form>

<script src="myscript.js"></script>
</body>
</html>

myscript.js
var textname ;


document.getElementById('form').onsubmit =function ()  {
  textname = document.forms[0].elements[0].value;
 console.log(textname);
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    chrome.scripting.executeScript({
      target: {tabId: tabs[0].id},
      function:nameOutput
    });
  });
}

function nameOutput(){
  document.getElementById("w2firstName").value = textname;
  console.log(textname);
  
}

manifest.json
{
  "name": "Chapter 5 (MV3)",
  "version": "1.0",
  "manifest_version": 3,
  "description": "This is Chapter 5",
  "permissions": ["scripting"],
  "host_permissions": [
    "http://*/*",
    "https://*/*"
  ],
  "action": {
    "default_icon": "Chapter_5.png",
    "default_title": "I am Chapter 5",
    "default_popup": "popup.html"
  }
}