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

Question

因此，我正在开发一个扩展程序，该扩展程序将在页面上某些文本字段中获取值，并在另一个站点上搜索它们以确保它们没有商标。

我在页面中注入了一个按钮，当我单击它时，它可以工作，但是它也将我引导到网站的主页，好像我没有登录。但是，我仍然登录并且可以点击单击“返回”回到我原来的位置，但随后我的所有文本字段都不再填写。这对于最终用户来说显然是个问题。

有任何想法吗？

这是我的内容脚本：

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无法执行某件事的消息有关吗？

Answer 1

按钮的默认类型为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");
}