Javascript Chrome扩展连接Chrome调试器并拍摄完整屏幕截图
我想使用chrome插件在活动选项卡中拍摄一张全尺寸屏幕截图 我知道有一个名为chrome.tabs.captureVisibleTab()的函数,但这无助于获得完整的页面截图 我知道我们可以从chrome上获得一个完整的页面截图(devtools>ctrl+shift+p>Capture full size screenshot)。我想使用此功能或其他功能截图 使用下面给出的代码,我可以在linux机器上拍摄完整的屏幕截图。但当我在windows机器上运行插件时,我会得到如下图像: 这是我的密码。从底部开始阅读可能更有帮助:Javascript Chrome扩展连接Chrome调试器并拍摄完整屏幕截图,javascript,google-chrome,google-chrome-extension,google-chrome-devtools,Javascript,Google Chrome,Google Chrome Extension,Google Chrome Devtools,我想使用chrome插件在活动选项卡中拍摄一张全尺寸屏幕截图 我知道有一个名为chrome.tabs.captureVisibleTab()的函数,但这无助于获得完整的页面截图 我知道我们可以从chrome上获得一个完整的页面截图(devtools>ctrl+shift+p>Capture full size screenshot)。我想使用此功能或其他功能截图 使用下面给出的代码,我可以在linux机器上拍摄完整的屏幕截图。但当我在windows机器上运行插件时,我会得到如下图像: 这是我的
chrome.tabs.onUpdated.addListener(attachToDebugger);
function clearDeviceMetricsOverride(tabId, base_64_data) {
chrome.debugger.sendCommand(
{
tabId: tabId,
},
"Emulation.clearDeviceMetricsOverride",
function () {
postData(base_64_data, tabId);
}
);
}
function captureScreenshot(tabId) {
console.log(`{page}: captureScreenshot: status=aboutTo, tabId=${tabId}`);
chrome.debugger.sendCommand(
{ tabId: tabId },
"Page.captureScreenshot",
{
format: "jpeg",
quality: 60,
fromSurface: false,
},
(response) => {
if (chrome.runtime.lastError) {
console.log(`{back}: captureScreenshot: status=failed, tabId=${tabId}`);
} else {
var dataType = typeof response.data;
console.log(
`{back}: captureScreenshot: status=success, tabId=${tabId}, dataType=${dataType}`
);
let base_64_data = "data:image/jpg;base64," + response.data;
setTimeout(() => {
clearDeviceMetricsOverride(tabId, base_64_data);
}, 500);
}
}
);
console.log(`{page}: captureScreenshot: status=commandSent, tabId=${tabId}`);
}
//---------------------------------------------------------------------------
function setDeviceMetricsOverride(tabId, height, width) {
chrome.debugger.sendCommand(
{
tabId: tabId,
},
"Emulation.setDeviceMetricsOverride",
{ height: height, width: width, deviceScaleFactor: 1, mobile: false },
function () {
setTimeout(() => {
captureScreenshot(tabId);
}, 500);
}
);
}
//---------------------------------------------------------------------------
function getLayoutMetrics(tabId) {
chrome.debugger.sendCommand(
{
tabId: tabId,
},
"Page.getLayoutMetrics",
{},
function (object) {
console.log("---- get layout w: " + object.contentSize.width);
console.log("---- get layout h: " + object.contentSize.height);
const { height, width } = object.contentSize;
setDeviceMetricsOverride(tabId, height, width);
}
);
}
//---------------------------------------------------------------------------
function setColorlessBackground(tabId) {
console.log(`{back}: setColorlessBackground: status=aboutTo, tabId=${tabId}`);
chrome.debugger.sendCommand(
{ tabId: tabId },
"Emulation.setDefaultBackgroundColorOverride",
{ color: { r: 0, g: 0, b: 0, a: 0 } },
function () {
console.log(
`{back}: setColorlessBackground: status=enabled, tabId=${tabId}`
);
getLayoutMetrics(tabId);
}
);
console.log(
`{back}: setColorlessBackground: status=commandSent, tabId=${tabId}`
);
}
//---------------------------------------------------------------------------
function enableDTPage(tabId) {
console.log(`{back}: enableDTPage: status=aboutTo, tabId=${tabId}`);
chrome.debugger.sendCommand({ tabId: tabId }, "Page.enable", {}, function () {
console.log(`{back}: enableDTPage: status=enabled, tabId=${tabId}`);
setColorlessBackground(tabId);
});
console.log(`{back}: enableDTPage: status=commandSent, tabId=${tabId}`);
}
//---------------------------------------------------------------------------
function attachToDebugger(tabId, changeInfo, tab) {
try {
if (tab.status == "complete") {
chrome.debugger.attach({ tabId: tabId }, "1.0", () => {
if (chrome.runtime.lastError) {
console.log(
`{back}: debugger attach failed: error=${chrome.runtime.lastError.message}`
);
} else {
console.log(`{back}: debugger attach success: tabId=${tabId}`);
enableDTPage(tabId);
}
});
}
} catch {}
}
使用下面给出的代码,我可以在linux机器上拍摄完整的屏幕截图
不确定Linux如何区分表面和视图(如果代码有效),但对于Windows,您必须更改以下内容:
"Page.captureScreenshot",
{
format: "jpeg",
quality: 60,
fromSurface: false,
为此:
"Page.captureScreenshot",
{
format: "jpeg",
quality: 60,
fromSurface: true,
您的代码将使用此修复程序生成完整页面的屏幕截图。我不确定您是否更改了获取此代码的示例中的
fromSurface
属性值,因为在文档中,他们说如果设置为false
,此属性将强制API在视图中创建屏幕截图,这对于裁剪结果是有意义的。因为它在Linux中正常工作,唯一的解释是它是Chrome中的一个bug。当我在Puppeter中查看代码时,我看到它以与我相同的方式拍摄屏幕截图()在windows机器上使用Puppeter拍摄屏幕截图是可以的。所以我不认为这是一个bug。如果扩展中的同一个命令在Linux而不是Windows中产生正确的结果,没有其他解释。嘿!这方面成功了吗?