[英]Simple jQuery within <script> tag in Chrome extension popup is not executing
这是我的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文件由browser_action从Google Chrome扩展程序的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代码。 从问题来看，您使用的代码位于： http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js ： 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>
显然，这需要在加载jQuery的<script>标记之后。
您可以包含内联脚本，但是您需要在manifest.json中的content_security_policy键的值中提供“script-src”指令中的脚本哈希值。 但是，这样做不值得花时间和精力。 将代码移动到单独的文件中要容易得多 。
您在HTML中为事件处理程序添加的代码是JavaScript，也是不允许的。 例如，以下内容将失败：
<button onclick="doMyThing();">My button</button>
您需要将其编码为：
<button id="doMyThingButton">My button</button>
然后，在单独的JavaScript文件中（见上文），类似于：
document.getElementById('doMyThingButton').addEventListener('click',doMyThing,false);
以下完整的扩展，运行您的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 。
当所有元素都已加载时，尝试将script标记移动到正文的底部。
Chrome扩展程序-激活popup.html中当前选项卡的脚本
[英]Chrome Extension - Activating a script within the popup.html for the current tab
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.