Question

我正在尝试将jquery插入位于我的内容脚本中的iframe。问题是jquery ui确实被加载但只返回一条消息＆＃39; Jquery没有定义。＆＃39;我怀疑它与加载jquery所需的时间有关。我是否需要设置间隔才能等待加载jquery？或者有没有其他方法我可以立即使用jquery而不必等待？我也尝试从我的后台脚本执行jquery脚本，但没有运气。

内容脚本

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)

后台脚本

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

清单

"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"     
]

Answer 1

我建议先阅读this answer。等待jQuery加载取决于你如何加载它，并且每种方法都有它们的优点和缺点。

通过脚本标签：

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);

（只有这个需要web_accessible_resources）。

优点：您的脚本可以与其他脚本和dom进行交互缺点：您的脚本无法与后台交互或调用chrome apis。

通过内容脚本：

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

优点：你可以与dom互动，并可以调用一些镀铬api 缺点：您的脚本与页面的脚本隔离。

通过后台脚本：

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

优点：与内容脚本相同，您可以决定何时（以及是否）注入脚本缺点：与内容脚本相同，但您必须决定何时（以及是否）注入脚本。

您想要的其中一个取决于您实际想要如何使用jQuery。

Answer 2

请尝试在您的Manifest中的后台权限中声明 jquery ：

示例：

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

如documentation中所述，＆＃34; 背景＆＃34;权限还可让Chrome继续运行，直到用户明确退出Chrome。请注意，它是在后台声明的，已禁用的应用和扩展程序被视为未安装。

除此之外，这篇SO帖子中给出的解释 - Declare Permissions帮助我更好地理解。它也可能对你的情况有所帮助。

Chrome扩展程序将jquery注入iframe

2 个答案: