la méthode addEventListener déclenche pas lorsqu'utilisé dans une extension chrome
Je suis en train de faire une extension chrome qui va de la recherche de cache différent de bases de données pour une page donnée. Toutefois, il ne fonctionne pas comme prévu.
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var x;
var img = document.getElementsByTagName("img");
for(x in img) {
img[x].addEventListener('click',openPage, false);
}
function openPage(event) {
alert("clicked");
var e = event.target;
switch(e.alt) {
case "WayBack Machine":
chrome.tabs.update(tab.id, { url: "http://wayback.archive.org/web/*/" + tab.url });
break;
case "Google Cache":
if(tab.url.substring(0, 5) == "http:")
chrome.tabs.update(tab.id, { url: 'http://webcache.googleusercontent.com/search?q=cache:' + tab.url.substr(7) });
else if(tab.url.substring(0,6) == "https:")
chrome.tabs.update(tab.id, { url: 'http://webcache.googleusercontent.com/search?q=cache:' + tab.url.substr(8) });
break;
case "Yahoo Cache":
//Need the yahoo cache url
break;
case "Bing Cache":
chrome.tabs.update(tab.id, { url: "http://cc.bingj.com/cache.aspx?q=" + tab.url + "&d=4572216504747453&mkt=en-US&setlang=en-US&w=802790a9,218b61b8" });
break;
case "Gigablast":
chrome.tabs.update(tab.id, { url: "http://www.gigablast.com/get?q=" + tab.url + "&c=main&d=70166151696&cnsp=0" });
break;
case "CoralCDN":
chrome.tabs.update(tab.id, { url: tab.url + ".nyud.net" });
break;
default: //Webcite
//Need to send a request, this won't do
chrome.tabs.update(tab.id, { url: "http://webcitation.org/query" });
break;
}
}
</script>
</head>
<body>
<img src="Google Cache.png", alt="WayBack Machine" class="button" id="WayBack Machine" height ="40px" />
<img src="Google Cache.png", alt="Google Cache" class="button" id="Google Cache" height ="40px" />
<img src="Google Cache.png", alt="Yahoo Cache" class="button" id="Yahoo Cache" height ="40px" />
<img src="Google Cache.png", alt="Bing Cache" class="button" id="Bing Cache" height ="40px" />
<img src="Google Cache.png", alt="Gigablast" class="button" id="Gigablast" height ="40px" />
<img src="Google Cache.png", alt="CoralCDN" class="button" id="CoralCDN" height ="40px" />
<img src="Google Cache.png", alt="Webcite" class="button" id="Webcite" height ="40px" />
</body>
</html>
Cependant, il n'a même pas alert(); Quand j'ai essayer le code dans un jsfiddle.net il travaille: http://jsfiddle.net/RZ2wC/
Voici mon manifeste.json:
{
"name": "gCache",
"version": "1.1.5",
"description": "View the Google Cache of a page",
"browser_action": {
"default_icon": "icon.png",
"default_text": "Google Cache version of this page",
"default_popup": "cacheList.html"
},
"permissions": [
"tabs"
]
}
Toute aide serait grandement appréciée. Sur cette question, et tous les bugs que vous voyez dans mon code que je n'ai pas réussi encore. Merci beaucoup!
OriginalL'auteur Dbz | 2012-03-08
Vous devez vous connecter pour publier un commentaire.
Le débogage de votre échantillon via un clic-droit sur browserAction bouton et en sélectionnant "inspecter popup" (ce qui vous mènera à la "poursuite de bugs") a montré, que vous essayez d'ajouter un événement à "0"
La raison pour cela est à mon humble avis que la page n'a pas encore chargé, mais vous essayez d'accéder au DOM des images.
Essayer d'emballage de votre addEvents dans une fonction comme
et l'appeler à partir du corps-événement onload (ou $(document).prêt() si vous utilisez jQuery)
OriginalL'auteur x29a
Essayez d'inclure votre code javascript dans des fichiers externes, référencée à partir du bas de votre page (juste avant de fermer le corps).
Aussi, assurez-vous que le DOM a effectivement été chargé, de l'envelopper dans un DOMContentLoaded-écouteur:
+1 pour la méthode addEventListener à l'aide de DOMContentLoaded. Les fichiers ne doivent pas être incluses dans le fond de la page, cependant.
OriginalL'auteur Rexxars