Question

我的Firefox WebExtension应该可以截取完整的网页。为此，我使用html2canvas。但是当我调用这个函数时，该函数永远不会附加canvas元素..（console.log也不会打印）。并且不会出现错误异常。

编辑：忘记链接 html2canvas.js 的来源：https://github.com/niklasvh/html2canvas。 html2canvas / dist / html2canvas.js 是我需要的WebExtension脚本。在 html2canvas / examples / demo.html 或其他示例中添加console.log时，例如

...
html2canvas(document.body).then(function(canvas) {
        document.body.appendChild(canvas);
        console.log("finished...");
    });
...

你会看到html2canvas成功截取屏幕截图并且控制台记录“已完成......”。

你能告诉我，我需要更改/添加代码吗？

的manifest.json：

{
  "description": "capture screen with html2canvas",
  "manifest_version": 2,
  "name": "my Extension",
  "version": "1.0",
  "web_accessible_resources": [
      "html2canvas/dist/html2canvas.js"
  ],
  "content_scripts": [
    {
      "matches": ["*://*.mozilla.org/*"],
      "js": ["content.js", "html2canvas/dist/html2canvas.js"]
    }
  ]
}

content.js：外部模式中的按钮。点击该按钮后，系统会调用html2canvas - ＆gt;第二个模态（结果为html2canvas）将被追加

var modalOuter = document.createElement("div");
modalOuter.style.width = "100%";
modalOuter.style.height = "100%";
modalOuter.style.position = "fixed";
modalOuter.style.top = 0;
modalOuter.style.left = 0;
modalOuter.style.paddingright = "60px";
modalOuter.style.zIndex = 1000000;
modalOuter.style.overflow = "auto";
var button_TakeShot = document.createElement("button");
button_TakeShot.setAttribute("id", "takeScreenshotButtonID");
button_TakeShot.innerHTML = "Take Screenshot";
modalOuter.appendChild(button_TakeShot);
document.getElementsByTagName('body')[0].appendChild(modalOuter);

var modalContent = document.createElement("div");
modalContent.style.backgroundColor = "#fefefe";
modalContent.style.border = "1px solid #888";
modalContent.innerHTML = "Screenshot...";

document.getElementById('takeScreenshotButtonID').addEventListener('click', function() {
    button_TakeShot.style.display = "none"; 
    html2canvas(document.getElementsByTagName('body')[0], {
        onrendered: function(canvas) {
        console.log("finished...");
        modalContent.appendChild(canvas);
    }
});
modalOuter.appendChild(modalContent);
});

如何在webextension中集成html2canvas？

0 个答案: