Google Chrome扩展程序的JavaScript屏幕截图

Question

我目前正在构建一个Google Chrome扩展程序，该扩展程序可以从不同页面获取多个屏幕截图并将其发布到端点上。 我遇到的问题是时间不对。 我的意思是，在页面甚至停止加载之前，屏幕快照就被采取得太早了。 其次，我只从链接类型WE中收到第二个屏幕截图（不是来自PA类型的第一个屏幕截图），好像动作太快了，只是跳过了PA。 我对JS不太好，如果有人对如何使此代码更好的方法有所指点，我会耳熟。 谢谢。

background.js

var id = 100;
var currentObject;
var myTimer;

function wait()
   {setTimeout(wait, 1000);}

chrome.browserAction.onClicked.addListener(
function fireTimer() {
    localStorage["allLocations"] = JSON.stringify([{
      'type': 'PA',
      'url': 'https://app.powerbi.com/groups/me/reports/ReportSection2?chromeless=true'
    },
    {
      'type': 'WE',
      'url': 'https://app.powerbi.com/groups/me/reports/ReportSection?chromeless=true'
    }]);
    myTimer = setInterval(fireScreenshots, 1*60*1000);
});

function fireScreenshots(){
  var allLocations = JSON.parse(localStorage["allLocations"]);
  allLocations.forEach( function (arrayItem)
  {
      if (arrayItem.type != undefined && arrayItem.url != undefined){
        retrieveWebPage(arrayItem)
      }
  });
}

function retrieveWebPage(data){
  currentObject = data;
  chrome.tabs.update({
       url: currentObject.url
  });
  chrome.tabs.onUpdated.addListener(function updatedListener(tabId , info) {
  chrome.tabs.onUpdated.removeListener(updatedListener);
  if (info.status == 'complete' && currentObject != undefined) {
    chrome.tabs.captureVisibleTab(null, {format: "jpeg", quality: 100}, function(screenshotUrl) {
      var xhr = new XMLHttpRequest() , formData = new FormData();
      formData.append("image", screenshotUrl);
      formData.append("dashboard_type", currentObject.type);
      xhr.open("POST", "http://intranet/api/powerbi/screenshots_upload/");
      xhr.send(formData);
    });
  }
});
}

Answer 1

奇怪的是，验证info.status == 'complete'不足以知道页面已加载。

1秒超时可能是您问题的临时解决方案。 甚至在DOM完成加载后（尤其是在SPAs类型的应用程序中），可能是您正在加载的网页中的某些脚本正在工作以更新/显示网页。

setTimeout(function() {
chrome.tabs.captureVisibleTab(null, {format: "jpeg", quality: 100}, function(screenshotUrl) {
      var xhr = new XMLHttpRequest() , formData = new FormData();
      formData.append("image", screenshotUrl);
      formData.append("dashboard_type", currentObject.type);
      xhr.open("POST", "http://intranet/api/powerbi/screenshots_upload/");
      xhr.send(formData);
    });
}, 1000);