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

page reloads on chrome extension message send?

本文关键字：扩展 chrome 消息 加载 新加载      更新时间：2023-09-26

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

然而，由于一些奇怪的原因，每当用户单击"提交"按钮将表单内容发送到后台页面(并从那里发送到服务器)时，底层页面就会重新加载，不仅如此，它还会重新加载我注入的表单内容，在重新加载后显示在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—不知道为什么。

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

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

附录:

根据MDN, button的默认值为submit。

按钮类型。可能的值是:

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

reset:按钮将所有控件重置为初始值。

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

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

相关文章：