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

时间：2016-11-06 20:01:40

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

这是我的HTML：

＆＃xA;＆＃xA; 
 ＆lt;！doctype html＆gt;＆＃xA;＆lt; html＆gt; ＆＃XA;＆LT; HEAD＆GT;＆＃XA; ＆LT;标题＆GT; PassVault＆LT; /标题＆GT;＆＃XA; ＆lt; link rel =“stylesheet”type =“text / css”href =“stil.css”＆gt;＆＃xA; ＆lt; meta charset =“utf-8”＆gt;＆＃xA; ＆lt; script type ='text / javascript'src ='http：//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'>＆lt; / script＆gt;＆＃xA; ＆lt; script type =“text / javascript”＆gt;＆＃xA; $（document）.ready（function（）{＆＃xA;＆＃xA; $（“div”）。css（“border”，“3px solid red”）;＆＃xA;＆＃xA;}）; ＆＃XA; ＆LT; /脚本＆GT;＆＃XA;＆LT; /头＆GT;＆＃XA;＆＃XA;＆LT;身体GT;＆＃XA; ＆lt; div id =“rainbow”＆gt; ＆LT; / DIV＆GT;＆＃XA; ＆lt; div id =“loginBox”＆gt;＆＃xA; ＆lt; div id =“welcome”＆gt; Dobrodošli，uporabnik！ ＆LT; / DIV＆GT;＆LT峰; br＆GT;＆＃XA; ＆lt; / div＆gt;＆＃xA;＆lt; / body＆gt;＆＃xA;＆lt; / html＆gt;＆＃xA;
＆＃xA;＆＃xA;

文档加载后它应该在我的所有div周围放置一个红色边框（HTML文件中有很多），但事实并非如此。我不明白这里有什么问题。 jQuery都在同一个文件中，jQuery托管的链接由Google提供并且也有效。

＆＃xA;＆＃xA;

值得一提的是 .html 文件由Google Chrome扩展程序的 manifest.json 文件中的 browser_action 调用。所以，它以这种方式打开弹出窗口：

＆＃xA;＆＃xA;

＆＃xA;＆＃xA;

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

＆＃xA;＆＃xA;

manifest.json

＆＃xA;＆＃xA ; 
  ....＆＃xA;＆＃xA;“browser_action”：{＆＃xA; “default_popup”：“popupindex.html”，＆＃xA;}＆＃xA; ....＆＃xA;
＆＃xA;＆＃xA;

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

＆＃xA;＆＃xA;

已添加来自OP的答案评论：
＆＃xA;在所有这些div之间添加边框只是我测试jQuery是否有效的方法。我将来需要jQuery来完成其他很多事情。它甚至不能用于这个简单的事情。

＆＃xA;

2 个答案:

答案 0 :(得分：6)

您正在尝试加载/运行违反Content Security Policy的脚本。这会影响 您尝试从扩展程序外部的源加载jQuery以及您尝试使用内联脚本（$(document).read()代码）。

您可以通过右键单击弹出窗口并选择＆＃34; Inspect＆＃34;来访问弹出窗口的控制台。控制台会向您显示以下错误：

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:

  

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

     

加载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>标记之后。

您可以添加内联脚本，但需要提供＆＃34; hash of the script in the "script-src" directive＆＃34;在 manifest.json 中的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代码，生成一个类似于：

的弹出窗口

popup

的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 在扩展程序的目录中。

答案 1 :(得分：-3)

尝试将所有元素加载后，将script标记移动到正文的底部。

相关问题
最新问题