Chrome 扩展程序 Jquery 需要一段时间才能加载

Question

我目前正在使用 Jquery 构建 chrome 扩展。当页面加载并单击我的扩展按钮时，我收到错误 "Uncaught ReferenceError: $ is not defined"。但如果我等两三秒钟，扩展就可以正常工作。我想知道如何解决这个延迟，因为每当我过早点击它时它都会破坏扩展。

我用过的其他扩展好像没有这个问题

我已经查看了有关放置 Jquery 文件的位置的其他问题，以确保它在我的其他脚本之前加载。

我确保 Jquery 在任何其他脚本之前加载。我究竟做错了什么？为什么会有延迟？我将如何修复它？

Manifest.json

{
  "manifest_version": 2,

  "name": "Test",
  "description": "Test Extension",
  "version": "1.0",

  "browser_action": {
    "default_icon": "off.png"
  },

 "background": {
    "scripts": ["jquery.js", "background.js"],
    "persistent": false
  },

  "permissions": [
    "tabs",
    "<all_urls>",
    "activeTab",
    "https://ajax.googleapis.com/"
  ],

  "web_accessible_resources": [
    "Extension_Design/*",
    "jquery.js"
  ],

  "content_scripts": [
    {
      "js": ["jquery.js", "content_script.js"]
    }
  ]
}

background.js

//TODO: change to variable associated with tabs
var tabsArray = chrome.tabs.query;
for (var i = 0; i < tabsArray.length; i++) {
  tabsArray[i] = false;
}

// When the icon is clicked:
chrome.browserAction.onClicked.addListener(function (tab) {
  tabsArray[tab.index] = !tabsArray[tab.index];

  if (tabsArray[tab.index]) {
    // Change image to "on.png"
    chrome.browserAction.setIcon({ path: "on.png", tabId: tab.id });

    // Run content_script.js with jquery API enabled

    chrome.tabs.executeScript(tab.id, { file: "jquery.js" });    
    chrome.tabs.executeScript(tab.id, { file: "jquery-ui.min.js" });    
    chrome.tabs.executeScript(tab.id, { file: "content_script.js" });
    chrome.tabs.executeScript(tab.id, { code: "console.log('Extension is on')" });
  } else {
    // Change image to "off.png"
    chrome.browserAction.setIcon({ path: "off.png", tabId: tab.id });
    // Send a greeting message containing toggle
    chrome.tabs.executeScript(tab.id, { code: "$(document.body).off();" });
    chrome.tabs.executeScript(tab.id, { code: "$(sidebar).detach()" });
    chrome.tabs.executeScript(tab.id, { code: "console.log('Extension is off')" });
  }
});

Answer 1

您的 chrome.tabs.executeScript* 行是异步发生的，因此有时您的脚本会在 jQuery 完成加载之前执行。这导致未定义的引用错误。如果您在执行其他脚本之前注入 jQuery，那么您应该不会看到此错误。您可以按照 wOxxOm 的建议，将这些 chrome.tabs.executeScript* 行作为 background.js 文件中的回调函数，或者在内容脚本中注入 jQuery & jQuery UI 和然后异步执行其余的 JS。请记住，您不能在内容脚本中使用 chrome.tabs API，因此将 JS 注入页面的语法不同。

使用回调，在 background.js:

chrome.tabs.executeScript({ file: "jquery.js" }, function() {
    chrome.tabs.executeScript({ file: "jquery-ui.min.js" }, function(){
       chrome.tabs.executeScript({ file: "content_script.js" });
    });
});

正在通过脚本标签将脚本加载到 DOM，在 content_script.js 中：

function runScripts(){
 var j = document.createElement('script');
 j.type = "text/javascript";
 j.src = chrome.extension.getURL('jquery.js');
 (document.getElementsByTagName('head')[0]).appendChild(j);

  j.onload = function() {
    console.log('Jquery is loaded.');
    var u = document.createElement('script');
    u.type = "text/javascript";
    u.src = chrome.extension.getURL('jquery-ui.min.js');
    (document.getElementsByTagName('head')[0]).appendChild(u);

    u.onload = function() {
     console.log('Both Jquery & Jquery UI are loaded.');
      //Perform jQuery syntax JS stuff asynchronously here...

    };
  };
};

Chrome 扩展程序 Jquery 需要一段时间才能加载

Chrome Extension Jquery takes a while to load

jquery

manifest

google-chrome-extension