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