addEventListener not triggering when used in a Chrome extension

javascript json google-chrome google-chrome-extension dom-events

17,921

Solution 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>

Solution 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 */
});

17,921

Author by

Dbz

I can code in lsl

Updated on June 15, 2022

Comments

Dbz almost 2 years

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.

Dbz about 12 years

Thank you for the debugging tool tip. That was very helpful.
jamesmortensen over 11 years

+1 for the addEventListener using DOMContentLoaded. Files don't need to be included in the bottom of the page, however.