我正在尝试使用 Chrome 扩展程序捕获可见选项卡。我已经设法让图像显示在另一个选项卡中以检查其工作情况。但我实际上想要拍摄图像，将其以 PNG 格式保存在用户计算机上的临时文件中。然后最终被发送到服务器，但这是一个不同的问题。如果格式不好，请道歉，我正在学习。
var id = 100;
chrome.browserAction.onClicked.addListener(function() {
chrome.tabs.captureVisibleTab(function(screenshotUrl) {
var viewTabUrl = chrome.extension.getURL('../HTML/InfoPullHTML.html?id=' + id++)
var targetId = null;
chrome.tabs.onUpdated.addListener(function listener(tabId, changedProps) {
if (tabId != targetId || changedProps.status != "complete")
return;
// alert('test2');
chrome.tabs.onUpdated.removeListener(listener);
// alert('test3');
var views = chrome.extension.getViews();
// alert('test4');
for (var i = 0; i < views.length; i++) {
var view = views[i];
// alert('test' + (i + 5));
if (view.location.href == viewTabUrl) {
view.setScreenshotUrl(screenshotUrl);
break;
}
}
});
// alert('AfterForLoop');
chrome.tabs.create({url: viewTabUrl}, function(tab) {
targetId = tab.id;
});
});
});
图像已拍摄。将图像另存为 PNG 并保存在用户计算机上的临时文件中。
现在我唯一的结果是拍摄图像然后显示在新选项卡中。我是编码初学者，对于如何继续前进我没有丝毫线索。
<!DOCTYPE html>
<html>
<script src="../JavaScript/BrowserInfoJS.js"></script>
<script src="../JavaScript/ScreenshotTargetJS.js"></script>
<head>
<title></title>
</head>
<body>
Image here:
<p>
<img id="target" src="../images/white.png">
<p>
End image
</body>
</html>
这是单击扩展程序后显示图像的页面。
最佳答案
有storage APIs您可以使用。要保存文件，请使用 Filesystem .
但是由于您似乎只想保存文件以便稍后上传，因此处理本地存储 API 会更简单:
chrome.tabs.captureVisibleTab({format:"png"}, src=>{
//
chrome.storage.local.get({"captured": []}, s=>{
//
s.captured.push(src);
chrome.storage.local.set({"captured": s.captured});
});
});
如果您要存储大图像或一次存储多个图像，请务必声明 unlimitedStorage 权限。
关于javascript - 将 CaptureVisibleTab 图像保存到临时文件以通过 Node.js 服务器发送，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47751834/