代码之家  ›  专栏  ›  技术社区  ›  Skyyade

如何在Chrome扩展程序中导入html2canvas

  •  0
  • Skyyade  · 技术社区  · 1 年前

    我使用以下代码创建了一个扩展来捕获正文,但我收到了一条错误消息。

    请帮忙。

    [错误消息]

    Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: chrome-extension://... /js/content.js
    

    [源代码] manifest.json

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

    content.js

    import html2canvas from './html2canvas';
    
    let target_element = document.getElementsByTagName('body')[0];
    let button_element = document.createElement('button');
    button_element.setAttribute("id", "captcha-btn");
    button_element.innerHTML = 'test';
    target_element.prepend(button_element);
    
    let target_pankuzu_element = document.getElementsByTagName('body')[0];
    let img_element = document.createElement('img');
    img_element.setAttribute("id", "result");
    target_pankuzu_element.prepend(img_element);
    
    const BUTTON_CLICK_EVENT= document.getElementById('captcha-btn');
    BUTTON_CLICK_EVENT.addEventListener('click', () => {
        html2canvas(document.getElementsByTagName('body')[0],{}).then(function(canvas){
            document.getElementById('result').src = canvas.toDataURL();
        })
    });
    

    script.js

    (async() => {
        const src = chrome.runtime.getURL("js/content.js");
        const contentMain = await import(src);
    })();
    

    无错误地执行。

    1 回复  |  直到 1 年前
        1
  •  0
  •   woxxom    1 年前

    从'导入html2canvas/html2canvas';

    内容脚本无法使用相对路径导入其他扩展脚本,因为它们在网站的源代码中运行,因此您应该使用webpack或类似的bundler构建此脚本。

    但是,这里不需要模块。

    1. 删除script.js和 web_accessible_resources .
    2. 列出中的脚本 content_scripts 它们将按照指定的顺序运行。

    manifest.json:

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

    content.js:

    // no need for import, html2canvas.js already ran and created a global
    html2canvas(document.querySelector("#capture")).then(canvas => {
      document.body.appendChild(canvas)
    });