chrome扩展消息发送页面重新加载？

Question

所以我正在运行一个数据收集项目，通过 chrome 扩展将 html 表单注入第三方网站，该扩展指示用户描述他们看到的数据并将其提交到我的服务器。

然而，出于某种奇怪的原因，每当用户单击“提交”按钮将表单内容发送到后台页面（并从那里发送到服务器）时，底层页面就会重新加载，不仅如此，而且重新加载后，我注入的表单内容会显示在 url 中。这是一种奇怪的行为。

我不知道这是否是我的代码中的某些东西，或者即使它是底层网页代码中的某些东西（也许它重新定义了chrome.runtime.sendMessage 或某种反扩展技术？！！？）。如果可能的话，我真的很想停止这种行为......有人有什么想法吗？

我的代码的相关部分，精简了一点：

var cururl = window.location.href

var codestring= "[A HTML FORM TO INJECT]"
var raformvalues = {};

function codeValues() {
    $.each($('#mainCoding').serializeArray(), function(i, field) {
        raformvalues[field.name] = field.value;
    });
}

function sendValues() {
    let pageinfo = {"page": document.documentElement.outerHTML,
                "url": cururl,
                    "title": document.title,
                    "timestamp": String(Date.now())};
    let tosend = $.extend({"type": "doctype"}, pageinfo, raformvalues);
    chrome.runtime.sendMessage(tosend);
    chrome.storage.local.set({'lasturl': pageinfo.url});
    $("#pgcodediv").empty();
    location.href = cururl; // note: I added this line to try to stop the reloading and url/changing behavior. behavior is the same with and without it.
}

function appendCodingInfo() {
    $("#headerID").append(codestring);
    $( ":checkbox, :radio" ).click( codeValues );
    $( ":text" ).change( codeValues );
    $( "#codingsubmit" ).click(sendValues);
}
appendCodingInfo()

当用户点击提交按钮时（当然是#codingsubmit），消息被传递，后台页面正确处理，但页面自动刷新，raformvalues 的内容显示在 URL 中刷新的页面（即，当我从控制台调用 window.location.href 时，该对象的内容显示为获取请求的参数，即 http://url?prop=value&prop2=value2 - 不知道为什么。

Answer 1

如果您在表单中单击带有type="submit" 的按钮，默认情况下浏览器会在表单提交后重新加载页面。

为防止页面重新加载，请将type="submit" 替换为type="button" 或在sendValues 处理程序中调用e.preventDefault()。

附录：

根据MDN，按钮的默认值为submit。

类型

按钮的类型。可能的值是：

提交：按钮将表单数据提交给服务器。 如果未指定属性，则这是默认值，或者如果属性动态更改为空值或无效值。

reset：该按钮将所有控件重置为其初始值。

按钮：按钮没有默认行为。它可以有与元素事件相关联的客户端脚本，当事件发生时触发。

menu：按钮打开一个通过其指定元素定义的弹出菜单。