将 CaptureVisibleTab 图像保存到临时文件以通过 Node.js 服务器发送答案

【问题标题】：Save a CaptureVisibleTab image to a temp file to send through Node.js server将 CaptureVisibleTab 图像保存到临时文件以通过 Node.js 服务器发送
【发布时间】：2017-12-11 20:21:30
【问题描述】：

我正在尝试使用 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>

这是单击扩展程序后显示图像的页面。

【问题讨论】：

标签： javascript html css node.js google-chrome-extension

【解决方案1】：

您可以使用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 权限。

【讨论】：

如果我使用本地存储，它会不会保存在用户计算机上，直到他们删除它？我正在为工作做一个模拟项目，客户（用户）无法将任何文件保存到他们的计算机上。
@CalciumCal 用户无权直接访问本地存储数据。它会一直存在，直到扩展程序将其删除。
哦，我真的不知道。我的印象是本地存储本质上是他们将其保存到他们的个人目录中，但我实际上认为，如果我能找到一种方法将其保存到本地系统然后在完成后将其删除，那么这就是我正在寻找的东西。谢谢！