Chrome扩展程序弹出窗口中<script>标记内的简单jQuery未执行
Whi*_*ims 1 html javascript jquery google-chrome-extension content-security-policy
这是我的HTML:
<!doctype html>
<html>
<head>
<title>PassVault</title>
<link rel="stylesheet" type="text/css" href="stil.css">
<meta charset="utf-8">
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function () {
$("div").css("border", "3px solid red");
});
</script>
</head>
<body>
<div id="rainbow"> </div>
<div id="loginBox">
<div id="welcome"> Dobrodošli, uporabnik! </div><br>
</div>
</body>
</html>
文档加载后,它应该在我的所有div周围放置一个红色边框(HTML文件中有很多),但事实并非如此.我不明白这里有什么问题.jQuery都在同一个文件中,jQuery托管的链接由Google提供,也可以使用.
值得一提的是.html文件是由Google Chrome扩展程序browser_action的manifest.json文件调用的.所以,它以这种方式打开弹出窗口:
还值得一提的是,上面的图片只是Google提供的示例图片.这不是我的形象.我的div没有边框,jQuery没有改变它.
的manifest.json
....
"browser_action": {
"default_popup": "popupindex.html",
}
....
我不知道这个弹出窗口会如何影响.js文件功能,但我确定它与此有关.
OP对答案的评论中
添加:在所有这些div之间添加边框只是我测试jQuery是否有效的方法.我将来需要jQuery来完成其他很多事情.它甚至不适用于这个简单的事情.
您正在尝试加载/运行违反内容安全策略的脚本.这会影响双方你试图从外部到您的扩展,您尝试使用内嵌脚本(你的源加载jQuery的$(document).read()代码).
您可以通过右键单击弹出窗口并选择"Inspect"来访问弹出窗口的控制台.控制台会显示以下错误:
Refused to load the script 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:".
和
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-qMVaiPhbudnaz91QqECVnbdTvKWnqeultnb/Nt/ybo8='), or a nonce ('nonce-...') is required to enable inline execution.
扩展默认内容安全策略
对于Chrome扩展程序,默认的内容安全策略是:
script-src 'self'; object-src 'self'
此策略通过三种方式限制扩展和应用程序来增加安全性:
- Eval和相关功能被禁用
- 不会执行内联JavaScript
此限制禁止内联块和内联事件处理程序(例如<button onclick="...">).- 仅加载本地脚本和对象资源
而不是编写依赖于从外部CDN加载的jQuery(或任何其他库)的代码,请考虑在扩展包中包含特定版本的jQuery.
加载jQuery
对于加载jQuery,最好的解决方案是下载jQuery代码.从问题来看,您使用的代码是:http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js.但是,正如Ted所说,这是jQuery的旧版本.除非您有理由使用旧版本,否则您可以尝试https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js.然后,您可以将该文件存储在扩展目录(或子目录)中,并将其包含在popupindex.html中
<script src="jquery.min.js"></script>
你自己的代码
您自己的JavaScript代码未运行,因为扩展的默认内容安全策略不允许内联脚本.最好的解决方案是将$(document).ready()代码移动到一个单独的文件(例如popupindex.js)中,然后使用以下命令将其包含在popupindex.html中:
<script src="popupindex.js"></script>
显然,这需要在<script>加载jQuery 的标记之后.
您可以包含内联脚本,但是您需要在manifest.json中的键值中提供"script-src"指令中的脚本哈希值.但是,这样做不值得花时间和精力.它是多容易的代码转移到一个单独的文件.content_security_policy
HTML定义的事件处理程序中包含的JavaScript也是不允许的
您在HTML中为事件处理程序添加的代码是JavaScript,也是不允许的.例如,以下内容将失败:
<button onclick="doMyThing();">My button</button>
您需要将其编码为:
<button id="doMyThingButton">My button</button>
然后,在单独的JavaScript文件中(见上文),类似于:
document.getElementById('doMyThingButton').addEventListener('click',doMyThing,false);
使用运行jQuery的弹出窗口完成扩展
以下完整的扩展,运行您的jQuery代码,生成一个弹出窗口,如下所示:
manifest.json:
{
"description": "Demonstrate use of jQuery in a popup.",
"manifest_version": 2,
"name": "jQuery-in-popup",
"version": "0.1",
"browser_action": {
"default_icon": {
"48": "myIcon.png"
},
"default_title": "Show panel",
"default_popup": "popupindex.html"
}
}
popupindex.html:
<!doctype html>
<html>
<head>
<title>PassVault</title>
<meta charset="utf-8">
<script type='text/javascript' src='jquery.min.js'></script>
<script type="text/javascript" src='popupindex.js'> </script>
</head>
<body>
<div id="rainbow"> </div>
<div id="loginBox">
<div id="welcome"> Dobrodošli, uporabnik! </div><br>
</div>
</body>
</html>
popupindex.js:
$(document).ready(function () {
$("div").css("border", "3px solid red");
});
jquery.min.js:
从https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js下载并存储为扩展程序目录中的jquery.min.js.
| 归档时间： |
|
| 查看次数： |
2080 次 |
| 最近记录： |