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

來源

2015-11-03 Alan

如果你圍繞你的背景腳本是否仍然發生'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... 

    }; 
    }; 
};

來源

2015-11-04 20:41:12 GracefulCode

Chrome擴展Jquery需要一段時間才能加載

回答

相關問題