在Chrome扩展上运行jQuery的问题
我正在尝试开发一个简单的cheome扩展，但无法将jQuery设置为使用它： 以下是我的文件结构： -根 -manifest.json -popup.html -script.js -js -jQuery.js -clip.js 下面是我在manifest.json中的代码 我还通过从cdn调用jQuery并在页面上声明一个支持文档的JavaScript来运行这两个jQuery，但它也不起作用在Chrome扩展上运行jQuery的问题,jquery,google-chrome,google-chrome-extension,google-chrome-app,Jquery,Google Chrome,Google Chrome Extension,Google Chrome App,我正在尝试开发一个简单的cheome扩展，但无法将jQuery设置为使用它： 以下是我的文件结构： -根 -manifest.json -popup.html -script.js -js -jQuery.js -clip.js 下面是我在manifest.json中的代码 我还通过从cdn调用jQuery并在页面上声明一个支持文档的JavaScript来运行这两个jQuery，但它也不起作用 <!doctype html> <html> <head>
<!doctype html>
<html>
<head>
<title>My app</title>
<style>body {min-width: 357px;overflow-x: hidden;} </style>
<!--
- JavaScript and HTML must be in separate files: see our Content Security
- Policy documentation[1] for details and explanation.
-
- [1]: http://developer.chrome.com/extensions/contentSecurityPolicy.html
-->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$( document ).ready(function() {
$( "#fname" ).on( "click", function() {
alert( "HI");
});
});
</script>
</head>
<body>
<table style="width:300px">
<tr>
<td id="fname">Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</body>
</html>
您能告诉我我做错了什么吗？您的设置似乎有几个问题 您可能希望阅读内容脚本，因为它们似乎不像您认为的那样。内容脚本是在您将内容注入另一个站点的页面时创建的。这不是你的页面。实际上，您正在将jquery文件插入到它们的页面中。 内容脚本 内容脚本是在网页上下文中运行的JavaScript文件。通过使用标准文档对象模型DOM，他们可以读取浏览器访问的网页的详细信息，或者对其进行更改 此外，如果不设置安全策略，则无法运行内联javascript： 将不执行内联JavaScript 将不执行内联JavaScript。此限制同时禁止内联块和内联事件处理程序，例如 您是否尝试过将jQueryCDN和script.js包含到HTML的头部？像这样：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="script.js"></script>
谢谢Esteban Felix，这非常有帮助，但是，解决方案呢？我怎样才能将jquery添加到扩展中？@user3162145我更新了我的答案，你差一点就知道了！您只需要将这两种方法结合起来！是的，事实上，最后我在帖子中添加了代码示例，但是jquery没有运行thete！我的意思是它在加载时是可以的，例如，如果我想在加载时提醒消息，它可以工作，但不能在这样的代码上工作：$test.hover函数{$this.addClass hover；}，函数{$this.removeClass hover；}；使用扩展名中已经包含的jquery.js文件可能比使用Google的jquery CDN更容易。
$( "#fname" ).on( "click", function() {
alert( "HI");
});
<!doctype html>
<html>
<head>
<title>My app</title>
<style>body {min-width: 357px;overflow-x: hidden;} </style>
<!--
- JavaScript and HTML must be in separate files: see our Content Security
- Policy documentation[1] for details and explanation.
-
- [1]: http://developer.chrome.com/extensions/contentSecurityPolicy.html
-->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$( document ).ready(function() {
$( "#fname" ).on( "click", function() {
alert( "HI");
});
});
</script>
</head>
<body>
<table style="width:300px">
<tr>
<td id="fname">Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="script.js"></script>
"content_security_policy": "script-src 'self' https://*.googleapis.com; object-src 'self'"