使用 javascript 为 chrome 扩展截屏

因为您正在 Chrome 扩展中使用这种方法，所以 Tab API有一个名为 CaptureVisibleTab的方法，它允许捕获指定窗口中当前选择的选项卡的可见区域。

要使用它，只需将“选项卡”添加到 权限清单中。从你的后台页面，或者弹出窗口(或者任何其他的扩展页面) ，你可以像这样调用这个方法:

chrome.tabs.captureVisibleTab(null, {}, function (image) {
// You can add that image HTML5 canvas, or Element.
});

您可以通过添加{ Quality: 50}并更改格式来控制属性，所有这些都在上面提到的文档中进行了描述。

HTML5的美丽，你可以改变与 HTML5画布的图像，你可以操作，转换，修改，剪辑，任何你想要的，非常容易！

希望这就是你想要的! 新年快乐！

我不知道这是否可用的时候，原来的答案给出，但谷歌现在有一个例子，显示如何采取截图:

Http://developer.chrome.com/extensions/samples.html

在此页面搜索“测试屏幕快照扩展”。

更新: 下面是使用 desktopCapture API 的新示例:

Https://github.com/googlechrome/chrome-extensions-samples/tree/main/apps/samples/desktop-capture

如果你正在寻找工作的例子，我已经创建了扩展回购，其中采取整个网页的截图。看这里: https://github.com/marcinwieprzkowicz/take-screenshot

如果您在企业内部，您的 IT 可能会将策略 DisableScreenshot 设置为 true。 您可以通过输入 chrome://policy 并搜索这个密钥来检查它。

这是另一个对我有效的方法。
所需经费如下:
(a)在铬扩展中截屏
(b)截图必须有透明的背景
(c)屏幕截图必须通过 HTTP 传送到另一个进程 < br/>

在本节中，我将介绍一个代码片段寻址需求(b)
有用的参考资料如下:
Chrome 扩展调试器 api
Chrome devtools 协议调试器域
您可能需要从最后一个函数 attachToDebugger开始读取代码

function captureScreenshot(tabId) {


logMsg(`{page}: captureScreenshot: status=aboutTo, tabId=${tabId}`);


chrome.debugger.sendCommand(
{tabId:tabId},
"Page.captureScreenshot",
{format: "png", fromSurface: true},
response => {
if(chrome.runtime.lastError) {
logMsg(`{back}: captureScreenshot: status=failed, tabId=${tabId}`);
}
else {
var dataType = typeof(response.data);
logMsg(`{back}: captureScreenshot: status=success, tabId=${tabId}, dataType=${dataType}`);
saveScreenshotRemotely(response.data);
}
});


logMsg(`{page}: captureScreenshot: status=commandSent, tabId=${tabId}`);
}


//---------------------------------------------------------------------------


function setColorlessBackground(tabId) {


logMsg(`{back}: setColorlessBackground: status=aboutTo, tabId=${tabId}`);


chrome.debugger.sendCommand(
{tabId:tabId},
"Emulation.setDefaultBackgroundColorOverride",
{'color': {'r': 0, 'g': 0, 'b': 0, 'a': 0}},
function () {
logMsg(`{back}: setColorlessBackground: status=enabled, tabId=${tabId}`);
captureScreenshot(tabId);
});


logMsg(`{back}: setColorlessBackground: status=commandSent, tabId=${tabId}`);
}


//---------------------------------------------------------------------------


function enableDTPage(tabId) {


logMsg(`{back}: enableDTPage: status=aboutTo, tabId=${tabId}`);


chrome.debugger.sendCommand(
{tabId:tabId},
"Page.enable",
{},
function () {
logMsg(`{back}: enableDTPage: status=enabled, tabId=${tabId}`);
setColorlessBackground(tabId);
/*
* you can comment
* setColorlessBackground(tabId);
* and invoke
* captureScreenshot(tabId);
* directly if you are not interested in having a
* transparent background
*/
});


logMsg(`{back}: enableDTPage: status=commandSent, tabId=${tabId}`);
}


//---------------------------------------------------------------------------


function attachToDebugger(tabId) {
chrome.debugger.attach(
{tabId:tabId},
g_devtools_protocol_version,
() => {
if (chrome.runtime.lastError) {
alert(chrome.runtime.lastError.message);
logMsg(`{back}: debugger attach failed: error=${chrome.runtime.lastError.message}`);
}
else {
logMsg(`{back}: debugger attach success: tabId=${tabId}`);
enableDTPage(tabId);
}
});
}