Chrome扩展注入Javascript按钮更改页面

因此，我正在开发一个扩展，它将在页面上的一些文本字段中收集值，并在另一个站点上搜索它们，以确保它们没有商标

我在页面中插入了一个按钮，当我点击它时，它会工作，但它也会引导我进入网站的主页，就好像我没有登录一样。然而，我仍然登录，可以回击返回到我所在的位置，但是我的所有文本字段都不再填写。这显然是最终用户的问题

有什么想法吗

以下是我的内容脚本：

window.addEventListener("load", function load(event){

    var amz = document.getElementById("draft-field");
    var TMbutton = document.createElement("button");
    var text = document.createTextNode("TMHunt Your Product");
    TMbutton.className = "a-button a-button-primary scripter-button  button-fill"
    TMbutton.appendChild(text);
    amz.appendChild(TMbutton);

},false);

TMbutton.onclick = function() {
            chrome.runtime.sendMessage("test");
}

---

这确实创建了按钮，并具有所需的效果，除了将我们弹出到不同页面的副作用。这是否与主机页从我的Javascript接收到一条消息来执行我没有看到的操作有关？

按钮默认类型为submit。您应该将类型设置为button，这样它就不会触发表单提交操作

window.addEventListener("load", function load(event){

    var amz = document.getElementById("draft-field");
    var TMbutton = document.createElement("button");
    var text = document.createTextNode("TMHunt Your Product");
    TMbutton.className = "a-button a-button-primary scripter-button  button-fill";
    TMbutton.type = "button";
    TMbutton.appendChild(text);
    amz.appendChild(TMbutton);

},false);

TMbutton.onclick = function() {
    chrome.runtime.sendMessage("test");
}

---

可能父元素草稿字段设置为在单击时更改页面。试着阻止事件的传播，如stopPropagation.Ben在下面看到了，回答得很好Ben！你真棒！