Chrome extension inject jquery into iframe

Question

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"

iframe.contentWindow.document.head.appendChild(jsjq)
iframe.contentWindow.document.head.appendChild(jsui)
iframe.contentWindow.document.head.appendChild(css)
iframe.contentWindow.document.head.appendChild(cssui)

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

Background Script

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

Manifest

"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": [
    "content.css", 
    "jquery.min.js",
    "jquery-ui.min.js", 
    "jquery-ui.min.css"     
]

score 2 · Accepted Answer · edited May 23 '17 at 12:24

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";
    iframe.contentWindow.document.head.appendChild(jsui)
}
iframe.contentWindow.document.head.appendChild(jsjq);

(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(sender.tab.id, { file: "jquery.min.js" },function() {
    chrome.tabs.executeScript(sender.tab.id, { 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.

score 0 · Answer 2 · edited May 23 '17 at 12:33

0

Please try to also declare jquery within background permission in your Manifest:

Example:

"background": {
     "scripts": [
         "jquery.js",
         "background.js"
     ], 
     "pages": [
         "background.html"
     ] 
}

As discussed in Declare Permissions, the "background" permission also makes Chrome continue running until the user explicitly quits Chrome. And note that it was stated under background, disabled apps and extensions are treated as if they aren't installed.

In addition to that, explanation given in this SO post - Chrome extension code vs Content scripts vs Injected scripts helped me understand better. It might help with your case too.

edited May 23 '17 at 12:33

Community

1
1

answered Jun 09 '16 at 16:00

Teyam

7,686
3
15
22

The other SO answer would be good to look at. The "background" entry in the manifest is for the background page, and is a separate thing from the background permission (which he doesn't need). And adding jquery to the background would make the fourth time the file is included, so a proper answer here would really need to discuss why not all of those are needed. – Teepeemm Jun 09 '16 at 19:57

Chrome extension inject jquery into iframe

2 Answers2