Verlängerung verweigert das Skript aufgrund Content Security Policy Richtlinie

Question

Im Anschluss an mein Code von HTML

Skripte zu laden:

<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 finden js

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

m Anifest 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 fand, dass, wenn ich diesen Code einfach in Browser ausgeführt als Warnung wird angezeigt, richtig, aber wenn ich es als eine Chrome-Erweiterung ausführen es gibt mir Fehler folgen.

Uncaught Reference: definiert $ nicht

und

Refused das Skript 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' geladen werden, da es die folgenden Content Security Policy Richtlinie verletzt: „script-src 'self' Chrom- Erweiterungsressource: ".

Ich verstehe nicht, was diese Fehler sind. Bitte helfen Sie mir die Erweiterung zu verstehen ..

Sie

danken

Answer 1

In einer Chrome-Erweiterung, externes Skript Quellen müssen explizit durch die in Ihrem Manifest content security policy (CSP) der Verlängerung zulässig:

If you have a need for some external JavaScript or object resources, you can relax the policy to a limited extent by whitelisting secure origins from which scripts should be accepted...

A relaxed policy definition which allows script resources to be loaded from example.com over HTTPS might look like:

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

Skripte können nur in eine Verlängerung über HTTPS geladen werden, so müssen Sie die jQuery CDN Ressource über HTTPS laden:

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

Und fügen eine modifizierte CSP zu Ihrem Manifest, dass HTTPS-Ressource zu ermöglichen:

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

Und noch bessere Lösung für Ihren speziellen Fall jedoch jQuery lokal in Ihrer Erweiterung auf wäre, anstatt Laden aus dem Internet (zB Ihre Erweiterung funktioniert 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 HTML-Popup-Datei im selben Unterverzeichnis ist, tun einfach:

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