Échec des événements de clic sur l'extension : résolution de la violation des règles de sécurité du contenu

Description de l'erreur

Dans une extension Chrome, cliquez sur les événements sur l'icône de l'extension et un bouton dans la page contextuelle ne génère pas la réponse attendue lors de l'incrémentation d'une variable JavaScript.

Inspection de la cause première

Pour déboguez le problème, inspectez la page contextuelle et examinez les journaux de la console. Le message d'erreur indique probablement une violation de la politique de sécurité du contenu (CSP) :

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".

Conformité CSP compromise

Les scripts en ligne dans la page HTML violent le CSP par défaut. JavaScript en ligne n'est pas autorisé dans le cadre de cette politique.

Solution : Isoler JavaScript

Pour résoudre le problème, supprimez tout le JavaScript en ligne du fichier HTML et placez-le dans un fichier JavaScript distinct.

Structure du code révisée

hello.html (page contextuelle)

popup.js

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

Notes

• Remplacez innerHTML par textContent lors de la modification du texte pour atténuer les vulnérabilités XSS potentielles.
• Cette solution garantit la conformité avec CSP, permettant l'exécution correcte des scripts et la gestion des événements de clic.