我该如何从Chrome扩展程序中发送HTTP请求？

Question

我正在开发一个Chrome扩展程序，它会发送HTTP请求。

如何将其发送到www.example.com并带有参数par，值为0？

https://www.example.com?par=0

（服务器读取参数par并执行某些操作）

我找到了这篇文章，谈论跨域XMLHttpRequest，但我不知道他们的例子如何帮助我。

- Mirianna

Answer 1

首先，您需要编辑您的manifest.json文件，并添加www.example.com的权限：

• For the new Manifest V3, use the host_permissions field:

  {
      "manifest_version": 3,
      ...
      "host_permissions": [
          "https://www.example.com/*"
      ],
      ...
  }
  

• If you are still using the old Manifest V2, use the permissions field:

  {
      "manifest_version": 2,
      ...
      "permissions": [
          "https://www.example.com/*"
      ],
      ...
  }
  

然后在你的后台页面（或其他地方）中，你可以进行以下操作：

fetch('http://www.example.com?par=0').then(r => r.text()).then(result => {
    // Result now contains the response text, do what you want...
})

另请参阅MDN关于fetch()的文档。

---

使用已弃用版本的XMLHttpRequest（ES5）：

function callback() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
        if (xhr.status === 200) {
            result = xhr.responseText;
            // ...
        }
    }
};

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://www.example.com?par=0", true);
xhr.onreadystatechange = callback;
xhr.send();

注意相对于文档页面顶部的警告：

在 Manifest V3 中，不支持在后台页面（由服务工作者提供）中使用 XMLHttpRequest。请考虑使用它的现代替代品 fetch()

- Marco Bonelli

---

仅供参考：如果您在https页面上请求http URL，则可能会收到“混合内容：页面位于'...'”错误。 - Serguei Fedorov

我可以添加一个模式而不是特定的域名吗？ - Adrian B

可以的，使用 * 通配符即可。但如果您想允许通过 https 和 http 访问，则需要单独添加。请阅读 https://developer.chrome.com/extensions/xhr。 - Nino van Hooff

https://dev59.com/f5Lea4cB1Zd3GeqP57mS XMLHttpRequest同步请求在主线程上已过时，尝试了多种方法。https://dev59.com/R2bWa4cB1Zd3GeqPTyvfGoogle Chrome扩展程序HTTP请求。 - Frank R.

我在内容脚本中尝试调用fetch时遇到了一个CORB错误（将外部URL添加到“permissions”数组中并不能解决问题）。以下答案解决了我的问题，即将fetch调用委托给后台脚本，在内容脚本中按原来的意图发送解析响应。https://dev59.com/lFMI5IYBdhLWcg3w1fL-#55215898 - Michael Yaworski