Chrome扩展中html2canvas加载后window.html2canvas未定义问题求助

开发Chrome扩展时采用直接注入JS的方式实现状态切换，避免点击标签页时扩展失焦关闭，但在使用html2canvas时遇到问题：动态加载脚本后，window.html2canvas始终为undefined，即使控制台显示脚本已成功加载。

一、Popup页面结构 #

<body>
    <script src="popup.js"></script>
</body>

二、核心代码实现 #

1. 调用html2canvas的鼠标抬起事件处理函数 #

async function mouseUpHandler(e) {
    if (!isSelecting) return;
  
    isSelecting = false;
  
    // 移除事件监听器和遮罩层
    const overlay = document.getElementById("selectionOverlay");
    overlay.removeEventListener("mousedown", mouseDownHandler);
    overlay.removeEventListener("mousemove", mouseMoveHandler);
    overlay.removeEventListener("mouseup", mouseUpHandler);
    document.body.removeChild(overlay);
  
    // 获取选中区域坐标
    const rect = selectionBox.getBoundingClientRect();
  
    // 移除选框
    selectionBox.remove();
  
    console.log("Selected area:", rect);
  
    try {
      // 等待html2canvas加载完成
      await loadHtml2Canvas();
  
      // 调用html2canvas截图
      window.html2canvas(document.body, {
        x: rect.left + window.scrollX,
        y: rect.top + window.scrollY,
        width: rect.width,
        height: rect.height,
        windowWidth: document.documentElement.scrollWidth,
        windowHeight: document.documentElement.scrollHeight,
        scale: window.devicePixelRatio // 适配高DPI屏幕
      })
      .then((canvas) => {
        const dataUrl = canvas.toDataURL("image/png");
        console.log("Captured image data URL:", dataUrl);
  
        // 存储截图数据
        capturedImageDataUrl = dataUrl;
  
        // 在侧边栏展示截图
        displayCapturedImage(dataUrl);
      })
      .catch((error) => {
        console.error('html2canvas error:', error);
      });
    } catch (error) {
      console.error(error.message);
    }
}

2. 动态加载html2canvas的函数 #

function loadHtml2Canvas() {
    return new Promise((resolve, reject) => {
      // 检查是否已加载
      if (typeof window.html2canvas !== 'undefined') {
        console.log('html2canvas is already loaded.');
        resolve();
        return;
      }
  
      // 动态创建脚本标签加载html2canvas
      let script = document.createElement('script');
      const scriptUrl = chrome.runtime.getURL('html2canvas.min.js');
      console.log('Loading html2canvas from:', scriptUrl);
      
      script.src = scriptUrl;
  
      script.onload = function() {
        console.log('html2canvas loaded dynamically.');
        if (typeof window.html2canvas !== 'undefined') {
          resolve();
        } else {
          reject(new Error('window.html2canvas is still not defined after loading.'));
        }
      };
  
      script.onerror = function() {
        reject(new Error('Failed to load html2canvas.'));
      };
  
      // 添加到文档头部
      document.head.appendChild(script);
    });
}

三、问题现象 #

控制台日志显示脚本已加载，但window.html2canvas仍未定义：

Selected area: DOMRect {x: 0, y: 0, width: 0, height: 0, top: 0, …}
content.js:409 Loading html2canvas from: chrome-extension://geekmcfbhphgbnafmfmcmhjeaeoaikod/html2canvas.min.js
content.js:414 html2canvas loaded dynamically.
content.js:482 window.html2canvas is still not defined after loading.
mouseUpHandler @ content.js:482

四、已尝试的配置 #

曾在manifest.json中配置内容脚本和可访问资源，但问题依旧：

"content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["html2canvas.min.js", "content.js"]
    }
  ],
  "web_accessible_resources": [
    {
      "resources": ["html2canvas.min.js"], 
      "matches": ["<all_urls>"]
    }
  ]

可行解决思路 #

1. 解决上下文隔离问题 #

Chrome扩展的内容脚本运行在独立的隔离上下文，动态注入的脚本属于页面上下文，内容脚本无法直接访问页面上下文的window.html2canvas。可通过消息传递打通两个上下文：

function loadHtml2Canvas() {
    return new Promise((resolve, reject) => {
      if (window.hasOwnProperty('html2canvasLoaded')) {
        resolve();
        return;
      }

      const script = document.createElement('script');
      script.src = chrome.runtime.getURL('html2canvas.min.js');
      script.onload = () => {
        // 注入代码在页面上下文确认加载并发送消息
        const checkScript = document.createElement('script');
        checkScript.textContent = `
          if (typeof html2canvas !== 'undefined') {
            window.postMessage({ type: 'HTML2CANVAS_LOADED' }, '*');
          }
        `;
        document.head.appendChild(checkScript);
      };
      script.onerror = () => reject(new Error('Failed to load html2canvas'));
      document.head.appendChild(script);

      // 监听页面上下文的消息
      const listener = (e) => {
        if (e.data.type === 'HTML2CANVAS_LOADED') {
          window.html2canvasLoaded = true;
          window.removeEventListener('message', listener);
          resolve();
        }
      };
      window.addEventListener('message', listener);
    });
}

2. 适配ES模块版本 #

如果使用的是html2canvas的ES模块版本，需修改加载逻辑：

function loadHtml2Canvas() {
    return new Promise((resolve, reject) => {
      if (window.hasOwnProperty('html2canvasLoaded')) {
        resolve();
        return;
      }

      const script = document.createElement('script');
      script.type = 'module';
      script.textContent = `
        import html2canvas from '${chrome.runtime.getURL('html2canvas.min.js')}';
        window.html2canvas = html2canvas;
        window.postMessage({ type: 'HTML2CANVAS_LOADED' }, '*');
      `;
      script.onerror = () => reject(new Error('Failed to load html2canvas module'));
      document.head.appendChild(script);

      const listener = (e) => {
        if (e.data.type === 'HTML2CANVAS_LOADED') {
          window.html2canvasLoaded = true;
          window.removeEventListener('message', listener);
          resolve();
        }
      };
      window.addEventListener('message', listener);
    });
}

3. 检查html2canvas版本兼容性 #

部分新版本html2canvas可能不再默认挂载到window对象，需手动确认导出方式，或降级到稳定版本测试。

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