Javascript 将popup.html中的文本框值传递给Chrome Extension中的我的内容脚本_Javascript_Google Chrome_Google Chrome Extension

Javascript 将popup.html中的文本框值传递给Chrome Extension中的我的内容脚本

javascript google-chrome google-chrome-extension

Javascript 将popup.html中的文本框值传递给Chrome Extension中的我的内容脚本,javascript,google-chrome,google-chrome-extension,Javascript,Google Chrome,Google Chrome Extension,因此，当用户在popup.html中单击submit时，我需要将文本框值（在popup.html中）传递给我的内容脚本。我读了很多教程，但我不能真正理解它们做了什么 popup.html： <!DOCTYPE html> <html> <body> <form> <input type="text" placeholder="MCM Username" id="username"><br> <inp

因此，当用户在popup.html中单击submit时，我需要将文本框值（在popup.html中）传递给我的内容脚本。我读了很多教程，但我不能真正理解它们做了什么

popup.html：

<!DOCTYPE html>
<html>

<body>

<form>
    <input type="text" placeholder="MCM Username" id="username"><br>
    <input type="checkbox" name="vehicle" value="Bike" checked> ON?<br>
    <input type="submit" placeholder="MCM Username" id="sbBtn">


</body>
</html>

rainbow.js（我的内容脚本）：

var username=“RaghavJhavar”；
setInterval（函数（）{
var elements=document.getElementsByTagName（“span”）；
对于（var i=0；i


当用户单击popup.html上的“提交”时，我如何将文本框值where id=“username”发送到rainbow.js？我希望rainbow.js中的变量username与popup.html中id为“username”的文本框值相等
你能解释一下怎么做吗
非常感谢。
在弹出脚本中，使用chrome.runtime.sendMessage
向内容脚本发送消息
在内容脚本中，使用chrome.runtime.onMessage
从后台脚本接收消息
请阅读文档可能的副本
{
    "name": "MCMRainbowName",
    "manifest_version": 2,
    "version": "1.0.0",
    "description": "Turn your name into a rainbow color on MC-Market.",
    "browser_action":
    {
        "default_icon": "icon.png",
        "default_popup": "onoff.html"
    },

    "content_scripts":[
        {
            "matches":["http://mc-market.org/*", "https://mc-market.org/*"],
            "js": ["rainbow.js"]
        }
    ]
}

var username = "RaghavJhavar";

setInterval(function() {
    var elements = document.getElementsByTagName("span");

    for(var i = 0; i < elements.length; i++){
        if(elements[i].innerText == username /*|| elements[i].innerText == "RaghavJhavar"*/){
            document.getElementsByTagName("span")[i].setAttribute("class", "style21");
        }
    }
}, 1000);