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

Ниже приведен мой код 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, он дает мне следующие ошибки.

Неподготовлено ReferenceError: $не определено

и

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

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

Спасибо

Ответы

Ответ 1

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

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

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

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

Скрипты могут быть загружены только в расширение по HTTPS, поэтому вы должны загрузить ресурс CDN jQuery через 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 в папку расширения и обратитесь к ней с относительным путем в тэге script. Предполагая, что ваша библиотека jQuery и всплывающий файл HTML находятся в одном и том же подкаталоге, просто выполните:

<script src="jquery-x.y.z.min.js"></script>