javascript - 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: "/*/" + tab.url });
        break;
    
    case "Google Cache":
        if(tab.url.substring(0, 5) == "http:")
            chrome.tabs.update(tab.id, { url: ':' + tab.url.substr(7) });
        else if(tab.url.substring(0,6) == "https:")
            chrome.tabs.update(tab.id, { url: ':' + tab.url.substr(8) });
        break;

    case "Yahoo Cache":
        // Need the yahoo cache url
        break;

    case "Bing Cache":
        chrome.tabs.update(tab.id, { url: ".aspx?q=" + tab.url + "&d=4572216504747453&mkt=en-US&setlang=en-US&w=802790a9,218b61b8" });
        break;
    
    case "Gigablast":
        chrome.tabs.update(tab.id, { url: "=" + tab.url + "&c=main&d=70166151696&cnsp=0" });
        break;

    case "CoralCDN":
        chrome.tabs.update(tab.id, { url: tab.url + ".nyud" });
        break;
    
    default: // Webcite
        // Need to send a request, this won't do
        chrome.tabs.update(tab.id, { url: "; });
        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, it works: /

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.

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/web/*/" + tab.url });
        break;
    
    case "Google Cache":
        if(tab.url.substring(0, 5) == "http:")
            chrome.tabs.update(tab.id, { url: 'http://webcache.googleusercontent./search?q=cache:' + tab.url.substr(7) });
        else if(tab.url.substring(0,6) == "https:")
            chrome.tabs.update(tab.id, { url: 'http://webcache.googleusercontent./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./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./get?q=" + tab.url + "&c=main&d=70166151696&cnsp=0" });
        break;

    case "CoralCDN":
        chrome.tabs.update(tab.id, { url: tab.url + ".nyud" });
        break;
    
    default: // Webcite
        // Need to send a request, this won't do
        chrome.tabs.update(tab.id, { url: "http://webcitation/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, it works: http://jsfiddle/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.

Share Improve this question edited Jul 10, 2020 at 11:09 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Mar 8, 2012 at 2:00 Dbz 2,7614 gold badges36 silver badges53 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 4

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

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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - addEventListener not triggering when used in a Chrome extension - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)