Chrome Extension Jquery занимает некоторое время, чтобы загрузить

Question

все, что я сейчас создаю расширение chrome с помощью JQuery. Когда страница загружается и я нажимаю кнопку расширения, я получаю сообщение об ошибке «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 перед выполнением других скриптов, вы не должны видеть эту ошибку. Вы можете заказать эти строки chrome.tabs.executeScript * в качестве функций обратного вызова в файле background.js, как предложено wOxxOm, или добавить jQuery & jQuery UI в сценарий содержимого, а затем выполнить асинхронное выполнение остальной части вашего JS. Помните, что вы не можете использовать API-интерфейс chrome.tabs в сценариях контента, поэтому синтаксис отличается от того, что вы вводите 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... 

    }; 
    }; 
};