javascript - Chrome 扩展，有时未定义 jQuery

Question

当用户单击扩展程序的 browserAction 图标时，我以编程方式加载代码，有时可以正常工作，有时会出现 jQuery 未定义 错误。

这是我的代码:

var injectElementLoaded = false;

chrome.browserAction.onClicked.addListener(function (tab) {
    if (!injectElementLoaded) {
        chrome.tabs.executeScript(tab.id, {file: "/resources/js/jquery-2.2.1.min.js"});
        chrome.tabs.executeScript(tab.id, {file: "/resources/js/my_script.js"});
        chrome.tabs.insertCSS(tab.id, {file: "/resources/css/my_script.css"});

        norbertSidebarLoaded = true;
    }
    chrome.tabs.executeScript(tab.id, {code: "jQuery('body').trigger('execute-stuff')"}); // This is throwing issues
})

我在顶部正确定义了 jQuery，但我猜这还不够。我考虑过在上次调用代码中添加 setTimetout，但我不知道要等待多久。

有没有办法确保在调用最后一行之前加载我的脚本？

提前谢谢您。

Answer 1

您可以传递一个回调函数，该函数在执行脚本后调用。也就是说，您应该将上面的代码重写如下:

var injectElementLoaded = false;

chrome.browserAction.onClicked.addListener(function (tab) {
  var trigger = function() {
    chrome.tabs.executeScript(
      tab.id,
      {code: "jQuery('body').trigger('execute-stuff')"}
    );
  };
  if (!injectElementLoaded) {
    chrome.tabs.executeScript(
      tab.id,
      {file: "/resources/js/jquery-2.2.1.min.js"},
      function() {
          chrome.tabs.executeScript(
            tab.id,
            {file: "/resources/js/my_script.js"},
            function() {
                chrome.tabs.insertCSS(
                  tab.id,
                  {file: "/resources/css/my_script.css"},
                  function() {
                      norbertSidebarLoaded = true;
                      trigger();
                  });
            });
      });
  } else {
    trigger();
  }
});

如果我尝试应用 ES2015...

var injectElementLoaded = false;

const executeScript = (tabId, file) => {
  return new Promise((resolve, reject) => {
    chrome.tabs.executeScript(tabId, {file: file}, () => {
      resolve();
    });
  });
};

const insertCSS = (tabId, file) => {
  return new Promise((resolve, reject) => {
    chrome.tabs.insertCSS(tabId, {file: file}, () => {
      resolve();
    });
  });
};

const trigger = (tabId) => {
  chrome.tabs.executeScript(
    tabId,
    {code: "jQuery('body').trigger('execute-stuff')"}
  );
};

chrome.browserAction.onClicked.addListener(tab => {
  if (!injectElementLoaded) {
    executeScript(tab.id, "/resources/js/jquery-2.2.1.min.js")
      .then(() => {
        return executeScript(tab.id, "/resources/js/my_script.js");
      }).then(() => {
        return insertCSS(tab.id, "/resources/css/my_script.css");
      }).then(() => {
        norbertSidebarLoaded = true;
        trigger(tab.id);
      });
  } else {
    trigger(tab.id);
  }
});

无论如何，你应该使用回调函数。