Question

我有一个Chrome扩展程序，我在其中使用html文件覆盖newtab＆＃39; index.html＆＃39;。
我想在此＆＃39上使用jQuery ;的index.html＆＃39; 。
我该怎么做？

这是我的简化代码：

的manifest.json

{
    "name": "Test Name",
    "description": "Test Description",
    "version": "0.1",
    "chrome_url_overrides": {
        "newtab": "index.html"
    },
    "manifest_version": 2,
}

的index.html

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="index.js"></script>
    </head>
    <body>
        <div> Hello World ! </div>
    </body>
</html>

index.js

console.log('Extension loaded successfully ...');
console.log($('div')); // console.log(jQuery('div'));

但是我在控制台中一直收到以下两个错误。

拒绝加载脚本   ＆＃39; https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js＆＃39;   因为它违反了以下内容安全策略指令：   ＆＃34; script-src＆＃39; self＆＃39;铬扩展资源：＆＃34;

扩展已成功加载...

未捕获的ReferenceError：$未定义

更新：1 我还尝试在清单文件中添加content security policy，但它不起作用，仍然会产生错误：

"content_security_policy": "script-src 'self' https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js 'unsafe-eval'; object-src 'self'",

更新：2 我还尝试在清单文件中添加权限，但它也不起作用，仍然是相同的错误：

"permissions": [ "http://*/", "https://*/" ]

我该如何解决这个问题？

Answer 1

您使用的CSP字符串格式错误。正确的是（注意没有路径）：

"content_security_policy": "script-src 'self' https://ajax.googleapis.com 'unsafe-eval'; object-src 'self'"

但是，最好包含您在Chrome扩展程序中使用的本地库副本，而不是依赖CDN。

想象一下，您的新标签页完全无法正确加载，因为连接无法正常工作，或因连接不良而加载缓慢。

Answer 2

尝试使用本地文件并使用$( document ).ready()运行console.log，数组可能会返回空，因为DOM尚未就绪：

$(document).ready(function(){
    console.log($('div'));
})

在Chrome扩展程序中，在重写的新标签页中使用jQuery违反了内容安全政策？

2 个答案: