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

问题描述：

我目前正在使用Jquery构建一个Chrome扩展。当页面加载并单击我的扩展按钮时，出现错误“Uncaught ReferenceError：$未定义”。但是如果我等两三秒，扩展工作就会很好。我想知道如何解决这个延迟问题，因为当我点击它太早时它会打破扩展。Chrome扩展Jquery需要一段时间才能加载

我用过的其他扩展名似乎没有这个问题。

我看过其他问题，关于在哪里放置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')" }); 
    } 
});

如果你围绕你的背景脚本是否仍然发生'ready'功能？ $（document）.ready（function（）{ //你的背景代码在这里 }）; –

'chrome.tabs.executeScript'与所有Chrome API都是异步的。注入回调参数中的每个下一个脚本。 – wOxxOm

@Daniel，通过使用ready函数来包围我的后台脚本，它基本上等待文档完成加载。但是我试图在文档加载之前让我的扩展工作，这是延迟几秒钟的一部分。 – Alan

答

你chrome.tabs.executeScript *的行异步发生，所以有时你的脚本执行前的jQuery加载完毕。这导致了未定义的参考错误。如果你在执行其他脚本之前注入jQuery，那么你不应该看到这个错误。您可以按照wOxxOm的建议，在您的background.js文件中将这些chrome.tabs.executeScript *行命令作为回调函数，或者在内容脚本中注入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需要一段时间才能加载

相关推荐