addEventListener not triggering when used in a chrome extension

问题

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>

However, it does not even alert(); When I try the code in a jsfiddle.net, it works: http://jsfiddle.net/RZ2wC/

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. Many thanks!

回答1:

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'

The reason for this is IMHO that the page has not yet loaded but you are trying to access the DOM of the images.

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

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>

回答2:

Try to include your javascript as external files, referenced from the bottom of your page (right before you close the body).

Also, to make sure the DOM has actually been loaded, wrap it in a DOMContentLoaded-listener:

document.addEventListener('DOMContentLoaded', function() {
    /* Add your event listeners here */
});

来源：https://stackoverflow.com/questions/9611937/addeventlistener-not-triggering-when-used-in-a-chrome-extension

标签

javascript

json

google-chrome

javascript-events

google-chrome-extension