web-dev-qa-db-fra.com

L'extension refuse de charger le script en raison de la directive relative à la sécurité du contenu

Voici mon code HTML

Scripts:

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

et suit est js

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

fichier manifeste:

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

J'ai constaté que lorsque je lance ce code simplement dans le navigateur, l'alerte apparaît correctement, mais lorsque je l'exécute en tant qu'extension chrome), les erreurs suivantes sont générées.

Uncaught ReferenceError: $ n'est pas défini

et

a refusé de charger le script ' http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js ' car il enfreint la directive suivante relative à la politique de sécurité du contenu: "script-src 'self' chrome-extension-resource:".

Je ne comprends pas quelles sont ces erreurs. S'il vous plaît aidez-moi à comprendre l'extension ..

Merci

jquerygoogle-chromegoogle-chrome-extensioncontent-security-policy
49
Maharshi

Dans une extension Chrome, les sources de script externes doivent être explicitement autorisées par l'extension stratégie de sécurité du conten (CSP) dans votre manifeste:

Si vous avez besoin de JavaScript ou de ressources objet externes, vous pouvez assouplir la stratégie en ajoutant des origines sécurisées à la liste blanche, à partir desquelles les scripts doivent être acceptés ...

Une définition de stratégie assouplie permettant le chargement de ressources de script à partir d'exemple.com via HTTPS pourrait ressembler à ceci:

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

Les scripts ne peuvent être chargés que dans une extension via HTTPS. Vous devez donc charger la ressource CDN jQuery via HTTPS:

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

Et ajoutez un CSP modifié à votre manifeste pour autoriser cette ressource 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'"
}

Et une solution encore meilleure pour votre cas particulier serait toutefois d’inclure jQuery dans votre extension localement, au lieu de charger à partir d’Internet (par exemple, votre extension ne fonctionnera pas actuellement hors connexion). Il suffit simplement d’inclure une copie de jQuery dans votre dossier d’extension et de vous y référer avec un chemin relatif dans votre balise de script. En supposant que votre bibliothèque jQuery et votre fichier contextuel HTML se trouvent dans le même sous-répertoire, procédez comme suit:

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