narusawa narusawa - 2 years ago 297
jQuery Question

Chrome extension inject jquery into iframe

I am trying to insert jquery into an iframe located in my content script. The problem is that jquery ui does get loaded but only returns a message 'Jquery is not defined.' I suspect that it has to do with the time it takes to load jquery. Do I need to set an interval in order to wait for jquery to be loaded? or is there any alternative that I can use jquery right away withtout having to wait? I have also tried to execute jquery script from my background script with no luck.

Content Script

var jsjq = iframe.contentDocument.createElement("script")
jsjq.src = chrome.extension.getURL("jquery.min.js")
jsjq.type = "text/javascript"
var jsui = iframe.contentDocument.createElement("script")
jsui.src = chrome.extension.getURL("jquery-ui.min.js")
jsui.type = "text/javascript"
var css = iframe.contentDocument.createElement("link")
css.href = chrome.extension.getURL("content.css")
css.type = "text/css"
css.rel = "stylesheet"
var cssui = iframe.contentDocument.createElement("link")
cssui.href = chrome.extension.getURL("jquery-ui.min.css")
cssui.type = "text/css"
cssui.rel = "stylesheet"


var script = iframe.contentWindow.document.createElement('script')
script.type = "text/javascript"
script.innerHTML = 'if (window.jQuery) {console.log("st")} else {console.log("none")}'

Background Script

chrome.tabs.executeScript(, {
file: "content.js"
}, function() {
chrome.tabs.executeScript(, { // this part does not seem to work at all
file: "jquery.min.js"


"background": {
"scripts": ["background.js"]

"content_scripts": [
"matches": ["<all_urls>"],
"css": ["content.css", "jquery-ui.min.css"],
"js": ["content.js", "jquery.min.js", "jquery-ui.min.js", "async.js"]


"web_accessible_resources": [

Answer Source

I would recommend reading through this answer first. Waiting until jQuery has loaded depends on how you loaded it, and each of these approaches has their pluses and minuses.

Via script tag:

var jsjq = iframe.contentDocument.createElement("script");
    jsjq.src = chrome.extension.getURL("jquery.min.js");
    jsjq.type = "text/javascript";
    jsjq.onload = loadJQUI;
function loadJQUI() {
    var jsui = iframe.contentDocument.createElement("script")
        jsui.src = chrome.extension.getURL("jquery-ui.min.js");
        jsui.type = "text/javascript";

(only this one needs web_accessible_resources).

Pros: Your script can interact with other scripts and the dom.
Cons: Your script can’t interact with the background or call chrome apis.

Via content script:

"content_script": [
        "matches": ["<all_urls>"],
        "js": ["jquery.min.js","jquery-ui.min.js"]

Pros: You can interact with the dom and can call some chrome apis.
Cons: Your script is isolated from the page’s scripts.

Via background script:

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

Pros: Same as content script, and you get to decide when (and whether) to inject the script.
Cons: Same as content script, but you have to decide when (and whether) to inject the script.

Which of these you want depends on how you actually want to use jQuery.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download