将jQuery加载到Chrome扩展 [英] Loading jQuery into chrome-extension
问题描述
我正在尝试迈入Chrome扩展魔幻世界的第一步。
现在我已经建立了我的清单，试图加载jquery。
I'm trying my first step into the magical world of Chrome Extensions. Now i've build up my manifest trying to load jquery.
{
"name": "Test Extension",
"version": "0.1",
"manifest_version": 2,
"description": "First try",
"options_page": "options.html",
"content_scripts": [{
"matches": ["chrome-extension://*/*"],
"js": ["jquery.js", "popup.js"],
"run_at": "document_end"
}],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html",
"default_title": "Click me!"
}
}
实际上试图重新加载扩展名告诉我匹配不匹配有效的模式。
Actually trying to reload the extension tell me that the "matches" do not match a valid schema.
但那不是全部。为了克服它，我试着将matches值改为 *：// * / * 并重新加载。
好了，扩展似乎正确加载，但似乎像jquery没有加载，由于我可以从popup.js刚刚告诉我的错误
But that's not all. To get over it, i've tried just changing the "matches" value to *://*/* and reload.
Well, the extension seems to load correctly but seems like the jquery is not loaded due to the error i can get from the popup.js that just tell me
未捕获的ReferenceError：$未定义
Uncaught ReferenceError: $ is not defined
其实HTML只是：
<!doctype html>
<html>
<head>
<title>Test Extension</title>
<link rel="stylesheet" style="text/css" src="style.css">
</head>
<body>
<div id="test"></div>
</body>
</html>
<script type="text/javascript" src="popup.js"></script>
popup.js代码只是这样做的：
The popup.js code just do this:
$("#test").html("Foo!");
推荐答案
内容脚本永不在扩展的上下文中运行。在浏览器动作弹出窗口中加载脚本的正确方法是将其包含在代码中。让你的清单文件为：
Content scripts will never run in the context of an extension. The correct way to load scripts in your browser action popup is by including it in your code. Let your manifest file be:
{
"name": "Test Extension",
"version": "0.1",
"manifest_version": 2,
"options_page": "options.html",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html",
"default_title": "Click me!"
}
}
和 popup.html ：
...
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="popup.js"></script>
这篇关于将jQuery加载到Chrome扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
