Расширение отказывается загружать сценарий из-за директивы политики безопасности содержимого

Ниже приведен мой код HTML

скрипт:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="background.js"></script>

HTML-код:

      <button name="btnlogin" id="btnlogin">Login</button><br/><br/>

и следование js

$(document).ready(function(){
document.getElementById("#btnlogin").click(function(){
   alert("s");
 });
});

файл манифеста:

{
"manifest_version": 2,
"name": "One-click Kittens",
"description": "This extension demonstrates a 'browser action' with kittens.",
 "version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
}

я обнаружил, что когда я запускаю этот код просто в браузере, чем предупреждение появляется правильно, но когда я запускаю его как расширение chrome, это дает мне следующие ошибки.

Uncaught ReferenceError: $ не определен

и

отказалась чтобы загрузить скрипт'http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js 'потому что это нарушает следующую директиву политики безопасности контента:" script-src 'self' chrome-extension-resource:".

Я не понимаю, что это за ошибки. Пожалуйста, помогите мне понять расширение..

спасибо

40
content-security-policy google-chrome google-chrome-extension jquery

2 ответов

в расширении Chrome внешние источники скриптов должны быть явно разрешены расширением политика безопасности контента (CSP) в вашем манифесте:

если у вас есть потребность в некоторых внешних ресурсах JavaScript или объекта, вы можете ослабить политику в ограниченной степени, белый список безопасных источников, из которых сценарии должны быть приняты...

расслабленное определение политики, которое позволяет загружать ресурсы скрипта из example.com конец HTTPS может выглядеть так:

"content_security_policy":"script-src 'self' https://example.com; object-src 'self'"

скрипты могут быть загружены только в расширение по HTTPS, поэтому вы должны загрузить ресурс jQuery CDN по HTTPS:

<script src="https://ajax.googleapis.com/..."></script>

и добавьте измененный CSP в манифест, чтобы разрешить этот ресурс HTTPS:

{
    "manifest_version": 2,
    "name": "One-click Kittens",
    "description": "This extension demonstrates a 'browser action' with kittens.",
    "version": "1.0",
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },
    "content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'"
}

и еще лучшим решением для вашего конкретного случая, однако, было бы включить jQuery в ваше расширение локально, а не загружать из интернета (например, ваше расширение в настоящее время не будет работать автономный.) Просто включите копию jQuery в папку расширения и обратитесь к ней с относительным путем в теге скрипта. Предполагая, что ваша библиотека jQuery и всплывающий файл HTML находятся в одном подкаталоге, просто сделайте:

<script src="jquery-x.y.z.min.js"></script>
52
<script nonce='<?= CSP::getNonce() ?>'>
var oldCreate = document.__proto__.createElement;
document.__proto__.createElement = function (elementName) {      
    var el = oldCreate.apply(this, arguments);
    if (elementName == "script") {           
        el.setAttribute('nonce', '<?= CSP::getNonce() ?>');
    }
    return el;
}
</script>

<script nonce='<?= CSP::getNonce()?>' type="text/javascript" src="/include/jquery.js"></script>
-2