Chrome扩展V2迁移至V3：如何实现外部脚本加载的等效效果？

你的设想方案是完全可行的，不过有几个细节需要注意；同时还有更安全的替代方案，下面分两部分说明：

一、打包脚本进扩展的方案说明 #

1. 脚本注入方式：将自有域名的JS下载后，作为扩展的本地资源（比如放在scripts/目录下），可以通过两种方式注入到所有网页：
   • 在manifest.json的content_scripts里配置matches: ["<all_urls>"]，直接指定该脚本自动注入；
   • 或者使用chrome.scripting.executeScriptAPI动态注入（适合需要按需加载的场景）。
2. API调用配置：
   • 客户端请求必须添加withCredentials: true，确保Cookie等凭证能被携带；
   • 服务器端要动态返回Access-Control-Allow-Origin为当前请求的具体origin（不能用*通配符），同时设置Access-Control-Allow-Credentials: true，否则凭证无法生效。
3. CSP注意事项：Manifest V3默认的CSP允许加载扩展包内的所有资源，所以不需要额外修改CSP配置。

二、更安全的代理方案（推荐） #

直接在内容脚本里发起跨域请求，虽然能工作，但内容脚本运行在网页上下文，可能受到网页自身脚本的干扰（比如网页篡改XMLHttpRequest对象、存在XSS风险等）。更安全的做法是用扩展的后台脚本作为代理：

实现步骤 #

1. 内容脚本发送请求指令：

// content.js（内容脚本）
chrome.runtime.sendMessage({
  action: 'callApi',
  apiUrl: 'https://your-domain.com/api/xxx',
  method: 'POST',
  body: { key: 'value' }
}, (response) => {
  if (response.success) {
    // 处理返回的数据
    console.log(response.data);
  } else {
    console.error('请求失败:', response.error);
  }
});

2. 后台脚本处理请求并返回结果：

// background.js（后台服务工作者）
chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
  if (req.action === 'callApi') {
    const fetchOptions = {
      method: req.method || 'GET',
      credentials: 'include', // 自动携带目标域名的Cookie
      headers: {
        'Content-Type': 'application/json'
      }
    };
    if (req.body) {
      fetchOptions.body = JSON.stringify(req.body);
    }

    fetch(req.apiUrl, fetchOptions)
      .then(res => res.json())
      .then(data => sendResponse({ success: true, data }))
      .catch(err => sendResponse({ success: false, error: err.message }));
    
    return true; // 标记为异步响应，避免消息通道提前关闭
  }
});

3. Manifest配置：

{
  "manifest_version": 3,
  "host_permissions": ["https://your-domain.com/*"], // 允许后台请求你的域名
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

代理方案的优势 #

• 完全隔离网页上下文的干扰，安全性更高；
• 不需要在服务器端配置复杂的CORS规则，仅需在扩展的host_permissions中添加你的域名即可；
• 后台请求自动携带目标域名的Cookie，无需额外处理凭证传递。

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