onClick dans google Chrome Extension ne fonctionne pas
Cela semble être la chose la plus facile à faire, mais c'est juste ne fonctionne pas. Dans un navigateur la .html et .fichiers js fonctionne parfaitement, mais dans l'extension Chrome le onClick
fonction n'est pas accomplir ce qu'il est censé faire.
.fichier js:
function hellYeah(text) {
document.getElementById("text-holder").innerHTML = text;
}
.fichier html:
<!doctype html>
<html>
<head>
<title>
Getting Started Extension's Popup
</title>
<script src="popup.js"></script>
</head>
<body>
<div id="text-holder">
ha
</div>
<br />
<a onClick=hellYeah("xxx")>
hyhy
</a>
</body>
</html>
Donc, fondamentalement, une fois que l'utilisateur clique sur "hyhy", "ha" qui devrait changer en "xxx". Et une fois encore, il fonctionne parfaitement dans le navigateur, mais ne fonctionne pas dans l'extension. Savez-vous pourquoi? Juste au cas où je suis fixation du manifeste.json ci-dessous.
Merci d'avance!
manifeste.json:
{
"name": "My First Extension",
"version": "1.0",
"manifest_version": 2,
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"http://api.flickr.com/"
]
}
Vous devez vous connecter pour publier un commentaire.
Les Extensions de Chrome ne vous permettra pas d'avoir le JavaScript en ligne (la documentation). Vous allez avoir à faire quelque chose de semblable à cela.
Attribuer un ID pour le lien (
<a onClick=hellYeah("xxx")>
devient<a id="link">
), et l'utilisationaddEventListener
de lier l'événement. Placez le code suivant dans votrepopup.js
fichier:<script src="javascript.js"></script>
Like this.
onclick="handleClick()"
, vous pouvez toujours utiliserel.onclick = handleClick
.Raison
Cela ne fonctionne pas, parce que Chrome interdit toute forme de code en ligne dans les extensions via le Contenu Politique de Sécurité.
Comment détecter
Si c'est effectivement le problème, google Chrome serait de produire l'erreur suivante dans la console:
Pour accéder à une fenêtre de la console JavaScript (ce qui est utile pour le débogage en général), cliquez-droit sur votre poste de bouton et sélectionnez "Inspecter popup" dans le menu contextuel.
Plus d'informations sur le débogage d'un menu contextuel est disponible ici.
Comment réparer
On doit supprimer tous les JavaScript en ligne. Il est un guide dans google Chrome, documentation.
Supposons que l'original ressemble:
On doit supprimer les
onclick
attribut et de donner à l'élément d'id unique:Puis attacher l'auditeur à partir d'un script (qui doit être dans un
.js
fichier, supposons quepopup.js
):Note de l'emballage dans un
DOMContentLoaded
événement. Cela garantit que l'élément existe au moment de l'exécution. Maintenant, ajoutez la balise de script, par exemple dans le<head>
du document:Alternative si vous êtes à l'aide de jQuery:
De détente de la politique
Q: L'erreur mentionne des moyens pour permettre de code en ligne. Je ne veux pas /ne peut pas changer mon code, comment activer les scripts inline?
Un: en Dépit de ce que le message d'erreur indique, vous ne permettent de script en ligne:
Mise à jour: Depuis Chrome 46, il est possible de la liste blanche spécifiques inline blocs de code:
Cependant, je ne suis pas en mesure de voir une raison de l'utiliser, et il ne permettra pas inline attributs comme
onclick="code"
.J'ai eu le même problème, et n'a pas voulu réécrire le code, j'ai donc écrit une fonction pour modifier le code et de créer la ligne declarated événements:
Cela doit supprimer tous les inline événements à partir du nœud sélectionné, et de les recréer avec jquery à la place.
Je décide de publier mon exemple que j'ai utilisé dans mon cas. J'ai essayé de remplacer le contenu dans la div à l'aide d'un script. Mon problème est que Chrome n'a pas reconnu /ne pas exécuter ce script.
Plus en détail Ce que je voulais faire: cliquer sur un lien, et ce lien de "lire" un fichier html externe, qu'il sera chargé dans un div de la section.
a été appelé, le script ne fonctionne pas.
Le script doit être codée à l'aide de document.la méthode addEventListener('DOMContentLoaded', function() comme il a été dit