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

时间:2017-12-08 17:50:55

标签: javascript google-chrome google-chrome-extension dom-events

所以,我正在开发一个扩展程序,它将挖掘页面上某些文本字段中的值,并在另一个站点上搜索它们以确保它们不是商标。

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

有什么想法吗?

这是我的内容脚本:

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做某事我没有看到?

1 个答案:

答案 0 :(得分: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");
}