Chrome扩展开发遇CORS困扰，求Mturk场景解决方案

核心思路 #

Chrome扩展Manifest V3中，内容脚本、弹窗页面的直接请求会受浏览器CORS限制，但后台服务工作者（Service Worker）拥有独立上下文，不受页面CORS规则约束。正确解法是用Service Worker做请求代理，前端通过消息通信让后台代为发起请求。

步骤1：更新Manifest配置 #

添加background字段声明Service Worker，同时精准配置Mturk相关域名的权限（比<all_urls>更规范）：

{
   "manifest_version": 3,
   "name": "Auto_Select",
   "description": "This extension auto selects Mturk HITs",
   "version": "1.0",
   "action": {
      "default_icon": "auto_select.png",
      "default_popup": "auto_select.html"
   },
   "permissions": [
     "activeTab"
   ],
   "host_permissions": [
      "https://*.mturk.com/*",
      "https://*.amazonaws.com/*" // Mturk关联API域名需额外配置
   ],
   "background": {
      "service_worker": "background.js"
   }
}

注意：移除了action内无效的type: "module"字段，Manifest V3的action不支持该配置。

步骤2：编写Service Worker代理脚本（background.js） #

后台脚本接收前端请求消息，发起fetch请求后返回结果：

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === 'mturk_request') {
    fetch(request.url, request.options)
      .then(response => response.json()) // 按需调整响应格式处理逻辑
      .then(data => sendResponse({ success: true, data }))
      .catch(error => sendResponse({ success: false, error: error.message }));
    return true; // 告知Chrome需异步发送响应
  }
});

步骤3：前端（弹窗/内容脚本）发起请求 #

以弹窗JS为例，通过消息发送请求：

// 示例：请求Mturk的HIT列表数据
function fetchMturkHits() {
  chrome.runtime.sendMessage(
    {
      type: 'mturk_request',
      url: 'https://worker.mturk.com/api/hits',
      options: {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json'
          // 可添加必要请求头，注意勿硬编码敏感信息
        }
      }
    },
    (response) => {
      if (response.success) {
        console.log('获取HIT数据成功:', response.data);
        // 编写数据处理逻辑
      } else {
        console.error('请求失败:', response.error);
      }
    }
  );
}

为什么修改content_security_policy没用？ #

CSP的作用是限制扩展内可加载的资源类型、来源（比如禁止内联脚本、限制外部脚本域名），它和跨域请求的CORS限制是完全不同的概念，因此调整CSP无法解决你的跨域问题。

内容的提问来源于stack exchange，提问作者Wt Riker