JQuery和Chrome扩展 [英] JQuery and Chrome Extension
问题描述
我正在尝试开发一个测试扩展插件，以查看JQuery如何与Chrome扩展一起使用。从提供的代码中，我认为它应该将弹出窗口的背景改为黄色。
我曾尝试使用内容脚本和背景加载jquery.js。当我通过后台脚本命令加载时，它显示jquery.js已加载。
以下是我的文件：
manifest.json
{
name：Hello World！，
version：1.0，
manifest_version：2，
description：我的第一款Chrome扩展程序。，
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的扩展插件的工作示例，那就太棒了！
你一直在做的一件事情是，错误：
由于您不希望点击浏览器操作按钮时弹出窗口出现，您不应指定默认弹出窗口：
...
browser_action：{
default_icon：icon.png，
default_popup：popup。 html//< - 此行应该消失
}，
...
这就是说，解决这个问题的最佳方式如下：
-
背景页面（或更好的 活动页面 ）listen为
chrome.browserAction.onClicked 事件。 >
（请注意，为了触发事件，不必设置默认弹出窗口。） -
发生这种情况时，请使用 程序化注入 注入
jquery.min.js和content.js使用 chrome.tabs.executeScript 。 - <为了使上述步骤成为可能，您还必须声明必要的 权限 ，即
标签和网址 match-patterns 。http：// * / *和https：// * / *有权访问所有 http 和 https 方案的网页）。我还建议您仔细阅读 清单规范 以便熟悉可用的字段和可能的值。
最后，一些演示源代码让你开始我知道所有这些信息一次可以压倒一切）：
扩展文件夹结构：
_______________LinkHighlighter_______________
| | |
manifest.json img js
| | __background.js
图标< 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：...，
图标：{
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]
}，
权限：[
标签，
http：// * / *，
https ：// * / *
}
background .js ：
//当用户点击浏览器动作但ton ...
chrome.browserAction.onClicked.addListener（function（tab）{
// ...注入'jquery.min.js'和...
chrome.tabs。 executeScript（tab.id，{
file：js / jquery.min.js，
allFrames：true，
runAt：document_idle
}）;
// ...将'content.js'注入活动标签的页面
chrome.tabs.executeScript（tab.id，{
file：js / content.js，
allFrames：true，
runAt：document_idle
}）;
}）;
content.js：
$（a）。css（{background-color：yellow}）;
请不要犹豫，有进一步的问题/问题：）
为了完整性...
...让我提一下，可能还有其他方法，例如：
-
使用内容脚本注入每个页面，并通过消息触发器来触发突出显示。
使用页面操作而不是浏览器操作。从背景页面传递到内容脚本。
I am trying to develop a test chrome extension to see how JQuery works with chrome extensions. From the code provided I think it should change the background of the popup to yellow.
I have tried loading the jquery.js using a content script and using background. When I load it via the background scripts command, it shows that jquery.js was loaded.
Here are my files:
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'});
I have the jquery.js in my extension folder as well. If someone get either give me something else to try to get this working, or could show me a really good working example of a chrome extension that links jquery, that would be great!
You've been short of mixing things up that shouldn't go together.
One thing you've been doing wrong:
Since you don't want a popup to appear when clicking on your browser-action button, you should not specify a "default-popup":
...
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html" // <-- this line should go away
},
...
With that said, the best way (imo) to approach the problem is the following:
Have your background-page (or better yet event-page) listen for the chrome.browserAction.onClicked event.
(Note that in order for the event to be triggered, no default-popup must be set up.)When that happens, use programmatic injection to inject
jquery.min.jsandcontent.jsinto the active tab's page, using chrome.tabs.executeScript.In order for the aforementioned steps to be possible, you must also declare the necessary permissions, namely
"tabs"and the URL match-patterns of the pages that should be accessible to your extension (e.g."http://*/*"and"https://*/*"to have access to all pages with the http and https schemes).
I would also suggest, taking a good look at the manifest specification in order to familiarize with the available fields and possible values.
Finally, some demo source code to get you started (I know all that info at once can be overwhelming):
Extension folder structure:
_______________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" });
Don't hesitate to come back, should you have further questions/problems :)
For the sake of completeness...
...let me just mention that thre are other approaches possible, sush as:
Using page-actions instead of a browser-action.
Injecting every page with your content scripts, and trigger the highlighting by means of message-passing from the background-page to the content scripts.
这篇关于JQuery和Chrome扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
