Chrome扩展将jquery注入iframe
Chrome扩展将jquery注入iframe
提问于 2016-06-09 01:46:12
我正在尝试将jquery插入到内容脚本中的iframe中。问题是jquery确实会被加载，但只返回一条消息'Jquery没有定义‘。我怀疑这与加载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"
]回答 2
Stack Overflow用户
回答已采纳
发布于 2016-06-12 21:02:09
我建议先阅读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。
通过内容脚本：
"content_script": [
{
"matches": ["<all_urls>"],
"js": ["jquery.min.js","jquery-ui.min.js"]
}
]优点:您可以与dom交互，并可以调用一些chrome。
缺点:您的脚本与页面的脚本隔离。
通过背景脚本：
chrome.tabs.executeScript(sender.tab.id, { file: "jquery.min.js" },function() {
chrome.tabs.executeScript(sender.tab.id, { file: "jquery-ui.min.js" });
});优点:与内容脚本相同，您可以决定何时(以及是否)注入脚本。
缺点:与内容脚本相同，但您必须决定何时(以及是否)注入脚本。
您想要哪一个取决于您实际想要如何使用jQuery。
Stack Overflow用户
发布于 2016-06-09 16:00:07
请尝试在您的报表中的后台权限内声明jquery：
示例：
"background": {
"scripts": [
"jquery.js",
"background.js"
],
"pages": [
"background.html"
]
}正如Declare Permissions中所讨论的，“后台”权限也使Chrome继续运行，直到用户显式退出Chrome为止。请注意，它是在背景下声明的，禁用的应用程序和扩展将被视为没有安装。
除此之外，在这篇文章中给出的解释帮助我更好地理解了这一点。对你的案子也有帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37715618
复制相关文章
相似问题
腾讯云开发者
