简单的jQuery内<script> tag in Chrome extension popup is not executing
[英]Simple jQuery within <script> tag in Chrome extension popup is not executing
问题描述
This is my HTML: 
这是我的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>
After the document loads up, it's supposed to put a red border around all my divs (there's plenty in the HTML file), but it doesn't. 文档加载后，它应该在我的所有div周围放置一个红色边框（HTML文件中有很多），但事实并非如此。 I don't see what's wrong here. 我不明白这里有什么问题。 The jQuery is all in the same file and the link where jQuery is hosted is provided by Google and also works. jQuery都在同一个文件中，jQuery托管的链接由Google提供，也可以使用。
It's worth mentioning that the .html file is called by browser_action from the manifest.json file of a Google Chrome extension. 值得一提的是， .html文件由browser_action从Google Chrome扩展程序的manifest.json文件中调用。 So, it opens the popup this way: 所以，它以这种方式打开弹出窗口：
It is also worth mentioning that the above image is just an example image provided by Google. 还值得一提的是，上面的图片只是Google提供的示例图片。 This is not my image. 这不是我的形象。 My div's have no borders and the jQuery doesn't change that. 我的div没有边框，jQuery没有改变它。
manifest.json 的manifest.json
....
"browser_action": {
"default_popup": "popupindex.html",
}
....
I don't see how this window being a popup would affect the .js file functionality but I'm sure it has something to do with that. 我不知道这个弹出窗口会如何影响.js文件功能，但我确定它与此有关。
Added from comment on an answer by OP: OP对答案的评论中添加：
Adding a border around all these divs was just my way of testing whether or not jQuery works. 在所有这些div周围添加边框只是我测试jQuery是否有效的方法。 I will be needing jQuery for plenty of other things in the future. 我将来需要jQuery来完成其他很多事情。 It doesn't even work with this simple thing. 它甚至不适用于这个简单的事情。
2 个解决方案
解决方案1
6 已采纳 2016-11-06 21:58:21
You are attempting to load/run scripts that violate the Content Security Policy . 您正在尝试加载/运行违反内容安全策略的脚本。 This affects both your attempt to load jQuery from a source external to your extension and your attempted use of an inline script (your $(document).read() code). 这会影响你试图从外部到您的扩展，您尝试使用内嵌脚本（你的源加载的jQuery $(document).read()的代码）。
You can access the console for the popup by right-clicking in the popup and selecting "Inspect". 您可以通过右键单击弹出窗口并选择“Inspect”来访问弹出窗口的控制台。 The console would have shown you the following errors: 控制台会显示以下错误：
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:".
and 和
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.
Extension Default Content Security Policy 扩展默认内容安全策略
For Chrome extensions, the default Content Security Policy is: 对于Chrome扩展程序， 默认的内容安全策略是：
script-src 'self'; object-src 'self'
Google explains that the reasons for this are: 谷歌解释说，原因是：
This policy adds security by limiting extensions and applications in three ways:
- Eval and related functions are disabled
- Inline JavaScript will not be executed
This restriction bans both inline blocks and inline event handlers (eg<button onclick="...">).<button onclick="...">）。- Only local script and and object resources are loaded
Instead of writing code that depends on jQuery (or any other library) loading from an external CDN, consider including the specific version of jQuery in your extension package.
Loading jQuery 加载jQuery
For loading jQuery, the best solution is to download the jQuery code. 对于加载jQuery，最好的解决方案是下载jQuery代码。 From the question, the code you are using is at: 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 ： http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js 。 However, as mentioned by Ted, that is quite an old version of jQuery. 但是，正如Ted所说，这是jQuery的旧版本。 Unless you have a reason to be using an older version, you might try https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js . 除非您有理由使用旧版本，否则您可以尝试https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js 。 You can then store that file in your extension directory (or in a subdirectory) and include it in your popupindex.html with 然后，您可以将该文件存储在扩展目录（或子目录）中，并将其包含在popupindex.html中
<script src="jquery.min.js"></script>
Your own code 你自己的代码
Your own JavaScript code is not running because the default content security policy for extensions does not permit inline scripts. 您自己的JavaScript代码未运行，因为扩展的默认内容安全策略不允许内联脚本。 The best solution is to move your $(document).ready() code into a separate file (eg popupindex.js ) which is then included in your popupindex.html using: 最好的解决方案是将$(document).ready()代码移动到一个单独的文件（例如popupindex.js ）中，然后使用以下命令将其包含在popupindex.html中：
<script src="popupindex.js"></script>
Obviously, that needs to be after the <script> tag that is loading jQuery. 显然，这需要在加载jQuery的<script>标记之后。
You can include inline scripts, but you will need to supply a " hash of the script in the "script-src" directive " in the value for the content_security_policy key within your manifest.json . 您可以包含内联脚本，但是您需要在manifest.json中的content_security_policy键的值中提供“script-src”指令中的脚本哈希值。 However, doing so is just not worth the time and effort. 但是，这样做不值得花时间和精力。 It is much easier to move the code into a separate file. 将代码移动到单独的文件中要容易得多 。
JavaScript included in HTML defined event handlers is also not permitted HTML定义的事件处理程序中包含的JavaScript也是不允许的
Code that you add in HTML for event handlers is JavaScript and is also not permitted. 您在HTML中为事件处理程序添加的代码是JavaScript，也是不允许的。 For example, the following will fail: 例如，以下内容将失败：
<button onclick="doMyThing();">My button</button>
You need to code that as: 您需要将其编码为：
<button id="doMyThingButton">My button</button>
Then, in your separate JavaScript file (see above), something like: 然后，在单独的JavaScript文件中（见上文），类似于：
document.getElementById('doMyThingButton').addEventListener('click',doMyThing,false);
Complete extension with popup running jQuery 使用运行jQuery的弹出窗口完成扩展
The following complete extension, which runs your jQuery code, produces a popup which looks like: 以下完整的扩展，运行您的jQuery代码，生成一个弹出窗口，如下所示：
manifest.json : 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 : 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 : popupindex.js ：
$(document).ready(function () {
$("div").css("border", "3px solid red");
});
jquery.min.js : jquery.min.js ：
Downloaded from https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js and stored as jquery.min.js in the extension's directory. 从https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js下载并存储为扩展程序目录中的jquery.min.js 。
解决方案2
-3 2016-11-06 20:18:59
当所有元素都已加载时，尝试将script标记移动到正文的底部。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.