Chrome 扩展弹出窗口中 <script> 标记中的简单 jQuery 未执行答案

【问题标题】：Simple jQuery within <script> tag in Chrome extension popup is not executingChrome 扩展弹出窗口中 <script> 标记中的简单 jQuery 未执行
【发布时间】：2016-11-06 20:01:40
【问题描述】：

这是我的 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 扩展的 manifest.json 文件中的browser_action 调用的。因此，它以这种方式打开弹出窗口：

还值得一提的是，上面的图片只是谷歌提供的示例图片。这不是我的形象。我的 div 没有边框，jQuery 没有改变它。

manifest.json

.... 

"browser_action": {
    "default_popup": "popupindex.html",
}
....

我看不出这个弹出窗口会如何影响 .js 文件的功能，但我确信它与此有关。

从 OP 对答案的评论中添加：
在所有这些 div 周围添加边框只是我测试 jQuery 是否有效的方法。将来我将需要 jQuery 来处理许多其他事情。它甚至不适用于这个简单的东西。

【问题讨论】：

请edit 成为主题问题：包括一个完整 minimal reproducible example 重复该问题。通常，包括一个manifest.json、一些后台和内容脚本。寻求调试帮助的问题（“为什么这段代码不工作？”）必须包括：►期望的行为，►特定问题或错误和►必要的最短代码重现它在问题本身。没有明确问题陈述的问题对其他读者没有用处。请参阅：“如何创建 minimal reproducible example”、What topics can I ask about here? 和 How to Ask。
您在console for the popup 中看到了哪些错误/输出？

标签： javascript jquery html google-chrome-extension content-security-policy

【解决方案1】：

您正在尝试加载/运行违反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:

此政策通过以下三种方式限制扩展程序和应用程序来增加安全性：

Eval and related functions are disabled

Inline JavaScript will not be executed
此限制禁止内联块和内联事件处理程序（例如<button onclick="...">）。

Only local script and and object resources are loaded
与其编写依赖于从外部 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>

显然，这需要在加载 jQuery 的 <script> 标记之后。

您可以包含内联脚本，但您需要在 manifest.json 中的 content_security_policy 键的值中提供“hash of the script in the "script-src" directive”。但是，这样做不值得花时间和精力。将代码移动到单独的文件中要容易得多。

也不允许包含在 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 的形式存储在扩展程序的目录中。

【讨论】：

@Makyen 如果没有插件无法访问浏览器内存怎么办？如何解决这个问题？
@Sarvesh，我不确定你在问什么。你能澄清一下吗？
使用插件我在浏览器中存储了数据。假设 xyz 存储在浏览器本地存储中。现在附加组件中有一个按钮，它将从本地内存中弹出这个 xyz 并显示在警报框中...这个在警报中显示不起作用
@Sarvesh，我仍然不清楚你想说什么。听起来您可能需要ask a question。

【解决方案2】：

当所有元素都加载完毕后，尝试将 script 标签移动到正文底部。

【讨论】：