Manifest V3浏览器扩展：内容脚本执行用户自定义JS代码的合规方案

由于Manifest V3严格限制eval()、Function()这类字符串转代码的API，且页面的CSP会阻断setTimeout(string)这类兼容式执行，最可靠的方案是借助扩展后台脚本生成Blob URL，再通过内容脚本将脚本插入页面主上下文——这种方式不受页面CSP约束，完全符合Manifest V3规范。

实现步骤 #

1. 后台脚本（Service Worker）处理代码生成Blob URL #

后台脚本不受页面CSP限制，可以安全生成包含用户代码的Blob并创建URL，再返回给内容脚本：

// service-worker.js
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  if (msg.type === 'run-user-code') {
    // 用用户代码创建Blob
    const codeBlob = new Blob([msg.code], { type: 'text/javascript' });
    const blobUrl = URL.createObjectURL(codeBlob);
    
    sendResponse({ url: blobUrl });
    
    // 页面关闭时释放Blob URL，避免内存泄漏
    chrome.tabs.onRemoved.addListener((tabId) => {
      if (tabId === sender.tab.id) {
        URL.revokeObjectURL(blobUrl);
      }
    });
  }
  return true; // 标记为异步响应
});

2. 内容脚本请求后台并插入脚本 #

内容脚本向后台发送用户代码，拿到Blob URL后创建<script>标签插入页面，脚本会在页面主上下文执行：

// content-script.js
function runUserCustomCode(userCode) {
  chrome.runtime.sendMessage(
    { type: 'run-user-code', code: userCode },
    (response) => {
      const scriptEl = document.createElement('script');
      scriptEl.src = response.url;
      
      scriptEl.onload = () => {
        // 脚本执行后移除标签
        document.head.removeChild(scriptEl);
        // 可在这里添加执行完成的回调逻辑
      };
      
      scriptEl.onerror = (err) => {
        document.head.removeChild(scriptEl);
        // 处理脚本加载/执行错误
        console.error('用户代码执行失败:', err);
      };
      
      document.head.appendChild(scriptEl);
    }
  );
}

// 示例：调用方法执行用户代码
const userSubmittedCode = `console.log('用户自定义代码执行了');`;
runUserCustomCode(userSubmittedCode);

为什么这个方案可行？ #

• CSP豁免：Blob URL由扩展后台生成，属于扩展可信上下文，页面的CSP规则不会约束这类资源加载。
• 符合Manifest V3规范：全程未使用被禁止的动态代码执行API，完全遵循Manifest V3的安全要求。
• 主上下文执行：用户代码运行在页面主上下文，能直接操作页面DOM和全局变量，满足自定义脚本的需求。

注意事项 #

• 安全风险：执行用户提交的代码等同于授予用户页面的完全控制权，务必在扩展中明确提示风险，必要时添加用户确认环节。
• 上下文隔离：用户代码运行在页面主上下文，和内容脚本的上下文是隔离的，若需要双向通信，可通过自定义DOM事件实现。

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