Manifest V3禁用eval()的Workaround：书签转Chrome扩展开发遇阻求助

MV3的严格内容安全策略（CSP）默认禁用了eval()、Function()这类动态代码执行手段，这是导致你转换书签小工具失败的核心原因。下面是几个可行的解决方案，覆盖不同场景：

1. 静态化书签代码（适用于无动态执行逻辑的小工具） #

大部分书签小工具只是封装了一段直接执行的DOM操作或页面逻辑，你可以直接提取代码内容，转换成静态脚本文件嵌入扩展：

• 提取书签中javascript:后的代码主体，比如把javascript:(function(){document.body.style.background='red'})()提取为bookmark-script.js：

  (function(){document.body.style.background='red'})()
  

• 在扩展manifest中配置content script，指定需要注入的页面范围：

  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["bookmark-script.js"],
      "run_at": "document_idle"
    }
  ]
  

• 如果需要用户手动触发执行，可在popup中通过chrome.scripting.executeScript动态注入该脚本：

  document.getElementById('run-btn').addEventListener('click', async () => {
    const [tab] = await chrome.tabs.query({active: true, currentWindow: true});
    await chrome.scripting.executeScript({
      target: {tabId: tab.id},
      files: ['bookmark-script.js']
    });
  });
  

2. 使用沙盒页面（适用于含动态执行逻辑的小工具） #

MV3允许配置沙盒页面，这类页面的CSP可以放宽，支持eval()和Function()。通过沙盒执行动态代码，再与扩展主程序通信：

• 在manifest中添加沙盒配置：

  "sandbox": {
    "pages": ["sandbox.html"],
    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'none'"
  }
  

• 创建sandbox.html，用于接收并执行书签代码：

  <!DOCTYPE html>
  <html>
  <body>
    <script>
      window.addEventListener('message', (e) => {
        if (e.data.type !== 'RUN_BOOKMARK') return;
        try {
          // 执行书签代码
          const result = eval(e.data.code);
          // 回传结果
          e.source.postMessage({
            type: 'EXEC_RESULT',
            result: result
          }, e.origin);
        } catch (err) {
          e.source.postMessage({
            type: 'EXEC_ERROR',
            error: err.message
          }, e.origin);
        }
      });
    </script>
  </body>
  </html>
  

• 在扩展popup中加载沙盒iframe并传递代码：

  let sandboxFrame;
  
  // 初始化沙盒
  function initSandbox() {
    sandboxFrame = document.createElement('iframe');
    sandboxFrame.src = chrome.runtime.getURL('sandbox.html');
    sandboxFrame.style.display = 'none';
    document.body.appendChild(sandboxFrame);
  }
  
  // 执行书签代码
  async function runBookmarkCode(code) {
    if (!sandboxFrame) initSandbox();
    // 等待沙盒加载完成
    await new Promise(resolve => sandboxFrame.onload = resolve);
    // 发送代码到沙盒
    sandboxFrame.contentWindow.postMessage({
      type: 'RUN_BOOKMARK',
      code: code
    }, '*');
  }
  
  // 监听沙盒返回的结果
  window.addEventListener('message', (e) => {
    if (e.data.type === 'EXEC_RESULT') {
      console.log('执行成功:', e.data.result);
    } else if (e.data.type === 'EXEC_ERROR') {
      console.error('执行失败:', e.data.error);
    }
  });
  

• 注意：沙盒页面无法直接访问Chrome扩展API，所有与页面或扩展的交互都需要通过postMessage完成。如果书签代码需要操作当前页面DOM，可在沙盒执行后，将需要执行的DOM操作指令发送到content script执行。

3. Blob URL注入（补充方案） #

对于不含动态执行的代码，也可以通过Blob URL动态生成脚本并注入：

async function injectBookmarkCode(code) {
  const [tab] = await chrome.tabs.query({active: true, currentWindow: true});
  const blob = new Blob([code], {type: 'application/javascript'});
  const blobUrl = URL.createObjectURL(blob);
  try {
    await chrome.scripting.executeScript({
      target: {tabId: tab.id},
      files: [blobUrl]
    });
  } catch (err) {
    console.error('注入失败:', err);
  } finally {
    URL.revokeObjectURL(blobUrl);
  }
}

此方法无需提前创建脚本文件，但同样受限于CSP，无法执行含eval()的代码。

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