javascript - Chrome 扩展程序 - 通过承诺运行顺序功能不起作用

Question

我有一个正在构建的 chrome 扩展程序 (JS)，当用户单击弹出窗口中的按钮时，扩展程序会更新 chrome.storage.local 以反映弹出窗口上的内容以及（理论上）完成时，它将运行三个内容脚本。不幸的是，内容脚本似乎在 popup.js 中设置信息之前启动。

我已经尝试过 Timeouts 和 Promises，但是两者都在执行“chrome.storage.local.set”（在 updateStorage() 函数中）之前运行下一个函数。有没有更好的方法/我缺少的东西？

popup.js

console.log("popup.js");
function doContent() {
  console.log("content1");
  //checkboxes = document.getElementsByTagName("input");
  //checkCheckboxes(checkboxes);
  chrome.tabs.executeScript(null, { file: "content_addNote.js" });
}
function checkCheckboxes(checkboxes, orderArray) {
  //console.log("checkboxes");
  //console.log(checkboxes);
  console.log("orderArray");
  console.log(orderArray);
  console.log("for loop running");
  var ii = 0;
  for (var i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].type == "checkbox") {
      if (checkboxes[i].checked === false) {
        console.log(i, orderArray[i], "will be removed for the list");
        //console.log(orderArray[i]);

        orderArray.splice(ii, 1);
        ii = ii - 1;
        console.log(orderArray);
      }
      ii += 1;
      //console.log(i, checkboxes[i].checked);
    }
  }
  console.log("for loop ended");
  console.log("Output from checkCheckboxes");
  console.log(orderArray);
  return orderArray;
}

function updateStorage() {
  console.log("updateStorage");
  var emailSelect = document.getElementById("SelEmailType");
  var emailType = emailSelect.options[emailSelect.selectedIndex].id;
  if (document.getElementById("itemInfo").innerHTML === "Placeholder") {
    console.log("Error. Placeholder not found");
  } else {
    var storedLegal = chrome.storage.local.get("newStorage", function (items) {
      var newArray = { ...items };
      console.log(newArray);
      var orderList = items.newStorage.src_items;
      console.log("orderList", orderList);
      //console.log("indexOf", orderList.indexOf("\n"));
      var orderArray = orderList.split("\n");
      var checkboxes = new Array();
      checkboxes = document.getElementsByTagName("input");
      updatedOrder = checkCheckboxes(checkboxes, orderArray);

      console.log(updatedOrder);
      arraString = updatedOrder.join("\n");
      //console.log(arraString);
      //alert(arraString);
      newArray.newStorage.src_items = arraString;
      newArray.newStorage.src_emailType = emailType;
      console.log("start newArray");
      console.log(newArray);
      console.log("end newArray");

      console.log(newArray.newStorage);
      chrome.storage.local.clear();
      chrome.storage.local.set({
        newStorage: newArray.newStorage,
      });
      //chrome.runtime.sendMessage({ newStorage: newArray.newStorage });
      console.log("stored");
      //console.log(chrome.runtime.local.get({ newStorage }));
    });
  }
  console.log("End storedLegal");
  return;
}

function one_by_one(objects_array, iterator, callback) {
  /* var x = 1;
  var y = null; // To keep under proper scope
  setTimeout(function () {
    x = x * 3 + 2;
    y = x / 2;
  }, 500); */
  var start_promise = objects_array.reduce(function (prom, object) {
    return prom.then(function () {
      //var y = null; // To keep under proper scope
      /*       setTimeout(function () {
        x = x * 3 + 2;
        y = x / 2;
      }, 500);
      x = 1;
      y = null; */
      return chrome.tabs.executeScript(null, { file: object }); //iterator(object);
    });
  }, Promise.resolve()); // initial
  if (callback) {
    start_promise.then(callback);
  } else {
    return start_promise;
  }
}
/* 
function processArray(arr, fn) {
  return arr.reduce(
    (p, v) => p.then((a) => fn(v).then((r) => a.concat([r]))),
    Promise.resolve([])
  );
} */

function doContent2() {
  console.log("doContent2");

  updateStorage();

  fileFunctions = [
    "content2.js",
    "content_addShippingNote.js",
    "content_addNote.js",
    "disconnect.js",
  ];
  var x = 1;
  var y = null; // To keep under proper scope

  console.log("fileFunctions ");
  new Promise((resolve, reject) => {
    // Promise #1
    updateStorage();
    console.log("Promise #1 ");
    setTimeout(function () {
      x = x * 3 + 2;
      y = x / 2;
    }, 1000);
    resolve();
  })
    .then((result) => {
      var storedLegal = chrome.storage.local.get("newStorage", function (
        items
      ) {
        if ((items = undefined)) {
          console.log("item not found");
          // To keep under proper scope
          setTimeout(function () {
            x = 1;
            y = null;
            x = x * 3 + 2;
            y = x / 2;
          }, 500);
        }

        //console.log(items);
      });
      // Promise #2
      chrome.tabs.executeScript(null, { file: "content2.js" });

      console.log("Promise #2 ");
      return result;
    })
    .then((result) => {
      // Promise #3
      chrome.tabs.executeScript(null, { file: "content_addShippingNote.js" });
      console.log("Promise #3 ");
      return result;
    })
    .then((result) => {
      // Promise #3
      chrome.tabs.executeScript(null, { file: "content_addNote.js" });
      console.log("Promise #4 ");
      return result;
    });
  //processArray(fileFunctions, runScript).then(console.log);
  //fileFunctions.forEach(runScript);
  //one_by_one(fileFunctions, "", "");

  /*  var promised = new Promise(updateStorage).then((result, err) => {
    console.log("YA");
    fileFunctions.forEach(runScript);
  }); */

  document.getElementById("btnCreateEmail").addEventListener("click", null);
  //fileFunctions.forEach(runScript);
  /*   chrome.tabs.executeScript(null, { file: "content2.js" }),
      chrome.tabs.executeScript(null, { file: "content_addShippingNote.js" }),
      chrome.tabs.executeScript(null, { file: "content_addNote.js" }),
      chrome.tabs.executeScript(null, { file: "disconnect.js" }), */
}

function runScript(fileName, index) {
  console.log(index, ": ", fileName);
  chrome.tabs.executeScript(null, { file: fileName });
}

function clearStorage() {
  chrome.tabs.executeScript(null, { file: "disconnect.js" });
  alert("local cleared");
}

function orderToHTML(orderList) {
  var orderArray = orderList.split("\n");

  // Draw HTML table
  var perrow = 2, // cells per row
    html = "<table><tbody>";

  // Loop through array and add table cells
  for (var i = 0; i < orderArray.length; i++) {
    html +=
      "<tr><td><input type=" &
      "checkbox" &
      " " &
      "id=" &
      i &
      "/></td><td>" &
      orderArray[i] &
      "</td></tr>";

    var next = i + 1;
    if (next % perrow == 0 && next != orderArray.length) {
      html += "</tr><tr>";
    }
  }
  html += "</tbody></table>";
  // Attach HTML to container
  return html;
}
function setWaitPeriod(time) {
  var x = 1;
  var y = null; // To keep under proper scope
  setTimeout(function () {
    x = x * 3 + 2;
    y = x / 2;
  }, time);
}
//window.onload = function () {

//console.log("window.onload");
chrome.runtime.sendMessage({ popupOpen: true });
var port = chrome.runtime.connect();

chrome.runtime.onMessage.addListener((msg, sender) => {
  // First, validate the message's structure.
  if (msg.from === "content" && msg.subject === "showPageAction") {
    document.getElementById("container").innerHTML = msg.container;
    document.getElementById("itemInfo").innerHTML = msg.itemInfo;
  }
});

document.getElementById("btnCreateEmail").addEventListener("click", doContent2);
//document.getElementById("btnClear").addEventListener("click", clearStorage);
//});

标签： javascriptgoogle-chromegoogle-chrome-extensionpromisees6-promise