Il popup dell’estensione di Chrome non funziona, gli eventi di clic non vengono gestiti

Ho creato una variabile JavaScript e quando clicco sul pulsante dovrebbe aumentare di 1, ma non sta succedendo.

Ecco 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" } } 

Ecco il codice per la pagina html

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

=a

Voglio che l’estensione mostri il valore di a e lo incrementi di uno ogni volta che clicco sull’estensione o sul pulsante

immagine dell'estensione

Il tuo codice non funziona perché viola la politica di sicurezza dei contenuti predefinita. Ho creato uno screencast di un minuto per mostrare cosa non va:

screencast

Innanzitutto, ho mostrato come eseguire il debug del problema. Fai clic con il pulsante destro del mouse sul pulsante popup e fai clic su “Ispeziona popup” . Dopo averlo fatto, visualizzerai il seguente messaggio di errore:

Rifiutato di eseguire script inline perché viola la seguente direttiva di Content Security Policy: “script-src ‘self’ chrome-extension-resource:”.

Questo spiega che il tuo codice non funziona, perché viola il CSP predefinito: JavaScript inline non verrà eseguito . Per risolvere il problema, devi rimuovere tutto il codice JavaScript in linea dal tuo file HTML e metterlo in un file JS separato.

Il risultato è mostrato di seguito:

hello.html (pagina popup)

      

=a

popup.js

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

Tieni presente che ho sostituito innerHTML con textContent . Impara a usare textContent invece di innerHTML quando intendi cambiare il testo. In questo semplice esempio non importa, ma in applicazioni più complesse, potrebbe diventare un problema di sicurezza sotto forma di XSS.

Cambia il tuo onclick :

 onclick="count" 

O cambia la tua funzione di conteggio in qualcosa del genere:

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

Ecco una bella demo che ho messo insieme:

Codice (questo presuppone che tu aggiunga id="the_button" al tuo pulsante):

 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; } } } 

Demo: http://jsfiddle.net/maniator/ck5Yz/