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，则不应该看到此错误。你可以在background.js文件中订购这些chrome.tabs.executeScript *行作为回调函数，如wOxxOm建议的那样，或者注入jQuery＆amp;在内容脚本中使用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" });
    });
});

通过script_script.js中的脚本标记将脚本加载到DOM中：

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需要一段时间才能加载

1 个答案: