Die Erweiterung weigert sich, das Skript aufgrund der Richtlinie zur Inhaltssicherheit zu laden

Im Folgenden ist mein Code von HTML

Skripte:

<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/>

und das Folgende ist js

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

manifest-Datei:

{
"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"
},
}

Ich habe festgestellt, dass, wenn ich diesen Code einfach im Browser ausführe, die Warnung ordnungsgemäß angezeigt wird, aber wenn ich sie als Chrome-Erweiterung ausführe, gibt es folgende Fehler.

Nicht erfasster Referenzfehler: $ ist nicht definiert

und

Weigerte sich, das Skript zu laden ‘http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js‘, weil es gegen die folgende Richtlinie zur Inhaltssicherheit verstößt: “script-src ‘self’ chrome-extension-resource:”.

Ich verstehe nicht, was das für Fehler sind. Bitte helfen Sie mir, die Erweiterung zu verstehen.

Danke schön

In einer Chrome-Erweiterung müssen externe Skriptquellen ausdrücklich von der Erweiterung zugelassen werden Inhaltssicherheitsrichtlinie (CSP) in Ihrem Manifest:

Wenn Sie externe JavaScript- oder Objektressourcen benötigen, können Sie die Richtlinie in begrenztem Umfang lockern, indem Sie sichere Ursprünge auf die Whitelist setzen, von denen Skripts akzeptiert werden sollen …

Eine gelockerte Richtliniendefinition, die das Laden von Skriptressourcen von example.com über HTTPS ermöglicht, könnte folgendermaßen aussehen:

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

Skripte können nur über HTTPS in eine Erweiterung geladen werden, daher müssen Sie die jQuery-CDN-Ressource über HTTPS laden:

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

Und fügen Sie Ihrem Manifest einen modifizierten CSP hinzu, um diese HTTPS-Ressource zuzulassen:

{
    "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'"
}

Eine noch bessere Lösung für Ihren speziellen Fall wäre jedoch, jQuery lokal in Ihre Erweiterung aufzunehmen, anstatt aus dem Internet zu laden (Ihre Erweiterung funktioniert beispielsweise derzeit nicht offline). Fügen Sie einfach eine Kopie von jQuery in Ihren Erweiterungsordner ein und verweisen Sie darauf mit einem relativen Pfad in Ihrem Skript-Tag. Angenommen, Ihre jQuery-Bibliothek und Ihre HTML-Popup-Datei befinden sich im selben Unterverzeichnis, tun Sie einfach Folgendes:

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

<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="https://stackoverflow.com/include/jquery.js"></script>