Javascript 获取api在webextensions中不起作用

我正在试验firefox webextensions。我想在提交表单后使用fetchapi发出HTTP请求。问题是fetch请求没有执行任何操作

以下是从my manifest.json中提取的数据：

"browser_action": {
    "default_popup": "test.html"
  },
"permissions": [
    "<all_urls>"
 ],

当我点击表单的提交按钮时，我看到调用了我的函数

fetchTest

，因为我可以在控制台中看到“TEST”消息。但是，在“网络”面板中没有来自浏览器的请求，在控制台中也没有错误，就好像fetch（）从未发生过一样

然后，我尝试用xhr做同样的事情：

function fetchTest() {
    console.log("TEST");

    const req = new XMLHttpRequest();
    req.open('GET', 'https://httpbin.org/get', false);
    req.setRequestHeader("Content-Type", "application/json");
    req.send(null);
    console.log(req);
}

有了这个版本，一切都很好。我在“网络”面板中看到请求，我的控制台中有数据

我是否使用了错误的获取API

谢谢：）

当单击时，会导致提交：因为没有指定其他URL，也没有其他表单元素，所以页面基本上是重新加载的。引用MDN：

类型为“提交”的元素呈现为按钮。当

单击事件发生时（通常是因为用户单击了按钮），用户代理会尝试将表单提交给服务器

基于
fetch
的解决方案是完全异步的，这意味着您的代码将启动，但在完成之前会被重新加载中断

基于XHR的解决方案成功了，因为您调用了同步形式的XHR（使用
false
）；重新加载暂停，直到代码完成，然后仍然重新加载

无论如何，你不想重新加载，这会破坏你的JS状态；您可以通过从处理程序调用
e.preventDefault（）
来防止它，但从语义上讲，不使用
submit
按钮而不是对其语义进行脑部手术更为正确

使用
（或者更好的是，
）将是正确（更干净）的方法。引用MDN：

按钮用于提交表单。如果要创建自定义按钮，然后使用JavaScript自定义行为，则需要使用
，或者更好的是使用
元素

如果将HTML中的
type=“submit”
替换为
type=“button”
，将代码中的
“sumbit”
替换为
“click”
，是否会有任何变化？使用
submit
输入是个坏主意，至少在Chrome中是这样；也许FF对它更宽容，但值得一试。谢谢，它似乎有效：）我找不到它不适用于提交事件的原因。但是，现在每次单击字段时都会执行请求。我只是在submit按钮上添加了一个id，并在按钮上添加了事件侦听器；我要求先进行测试，因为我不确定Firefox是否有不同之处。谢谢你的解释。现在它有了意义：）
document.querySelector("form").addEventListener("submit", fetchTest);
function fetchTest() {
    console.log("TEST");

    fetch('https://httpbin.org/get')
        .then(response => response.json())
        .then(response => {
            console.log(response);
            return response;
        })
        .catch(error => console.log(error));
}

function fetchTest() {
    console.log("TEST");

    const req = new XMLHttpRequest();
    req.open('GET', 'https://httpbin.org/get', false);
    req.setRequestHeader("Content-Type", "application/json");
    req.send(null);
    console.log(req);
}