Chrome扩展Manifest V3注入远程脚本的解决方案咨询

Manifest V3出于安全考量，确实禁止直接注入远程脚本，但可以通过先获取远程脚本文本，再在页面中执行的方式绕过这个限制，同时要注意权限配置和安全风险。

1. 先配置manifest.json权限 #

确保你的manifest.json中包含必要的权限：

{
  "permissions": ["scripting"],
  "host_permissions": ["https://your-remote-script-domain.com/*"] // 替换为远程脚本的实际域名
}

2. 修正并优化你的注入代码 #

你原来的代码存在关键问题：fetch(...)返回的是Promise对象，不是脚本文本，必须先等待获取到脚本内容再执行。另外，用<script>标签插入页面的方式比new Function更贴合正常脚本的执行环境，下面是修正后的代码：

async function injectRemoteScript(tabId, remoteScriptUrl, passData) {
  try {
    // 1. 远程获取脚本文本
    const resp = await fetch(remoteScriptUrl);
    const scriptContent = await resp.text();

    // 2. 注入到目标页面的MAIN世界
    await chrome.scripting.executeScript({
      target: { tabId: tabId },
      world: "MAIN",
      func: (scriptText, data) => {
        // 创建script标签插入页面执行
        const scriptTag = document.createElement('script');
        // 如果远程脚本是自执行函数，直接传入数据；如果是普通函数，自行调整调用逻辑
        scriptTag.textContent = `(${scriptText})(${JSON.stringify(data)})`;
        document.head.appendChild(scriptTag);
        scriptTag.remove(); // 执行完毕后移除标签
      },
      args: [scriptContent, passData]
    });
  } catch (err) {
    console.error('注入远程脚本出错:', err);
  }
}

// 使用示例
const dataToPass = { username: 'test', id: 123 };
injectRemoteScript(details.tabId, 'https://your-domain.com/remote-script.js', dataToPass);

3. 重要注意事项 #

• 必须确保远程脚本的来源是完全可信的，避免引入XSS风险；
• 如果远程脚本不需要动态更新，优先将脚本下载到本地作为扩展资源使用，更符合Manifest V3的安全规范；
• 若远程脚本跨域，需要在host_permissions中添加对应域名，否则fetch会被浏览器拦截。

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