Chrome扩展MV3版本popup页面使用eval的实现方案咨询

MV3默认的内容安全策略(CSP)禁止了unsafe-eval权限，直接在popup页面调用eval会被拦截，无需使用已废弃的webview组件，官方推荐通过沙箱页面实现该需求，具体操作流程如下：

• 第一步：在manifest.json中声明沙箱页面与对应权限

  {
    "manifest_version": 3,
    "sandbox": {
      "pages": ["sandbox.html"]
    },
    "content_security_policy": {
      "sandbox": "sandbox allow-scripts; script-src 'self' 'unsafe-eval';"
    }
  }
  

  沙箱页面会使用独立的CSP配置，此处单独给沙箱开放unsafe-eval权限即可正常调用eval。你之前查询到的沙箱不能加载外部内容的限制，仅针对需要引入外部脚本/嵌入外部页面的场景，纯执行本地eval逻辑不受该限制影响。
• 第二步：在popup页面嵌入沙箱iframe并做通信适配
  popup页面通过postMessage与沙箱页面交互，把要执行的代码串传给沙箱，执行完成后再接收返回结果，示例代码如下：

  // popup.js 逻辑
  const sandboxIframe = document.createElement('iframe');
  sandboxIframe.src = chrome.runtime.getURL('sandbox.html');
  sandboxIframe.style.display = 'none';
  document.body.appendChild(sandboxIframe);
  
  // 封装调用方法
  function runEvalInSandbox(code) {
    return new Promise(resolve => {
      window.addEventListener('message', e => {
        if (e.source === sandboxIframe.contentWindow && e.data.type === 'evalResult') {
          resolve(e.data.result);
        }
      }, { once: true });
      sandboxIframe.contentWindow.postMessage({ type: 'evalCode', code }, '*');
    });
  }
  
  // 调用示例
  runEvalInSandbox('1 + 2 * 3').then(res => console.log(res)) // 输出7
  

• 第三步：编写沙箱页面逻辑
  沙箱页面接收消息执行eval后回传结果即可，示例代码如下：

  // sandbox.js 逻辑
  window.addEventListener('message', e => {
    if (e.data.type === 'evalCode') {
      const result = eval(e.data.code);
      e.source.postMessage({ type: 'evalResult', result }, e.origin);
    }
  });
  

内容的提问来源于stack exchange，提问作者Julian A Avar C