web-dev-qa-db-fra.com

La popup d'extension Chrome ne fonctionne pas, les événements de clic ne sont pas gérés

J'ai créé une variable JavaScript et lorsque je clique sur le bouton, elle devrait augmenter de 1, mais cela ne se produit pas.

Voici manifest.json.

{
  "name":"Facebook",
  "version":"1.0",
  "description":"My Facebook Profile",
  "manifest_version":2,
  "browser_action":{
    "default_icon":"google-plus-red-128.png",
    "default_popup":"hello.html"
  }
}

Voici le code pour la page html 

<!DOCTYPE html>
<html>
<head>
<script>
var a=0;
function count()
{
  a++;
  document.getElementById("demo").innerHTML=a;
  return a;
}
</script>
</head>
<body>
<p id="demo">=a</p>
<button type="button" onclick="count()">Count</button>
</body>
</html>

Je veux que l'extension me montre la valeur de a et l'incrémente d'une unité chaque fois que je clique sur l'extension ou sur le bouton

picture of the extension

javascriptgoogle-chromebuttongoogle-chrome-extensioncontent-security-policy
24
Sainath

Votre code ne fonctionne pas car il enfreint la valeur par défaut Politique de sécurité du contenu . J'ai créé un screencast d'une minute pour montrer ce qui ne va pas:

 screencast

Tout d'abord, j'ai montré comment résoudre le problème. Cliquez avec le bouton droit sur votre bouton contextuel, puis cliquez sur "Inspecter le menu contextuel" . Après cela, vous verrez le message d'erreur suivant:

A refusé d'exécuter le script en ligne car il enfreint la directive de sécurité du contenu suivante: "script-src 'self' chrome-extension-resource:".

Cela explique que votre code ne fonctionne pas, car il enfreint le CSP par défaut: Le code JavaScript en ligne ne sera pas exécuté . Pour résoudre le problème, vous devez supprimer tout le code JavaScript en ligne de votre fichier HTML et le placer dans un fichier JS séparé.

Le résultat est présenté ci-dessous:

hello.html (page popup)

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="demo">=a</p>
<button type="button" id="do-count">Count</button>
<script src="popup.js"></script>
</body>
</html>

popup.js

var a=0;
function count() {
    a++;
    document.getElementById('demo').textContent = a;
}
document.getElementById('do-count').onclick = count;

Notez que j'ai remplacé innerHTML par textContent. Apprenez à utiliser textContent au lieu de innerHTML lorsque vous souhaitez modifier le texte. Dans cet exemple simple, cela n'a pas d'importance, mais dans les applications plus complexes, cela peut devenir un problème de sécurité sous la forme de XSS.

113
Rob W

Changez votre onclick:

onclick="count"

Ou changez votre fonction de compte en quelque chose comme ceci:

function count()
{

    var demo = document.getElementById("demo");
    return function() {
        demo.innerHTML = ++a;
    }

}

Voici une belle démo que j'ai composée:

Code (cela suppose que vous ajoutez id="the_button" à votre bouton):

window.onload = function () {
    var button = document.getElementById("the_button");
    button.onclick = count();

    function count() {
        var a = 0;
        var demo = document.getElementById("demo");
        return function () {
            demo.innerHTML = ++a;
        }
    }
}

Démo: http://jsfiddle.net/maniator/ck5Yz/

0
Neal