将Google Chrome屏幕截图集成到网站/ html中

Question

是否可以将Google Chrome屏幕捕获扩展程序集成到网站/ html中？

可以在https://code.google.com/p/chrome-screen-capture/source/browse/

找到源代码

Answer 1

无法集成此扩展程序，但我有另一种方法来截取您的网站。首先，您必须下载html2canvas。然后将其链接到您的页面上。
然后添加代码

的 HTML：

<div id="main-canvas">

            //content

        <div id="snip-controls">
            <a href="#" id="snip" onClick="snip()">Snip</a>
            <a href="#" id="save-snip" target="_blank" onClick="saveSnip()">Save</a>
        </div>
</div>

<强> JavaScript的：

function snip()
{
html2canvas($('#main-canvas'), {
   onrendered: function(canvas) {
     var img = canvas.toDataURL();
     document.getElementById('save-snip').href = img;
  }
});
}

注意：当您单击剪辑按钮时，保存按钮会获取新创建的剪辑的链接，当您单击保存剪辑按钮时，剪辑将显示为真实图像。

Answer 2

是的，你可以！

据我所知， externally_connectable 是唯一可以通过网页（使用javascript）调用扩展程序或发送消息（可能包含数据）的官方方式{{ 3}}

如果扩展程序不支持 externally_connectable ，则需要编辑扩展程序并为要集成的每个域添加预定义值。

但我们可以实施一种解决方法来与任何网站集成（而不是根本不定义任何域名）

如果您只是想通知另一方（扩展程序）有关某些事情，您可以使用原生 JS Event 从一侧（网页）调度文档并进行监听在文档在扩展内容脚本页面和网页之间共享时，也从另一侧（扩展名）到文档。

每次发送数据时，您都无法使用 JS CustomEvent 发送数据，因为 sandbox effect 任何扩展。

如果你想共享数据（可能是截图时滚动的限制）所以我​​目前唯一知道的解决方法是在某种存储和 JS native Event之间进行组合。 机制。

步骤中的解决方案（假设您需要调用网页并将某些数据发送到扩展程序）：

1. 通过网页在 document 上发布活动。

2. 将数据临时保存在您喜欢的任何存储技术中 （localStorage，DOM本身，或者什么......）

3. 通过聆听文档，编辑扩展名并添加事件监听器以在另一侧（分机）接收事件。
4. 读取数据并将其删除。