Chrome扩展中导入OpenCV报错：cv未定义

问题概述 #

在Manifest V3的Chrome扩展中，无论是直接在content_scripts中引入OpenCV.js，还是通过动态插入脚本的方式加载，均出现ReferenceError: cv is not defined错误，但其他第三方库（如html2canvas、Tesseract）可正常加载。

核心原因 #

1. Manifest V3上下文隔离机制：内容脚本与页面上下文完全隔离，动态插入到页面的脚本会将cv挂载到页面的window对象，内容脚本无法直接访问该对象。
2. OpenCV.js异步初始化特性：OpenCV.js加载完成后不会立即生成cv对象，需等待WebAssembly模块初始化完成（触发cv.onRuntimeInitialized事件）。
3. 内容安全策略（CSP）限制：Manifest V3默认CSP禁止unsafe-eval和Blob资源加载，而OpenCV.js初始化依赖这些权限。

解决方案 #

1. 调整Manifest的内容安全策略（CSP） #

修改manifest.json中的content_security_policy，添加OpenCV.js所需权限：

"content_security_policy": {
  "extension_pages": "script-src 'self' 'unsafe-eval'; object-src 'self'; media-src 'self' blob:;"
}

2. 确保WebAssembly资源可访问 #

确认web_accessible_resources包含OpenCV.js依赖的opencv_js.wasm文件（通常与opencv.js同目录），现有配置已覆盖scripts/*，无需额外修改：

"web_accessible_resources": [
  {
    "resources": ["scripts/*"],
    "matches": ["<all_urls>"],
    "use_dynamic_url": true
  }
]

3. 正确等待OpenCV初始化完成 #

场景1：直接在content_scripts中引入OpenCV.js

在content.js中添加等待初始化逻辑，不要依赖脚本onload事件：

// 等待OpenCV初始化完成
function waitForOpenCV() {
  return new Promise((resolve) => {
    // 检查是否已初始化
    if (typeof cv !== 'undefined' && cv.getBuildInformation) {
      resolve();
    } else {
      // 监听初始化完成事件
      cv.onRuntimeInitialized = resolve;
    }
  });
}

// 使用示例
async function processWithCV() {
  await waitForOpenCV();
  // 此时可正常使用cv对象
  const testMat = new cv.Mat(50, 50, cv.CV_8UC1);
  console.log('OpenCV初始化完成，Mat行数:', testMat.rows);
}

场景2：动态插入脚本到页面上下文

由于内容脚本无法直接访问页面上下文的cv，需通过自定义事件完成跨上下文通信：

let initializingCVPromise;
const CONSTANTS = { scriptIdCV: 'opencv-script' };

async function initializeCV() {
  if (initializingCVPromise) {
    return initializingCVPromise;
  }

  initializingCVPromise = new Promise((resolve, reject) => {
    const existingScript = document.getElementById(CONSTANTS.scriptIdCV);
    if (existingScript) {
      window.addEventListener('opencv-ready', resolve, { once: true });
      return;
    }

    const script = document.createElement('script');
    script.id = CONSTANTS.scriptIdCV;
    script.src = chrome.runtime.getURL("scripts/opencv/opencv.js");
    
    script.onload = () => {
      console.log('OpenCV脚本已加载，等待WebAssembly初始化');
      // 在页面上下文注入初始化监听代码
      const initListener = document.createElement('script');
      initListener.textContent = `
        cv.onRuntimeInitialized = () => {
          window.dispatchEvent(new CustomEvent('opencv-ready'));
        };
      `;
      document.head.appendChild(initListener);
    };

    script.onerror = () => reject(new Error('OpenCV脚本加载失败'));
    document.head.appendChild(script);

    // 监听页面发送的初始化完成事件
    window.addEventListener('opencv-ready', resolve, { once: true });
  });

  return initializingCVPromise;
}

// 使用示例：通过页面上下文执行OpenCV操作并返回结果
async function runCVProcess() {
  await initializeCV();
  
  const result = await new Promise((resolve) => {
    // 在页面上下文注入处理逻辑
    const processScript = document.createElement('script');
    processScript.textContent = `
      function cvProcess() {
        const src = new cv.Mat(100, 100, cv.CV_8UC3, [255, 0, 0]);
        const gray = new cv.Mat();
        cv.cvtColor(src, gray, cv.COLOR_RGB2GRAY);
        return gray.size().width;
      }
      const processResult = cvProcess();
      window.dispatchEvent(new CustomEvent('opencv-process-result', { detail: processResult }));
    `;
    document.head.appendChild(processScript);
    
    // 接收处理结果
    window.addEventListener('opencv-process-result', (e) => {
      resolve(e.detail);
    }, { once: true });
  });

  console.log('OpenCV处理结果:', result);
}

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