26

编写谷歌浏览器扩展时可以使用CORS吗？

我看到了这个， http://developer.chrome.com/extensions/contentSecurityPolicy.html

我尝试将其插入清单中，“content_security_policy”：“script-src 'self' https://twitter.com/ ; object-src 'self'”，

但是 ajax 请求失败，因为 XMLHttpRequest cannot load https://twitter.com/。Access-Control-Allow-Origin 不允许来源 chrome-extension://olimhkjfpndfhdopbneamnekfalckinc。

4

3 回答 3

40

要启用从您的扩展程序到 Twitter 的跨域 Ajax，您只需在清单中将 Twitter 列为主机权限：

...
"permissions": [
    "*://*.twitter.com/*"
],
...
于 2012-09-10T20:24:23.327 回答
34

解释

从 Chrome 73 开始，跨站点请求被阻止。（即使您的权限属性中有主机。）有些网站似乎可以畅通无阻，但我相信最终大多数都不会。

您必须在后台页面中提出请求...

设置

向您添加一个部分以manifest.json指向背景页面。

"background": {
  "scripts": ["bg_page.js"],
  "persistent": false
}

创建后台页面：bg_page.js

chrome.runtime.onMessage.addListener(
    function(url, sender, onSuccess) {
        fetch(url)
            .then(response => response.text())
            .then(responseText => onSuccess(responseText))
        
        return true;  // Will respond asynchronously.
    }
);

然后用在main.js

chrome.runtime.sendMessage( //goes to bg_page.js
      url,
      data => dataProcessFunction(data)
);

附加提示

如果您console.log()从 bg 页面执行任何操作，请单击 chrome 扩展管理器中扩展程序方块中的“检查视图背景页面”链接，您将获得一个单独的开发工具窗口，用于显示背景页面发生的所有事情。

如果您想亲自查看文档，请在此处查看推荐的开发人员操作部分的第 2 步：https://www.chromium.org/Home/chromium-security/extension-content-script-fetches#TOC-2。 -Avoid-Cross-Origin-Fetches-in-Content-Scripts

于 2019-06-08T01:45:03.510 回答
3

清单 V3 的更新

我想出了一个办法来做到这一点。但要格外小心您的 url 过滤和其他保护措施。

从 Manifest v3 开始，您可以设置修改呼入和呼出的规则。在清单的一个名为"host_permissions". 您可以在此处查看如何在清单中实施规则： https ://developer.chrome.com/docs/extensions/reference/declarativeNetRequest/#manifest

有一个称为"allowAllRequests"使用此规则的规则操作允许您进行跨域请求，绕过预检检查。您可以在此处阅读有关规则的更多信息： https ://developer.chrome.com/docs/extensions/reference/declarativeNetRequest/#type-RuleActionType

要使用此规则，您需要包含"resourceTypes"key in"condition"和"main_frame"or的值"sub_frame"

还要确保完全卸载您的扩展并重新安装以使这些更改生效。

来自谷歌的示例清单：

{
  "name": "My extension",
  ...

  "declarative_net_request" : {
    "rule_resources" : [{
      "id": "ruleset_1",
      "enabled": true,
      "path": "rules_1.json"
    }, {
      "id": "ruleset_2",
      "enabled": false,
      "path": "rules_2.json"
    }]
  },
  "permissions": [
    "declarativeNetRequest",
    "declarativeNetRequestFeedback",
    "*://example.com/*"
  ],
  "host_permissions": [
    "http://www.blogger.com/",
    "*://*/*"
  ],
  ...
}

示例 Rule.json：

[
    {
        "id": 1,
        "priority": 1,
        "action": { "type": "allowAllRequests" },
        "condition": {
            "urlFilter": "again make sure you are very specific with this.",
            "resourceTypes": ["main_frame"]
        }
    }
]
于 2021-05-22T04:18:09.417 回答