use*_*175 3 html javascript jquery google-chrome google-chrome-extension
我正在尝试开发测试chrome扩展,以了解JQuery如何使用chrome扩展.从提供的代码我认为它应该将弹出窗口的背景更改为黄色.
我尝试使用内容脚本并使用背景加载jquery.js.当我通过后台脚本命令加载它时,它显示已加载jquery.js.
这是我的文件:
的manifest.json
{
"name": "Hello World!",
"version": "1.0",
"manifest_version": 2,
"description": "My first Chrome extension.",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"js": ["jquery.js", "content.js"]
}
]
}
popup.html
<html>
<head>
<script src='jquery.js'></script>
<script src='content.js'></script>
</head>
</html>
content.js
$('a').css({'background-color': 'yellow'});
我的扩展文件夹中也有jquery.js.如果有人要么给我一些其他东西来试图让这个工作,或者可以向我展示一个链接jquery的chrome扩展的一个非常好的工作示例,那就太棒了!
gka*_*pak 11
你一直缺乏混合的东西,不应该在一起.
你做错了一件事:
既然你不想在点击你的浏览器动作按钮时出现一个弹出窗口,你就不应该指定一个"default-popup":
...
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html" // <-- this line should go away
},
...
话虽如此,解决问题的最佳方式(imo)如下:
让您的背景页面(或更好的事件页面)监听chrome.browserAction.onClicked事件.
(请注意,为了触发事件,不能设置默认弹出窗口.)
发生这种情况时,使用程序注入注入jquery.min.js并content.js使用chrome.tabs.executeScript注入活动选项卡的页面.
为了使上述步骤成为可能,您还必须声明必要的权限,即扩展应该可访问的页面"tabs"的URL 匹配模式(例如"http://*/*","https://*/*"可以访问具有http和https方案的所有页面)).
我还建议,仔细查看清单规范,以便熟悉可用字段和可能的值.
最后,一些演示源代码可以帮助您入门(我知道所有这些信息一下子都可能是压倒性的):
扩展文件夹结构:
_______________LinkHighlighter_______________
| | |
manifest.json img js
| |__background.js
icon<XX>.png(*) |__content.js
|__jquery.min.js
(*): <XX> = 16, 19, 38, 48, 128
manifest.json的:
{
"manifest_version": 2,
"name": "Link Highlighter",
"version": "1.0",
"description": "...",
"icons": {
"16": "img/icon16.png",
"48": "img/icon48.png",
"128": "img/icon128.png"
},
"browser_action": {
"default_title": "Link Highlighter",
"default_icon": {
"19": "img/icon19.png",
"38": "img/icon38.png"
}
},
"background": {
"persistent": false,
"scripts": ["js/background.js"]
},
"permissions": [
"tabs",
"http://*/*",
"https://*/*"
]
}
background.js:
// When the user clicks the browser-action button...
chrome.browserAction.onClicked.addListener(function(tab) {
// ...inject 'jquery.min.js' and...
chrome.tabs.executeScript(tab.id, {
file: "js/jquery.min.js",
allFrames: true,
runAt: "document_idle"
});
// ...inject 'content.js' into the active tab's page
chrome.tabs.executeScript(tab.id, {
file: "js/content.js",
allFrames: true,
runAt: "document_idle"
});
});
content.js:
$("a").css({ "background-color": "yellow" });
如果您有其他问题/问题,请不要犹豫回来:)
为了完整起见
......我只想提一下其他方法是否可行,如下:
使用页面操作而不是浏览器操作.
使用内容脚本注入每个页面,并通过从后台页面到内容脚本的消息传递来触发突出显示.
| 归档时间： |
|
| 查看次数： |
2355 次 |
| 最近记录： |