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

Question

So, I am working on an extension that will scoop up the values in some text fields on a page, and search them on another site to make sure they are not trademarked.

I have injected a button in the page, and when I click it, it works, but it also boots me out to the main page of the site, as though I were not logged in. However, I am still logged in and can hit "back" to get back to where I was, but then all my text fields are no longer filled in. This is obviously a problem for the end user.

Any ideas?

Here is my Content Script:

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");
}

This does create the button and has the desired effect, except for this side-effect of popping us into a different page. Would this be something to do with the host page receiving a message to do something from my Javascript somehow that I am not seeing?

Answer 1

The button default type is submit . You should set the type to button so it won't trigger the form submit action.

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");
}