Question

因此，我通过Chrome扩展程序将html表单注入第三方网站来运行数据收集项目，该扩展程序指示用户描述他们看到的数据并将其提交给我的服务器。

但是，出于某些奇怪的原因，每当用户点击＆＃34;提交＆＃34;按钮将表单内容发送到后台页面（从那里发送到服务器），底层页面重新加载，不仅如此，而且重新加载我重新加载后显示在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时，该对象的内容显示为get请求的参数，即http://url?prop=value&prop2=value2 - 没有线索原因。

Answer 1

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

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

附录：

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

<强>型

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

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

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

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

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

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

1 个答案:

附录：