在Chrome扩展程序中使用addEventListener时不会触发 [英] addEventListener not triggering when used in a Chrome extension
问题描述
我正在尝试制作一个Chrome扩展程序，该扩展程序将搜索给定页面的不同缓存数据库。但是，它无法正常工作。
I'm trying to make a Chrome extension that will search different cache databases for a given page. However, it's not working as I expect it to.
<!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>
但是，即使我没有 alert（）; 尝试在jsfiddle.net中的代码，它可以正常工作： http://jsfiddle.net/RZ2wC/
However, it does not even alert(); When I try the code in a jsfiddle.net, it works: http://jsfiddle.net/RZ2wC/
这是我的manifest.json：
Here is my manifest.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"
]
}
任何帮助将不胜感激。关于这个问题以及您在我的代码中看到的尚未发现的所有错误。
Any help would be greatly appreciated. On this question and any bugs that you see in my code that I haven't gotten to yet.
推荐答案
通过右键单击browserAction按钮，然后选择检查弹出窗口（这将导致您出现其他错误），表明您正在尝试将事件添加到 0
Debugging your sample via right-click on browserAction button and selecting "inspect popup" (this will lead you to "further bugs") showed, that you are trying to add an event to "0"
Uncaught TypeError: Object 0 has no method 'addEventListener'
原因是恕我直言，页面尚未加载，但您正在尝试访问图像的DOM。
The reason for this is IMHO that the page has not yet loaded but you are trying to access the DOM of the images.
请尝试将addEvents包装在类似
Try wrapping your addEvents in a function like
function magic() {
var x;
var img = document.getElementsByTagName("img");
for(x=0; x < img['length']; ++x) {
img[x].addEventListener('click',openPage, false);
}
}
并从body-onload事件中调用它（或$（document）.ready（）（如果使用jQuery）
and call it from the body-onload event (or $(document).ready() if using jQuery)
<body onload="magic()">
<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" />
...
</body>
这篇关于在Chrome扩展程序中使用addEventListener时不会触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
