在 Chrome 扩展中被覆盖的新选项卡中使用 jQuery 是不是违反了内容安全策略？
Posted
技术标签:
【中文标题】在 Chrome 扩展中被覆盖的新选项卡中使用 jQuery 是不是违反了内容安全策略？【英文标题】：Using jQuery in overridden new tab, in Chrome Extension, violates Content Security Policy?在 Chrome 扩展中被覆盖的新选项卡中使用 jQuery 是否违反了内容安全策略？ 【发布时间】：2015-07-01 13:18:35 【问题描述】：我有一个 chrome 扩展程序，我用 html 文件“index.html”覆盖了 newtab。我想在这个 “index.html”上使用 jQuery。
我该怎么做？
这是我的简化代码：
manifest.json
"name": "Test Name",
"description": "Test Description",
"version": "0.1",
"chrome_url_overrides":
"newtab": "index.html"
,
"manifest_version": 2,
index.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<div> Hello World ! </div>
</body>
</html>
index.js
console.log('Extension loaded successfully ...');
console.log($('div')); // console.log(jQuery('div'));
但是我在控制台中不断收到以下两个错误。
拒绝加载脚本 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' 因为它违反了以下内容安全政策指令： "script-src 'self' chrome-extension-resource:".
扩展加载成功...
未捕获的引用错误：$ 未定义
更新：1我也尝试在清单文件中添加content security policy，但它不起作用，并且仍然产生错误：
"content_security_policy": "script-src 'self' https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js 'unsafe-eval'; object-src 'self'",
更新：2我也尝试在清单文件中添加权限，但它也不起作用，仍然是同样的错误：
"permissions": [ "http://*/", "https://*/" ]
我该如何解决这个问题？
【问题讨论】：
尝试本地文件版本的 jQuery 如果是本地文件，两个错误消失，但$('div')选择器返回空数组。 您必须在清单文档中提供权限、结帐权限和内容安全策略 @Mr.Alien 我在 manifest.json 中添加了以下行，但它也不起作用 "content_security_policy": "script-src 'self' ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js 'unsafe-eval'; object -src '自我'", 是的，它返回一个空数组只是因为代码是在 div 元素呈现之前执行的。 【参考方案1】：您为 CSP 字符串使用了错误的格式。正确的是（注意没有路径）：
"content_security_policy": "script-src 'self' https://ajax.googleapis.com 'unsafe-eval'; object-src 'self'"
但是，最好包含您在 Chrome 扩展程序中使用的库的本地副本，而不是依赖于 CDN。
想象一下您的新标签页由于连接不工作而完全无法正确加载，或者由于连接不良而加载缓慢。
【讨论】：
【参考方案2】：尝试使用本地文件并使用 $( document ).ready() 运行您的 console.log，由于 DOM 尚未准备好，数组可能返回空：
$(document).ready(function()
console.log($('div'));
)
【讨论】：
这适用于本地托管的 jQuery 文件。不适用于外部托管，即ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js @AshrafBashir 这就是ready 和load 事件之间的区别;)以上是关于在 Chrome 扩展中被覆盖的新选项卡中使用 jQuery 是不是违反了内容安全策略？的主要内容，如果未能解决你的问题，请参考以下文章
上传到 Chrome 应用商店后，扩展程序不会在新选项卡中打开多个链接
是否可以在 Chrome Web 检查器网络选项卡中隐藏扩展资源？