Google chrome extension CORS和内容策略冲突问题-Chrome扩展清单V3

我知道已经有关于这个的东西了。我在这上面呆了几天，在发布之前阅读并尝试过

：根据我的问题描述相关问题。但我不能解决它。我正在开发一个chrome扩展，它在字典web服务器上执行一个ajax请求，并在当前页面中注入一些css/html，以显示一个工具提示，其中包含一些与用户选择相关的数据。它与我的浏览器中的“MOESIF Cors”扩展配合使用效果非常好。我希望它能够在没有这个扩展的情况下工作，使用一些javascript调整或manifest.json良好的参数。我卡住了。由于服务器（我没有对服务器的访问权限，无法修改其响应头）访问控制允许源策略，我违反了CORS。我在$.ajax/jquery GET请求中尝试了很多请求头组合，但没有任何效果。 在'https://dictionary.xxx.ie/dictionary/english/government%20“起源”https://en.wikipedia.org'已被CORS策略阻止：请求的资源上不存在'Access Control Allow Origin'标头。 根据上面引用的文章，我已尝试将“数据类型”：设置为“jsonp”，并将cors策略冲突替换为另一个冲突： 拒绝加载脚本的https://dictionary.xxx.ie/dictionary/english/publication?callback=jQuery3600056231503718366715_1615940095416&_=1615940095418'因为它违反了以下内容安全策略指令：“script src'self'”。请注意，“script src elem”未显式设置，因此“script src”用作回退。

必须有一个快速修复方法，因为MOESIF扩展工作得非常好：我尝试了所有这些标题：但它不起作用。在阅读文档之后，我在manifest.json中对脚本进行了沙盒处理（看起来比较松散），但它没有做得更好。如果可能的话，我正在考虑在我的扩展中嵌入一个javascript代理！有线索吗？ 谢谢你的阅读

Manifest.json

{
  "manifest_version": 3,
  "name": "Not a translator",
  "version": "1.0",
  "default_locale": "en",
  "background": {
    "service_worker": "background.js"
  },
  "host_permissions": [
    "http://dictionary.xxx.ie/*",
    "https://dictionary.xxx.ie/*"
  ],
  "permissions": ["storage", "activeTab", "contextMenus", "scripting"],
  "sandbox": {
     "pages": ["chrome-extension://afeenkbblogndiamnfkocnomlppheomb/jquery.min.js"]
   },
   "content_security_policy": {
        "sandbox":"sandbox allow-scripts; script-src-elem chrome-extension://afeenkbblogndiamnfkocnomlppheomb/jquery.min.js 'unsafe-inline' 'unsafe-eval'; child-src 'self';"
  },
  "content_scripts": 
   [{
     "matches": ["http://*/*", "https://*/*"],
     "css": ["tooltip.css"],
     "run_at": "document_start",
     "js": ["tooltip.js", "jquery.min.js"]
   }],
  "externally_connectable": {
    "ids": ["afeenkbblogndiamnfkocnomlppheomb"],
    "matches": ["https://localhost/*"],
    "accepts_tls_channel_id": false
  },
  "action": {
    "default_title": "__MSG_tooltip__",
    "default_popup": "popup.htm",
    "default_icon": {
      "16": "/images/get_started16.png",
      "32": "/images/get_started32.png",
      "48": "/images/get_started48.png",
      "128": "/images/get_started128.png"
    }
  },
  "icons": {
    "16": "/images/get_started16.png",
    "32": "/images/get_started32.png",
    "48": "/images/get_started48.png",
    "128": "/images/get_started128.png"
  },
  "options_page": "options.htm"

来自background.js的jquery请求的一部分（非常大，无法获得可运行的版本）：

var url1=”https://dictionary.xxx.ie/dictionary/english/" +
编码组件（文本）；
$.ajax({
方法：“获取”，
url:url1，
跨域：是的，
数据类型：“jsonp”，
数据：{}
})...

当我检查我的请求的标题时，有时会得到403。当我放置“jsonp”头时，我得到了一些“临时头”，其他什么都没有。我认为用于jsonp的POST或OPTIONS方法会得到一些禁止进一步请求的响应头。我不知道我可以添加哪个标题来解决这个问题。Jquery不允许我传递“Origin”：http://localhost例如（出于脆弱性原因）

从manifest.json中删除

content\u security\u policy

和

sandbox

，它们在这里没有帮助

如果从background.js中删除jQuery及其调用，它将无法在ManifestV3服务工作者中工作，因为jQuery是基于DOM的东西，例如XMLHttpRequest，而这些东西在服务工作者中不存在

解决方案

• 在后台脚本中：使用

• 在内容脚本中，要发出跨源请求：将消息发送到后台，后台将发出

  获取

  请求并将结果发送回

---

好的……现在在background.js中，我正在使用contextMenus.onclicked.addListener调用执行获取的injectedFunction：这与这样的获取是相同的CORS冲突。

injectedFunction

将是一个

内容脚本

，因此答案解决方案中的第二个选项适用。我一开始是这样做的chrome.tabs.sendMessage。我放弃了它，因为我没有看到有2个js文件的意义，我把所有的东西都放在background.js中。它应该与这种MSG一起工作吗？其次，我认为我是以相反的方式完成的：后台向内容发送消息。内容执行提取并响应回后台。它可以这样工作吗？还是必须在bkgrnd.js中进行提取？内容脚本不能进行跨源请求。通过executeScript运行的代码也是一个内容脚本，因此它也不能发出这样的请求。在后台脚本中执行请求，如我在答案中链接的示例所示。听起来你好像忽略了我写的所有内容。哦，好吧：-）