将 jQuery 加载到 chrome 扩展中
Posted
技术标签:
【中文标题】将 jQuery 加载到 chrome 扩展中【英文标题】：Loading jQuery into chrome-extension 【发布时间】：2012-08-15 15:22:22 【问题描述】：我正在尝试进入 Chrome 扩展的神奇世界。 现在我已经建立了我的清单，试图加载 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!"
实际上尝试重新加载扩展程序告诉我“匹配项”与有效架构不匹配。
但这还不是全部。为了克服它，我尝试将“匹配”值更改为*://*/* 并重新加载。
好吧，扩展似乎加载正确，但似乎 jquery 没有加载，因为我可以从 popup.js 得到的错误告诉我
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 代码就是这样做的：
$("#test").html("Foo!");
【问题讨论】：
您的意思是$("#test").html("Foo!"); 而不是$.('#test')？
是的。那是一个分散注意力的错误。我要编辑这个问题。真丢人。当然，错误现在是一个更具指示性的“$ 未定义”
【参考方案1】：
$.("#test").html("Foo!");
应该是
$("#test").html("Foo!");
您得到的错误与这部分代码不正确是一致的。
【讨论】：
OP 编辑了他的问题，因此不再适用。我建议编辑答案或删除它。 但是现在错误也发生了变化，所以答案是有效的。但是，我会追加它。【参考方案2】：内容脚本将从不在扩展程序的上下文中运行。在浏览器操作弹出窗口中加载脚本的正确方法是将其包含在代码中。让您的清单文件为：
"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>
【讨论】：
按照你的建议改变，给我以下错误：拒绝执行内联脚本，因为它违反了以下Content Security Policy directive: "script-src 'self' chrome-extension-resource:".
@theCrius 您的真实代码包含内联脚本（<script>....</script> 或事件侦听器，Content security policy 明确禁止这些 - 请参阅 ***.com/a/10417745/938089。要解决它，请将代码移动到外部文件。
更正我之前的评论：“事件侦听器”是指“内联事件侦听器”，例如。 <body onload="..."> 或 <button onclick="...">.
@theCrius 你把popup.js 放在了头上。该脚本会立即执行，但 <body> 甚至还不存在。要解决该特定问题，请将您的代码包装在 domready 事件处理程序中：$(function() $('#text').html('Foo!');); - 请参阅api.jquery.com/ready
@Dan 我写了那个声明。单击 browserAction 按钮后显示的弹出窗口是从“chrome-extension://[EXTENSIONID]/popup.html”加载的。内容脚本只能插入到与某个match pattern 匹配的页面上。 chrome-extension:-URLs 无法与此类模式匹配（对于内容脚本），因此内容脚本无法在扩展页面中运行，即 Chrome 扩展的上下文。内容脚本将始终在选项卡的渲染器进程中运行。以上是关于将 jQuery 加载到 chrome 扩展中的主要内容，如果未能解决你的问题，请参考以下文章
将 Google API Javascript 客户端库加载到 Chrome 扩展程序中
将 jQuery 与 Google Chrome 应用程序而非 Chrome 扩展程序一起使用
javascript Chrome扩展程序将自定义javascript文件加载到标签的DOM中。