Javascript Chrome扩展，jQuery没有定义，有时

当用户单击扩展插件的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

，但我不知道要等多久

是否有办法确保在调用最后一行之前加载脚本

---

提前感谢。

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

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);
  }
});

---

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

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

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);
  }
});

---

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

如果在第一次单击扩展图标和第二次单击之间，选项卡上有导航，或者如果切换选项卡，您将尝试在其他脚本未运行的上下文中执行最后一行代码。如果在第一次单击扩展图标和第二次单击之间，选项卡上有导航，或者如果切换选项卡，您将尝试在其他脚本未运行的上下文中执行最后一行代码。