创建一个屏幕截图插件

Question

有没有人有一个很好的教程，为Firefox和/或Chrome创建一个简单的屏幕截图插件？

Answer 1

不确定关于Firefox，但在Chrome扩展中，您可以捕获chrome.tabs.captureVisibleTab()的选项卡，该选项卡将以Data URI格式返回图像。之后，如果需要，您可以使用Canvas元素操作图像。

Answer 2

有一个关于如何使用Chrome的http://code.google.com/chrome/extensions/dev/samples.html#e1697cacebad05218798bf3e8a0f724517f0e8c3

Answer 3

做到这一点的样本扩展下面是Firefox的一个片段。在您的覆盖XUL补充：

<html:canvas id="my-canvas" style="display: none;" /> 

然后在你覆盖的javascript，listen for new document loads这个片段将截图保存到一个文件：

var canvas = document.getElementById('my-canvas'); 
    var context = canvas.getContext('2d'); 

    //Find the window dimensions 
    canvas.height = doc.defaultView.innerHeight; //doc is the content document that you listened for 
    canvas.width = doc.defaultView.innerWidth; 

    context.drawWindow(doc.defaultView, 0, 0, canvas.width, canvas.height, "rgba(0,0,0,0)"); 

    //Create a data url from the canvas 
    var dataUrl = canvas.toDataURL("image/png"); 

阅读有关nsiIOService和nsiWebBrowserPersist从传输数据的URL创建一个nsiURI然后在本地坚持。