Chrome 扩展弹出窗口中的 <script> 标记内的简单 jQuery 未执行
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 的 link 由 Google 提供并且也有效。
值得一提的是 .html 文件是由 browser_action 从 manifest.json Google Chrome 扩展名的文件。因此，它以这种方式打开弹出窗口：
另外值得一提的是，上图只是Google提供的示例图。这不是我的形象。我的 div 没有边框，jQuery 也没有改变。
manifest.json
....
"browser_action": {
"default_popup": "popupindex.html",
}
....
我不明白 window 作为弹出窗口会如何影响 .js 文件功能，但我确信它与此有关。
根据 OP 对答案的评论添加：
在所有这些 div 周围添加边框只是我测试 jQuery 是否有效的方法。将来我将需要 jQuery 来做很多其他事情。它甚至不适用于这个简单的东西。
尝试将 script 标签移动到正文底部，当所有元素都已加载时。
您正在尝试 load/run 违反 Content Security Policy 的脚本。这会影响 您尝试从扩展程序外部的源加载 jQuery 以及您尝试使用内联脚本（您的 $(document).read() 代码）。
您可以通过右键单击弹出窗口并选择“检查”来访问弹出窗口的控制台。控制台会向您显示以下错误：
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 扩展，default Content Security Policy 是：
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 (e.g. <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.
加载中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），然后将其包含在您的 [=106= 中] 使用：
<script src="popupindex.js"></script>
显然，它需要在正在加载 jQuery 的 <script> 标签之后。
您可以包含内联脚本，但您需要在 manifest.json[= 中的 content_security_policy 键的值中提供“hash of the script in the "script-src" directive” 94=]。然而，这样做并不值得花费时间和精力。将代码移动到单独的文件中 容易得多。
JavaScript 包含在 HTML 定义的事件处理程序中也是不允许的
您在 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。
这是我的 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 的 link 由 Google 提供并且也有效。
值得一提的是 .html 文件是由 browser_action 从 manifest.json Google Chrome 扩展名的文件。因此，它以这种方式打开弹出窗口：
另外值得一提的是，上图只是Google提供的示例图。这不是我的形象。我的 div 没有边框，jQuery 也没有改变。
manifest.json
....
"browser_action": {
"default_popup": "popupindex.html",
}
....
我不明白 window 作为弹出窗口会如何影响 .js 文件功能，但我确信它与此有关。
根据 OP 对答案的评论添加：
在所有这些 div 周围添加边框只是我测试 jQuery 是否有效的方法。将来我将需要 jQuery 来做很多其他事情。它甚至不适用于这个简单的东西。
尝试将 script 标签移动到正文底部，当所有元素都已加载时。
您正在尝试 load/run 违反 Content Security Policy 的脚本。这会影响 您尝试从扩展程序外部的源加载 jQuery 以及您尝试使用内联脚本（您的 $(document).read() 代码）。
您可以通过右键单击弹出窗口并选择“检查”来访问弹出窗口的控制台。控制台会向您显示以下错误：
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 扩展，default Content Security Policy 是：
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 (e.g.<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.
加载中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），然后将其包含在您的 [=106= 中] 使用：
<script src="popupindex.js"></script>
显然，它需要在正在加载 jQuery 的 <script> 标签之后。
您可以包含内联脚本，但您需要在 manifest.json[= 中的 content_security_policy 键的值中提供“hash of the script in the "script-src" directive” 94=]。然而，这样做并不值得花费时间和精力。将代码移动到单独的文件中 容易得多。
JavaScript 包含在 HTML 定义的事件处理程序中也是不允许的
您在 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。