如何从 Chrome 扩展程序发送 HTTP GET 请求？

Posted 2023-02-22

【中文标题】如何从 Chrome 扩展程序发送 HTTP GET 请求？

【英文标题】：How do I send an HTTP GET request from a Chrome extension?

【发布时间】：2014-09-26 06:47:35

【问题描述】：

我正在开发一个使用 GET 方法发送 HTTP 请求的 chrome 扩展。

如何使用参数par 和值0 向www.example.com 发送GET？

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

（服务器读取参数par并做一些事情）

我找到这篇文章，谈论Cross-Origin XMLHttpRequest，但我不知道他们的例子对我有什么帮助。

【参考方案1】：

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

对于新的Manifest V3，使用host_permissions 字段：

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

如果您仍在使用旧版 Manifest V2，请使用 permissions 字段：

    "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 doc for 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();

注意相对documentation page顶部的警告：

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

【讨论】：

请注意：如果您在 https 页面上并且正在请求 http URL，则可能会收到 Mixed Content: The page at '...' 错误。

我可以添加模式而不是特定域吗？

可以，使用 * 通配符。但是，如果您想允许通过 https 和 http 进行访问，则必须单独添加。阅读developer.chrome.com/extensions/xhr

***.com/questions/34627921/…, ***.com/questions/11506687/…

尝试从我的内容脚本调用fetch 时遇到CORB 错误（将外部URL 添加到permissions 数组并不能解决问题）。以下答案解决了我的问题，即将 fetch 调用委托给后台脚本，并按照最初的预期将解析响应发送回内容脚本。 ***.com/questions/55214828/…