addEventListener не запускается при использовании в расширении chrome

Я пытаюсь сделать расширение chrome, которое будет искать различные базы данных кэша для данной страницы. Тем не менее, он не работает, как я ожидаю.addEventListener не запускается при использовании в расширении chrome

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

Однако он даже не предупреждает(); Когда я пытаюсь код в jsfiddle.net, он работает: http://jsfiddle.net/RZ2wC/

Вот мой 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" 
    ] 
}

Любая помощь будет принята с благодарностью. На этот вопрос и любые ошибки, которые вы видите в моем коде, который я еще не получил. Большое спасибо!

источник

2012-03-08 Dbz

отладки вашего образца с помощью правой кнопкой мыши на кнопке browserAction и выбрав «инспектировать всплывающее окно» (это приведет вас к «дополнительные баги») показал, что вы пытаетесь добавить событие в «0»

Uncaught TypeError: Object 0 has no method 'addEventListener'

Причина этого - ИМХО, что страница еще не загружена, но вы пытаетесь получить доступ к DOM изображений.

Попробуйте оборачивать ваши addEvents в функции как

function magic() { 
    var x; 
    var img = document.getElementsByTagName("img"); 
    for(x=0; x < img['length']; ++x) { 
    img[x].addEventListener('click',openPage, false); 
    } 
}

и вызывать его из тела-OnLoad событие (или $ (документ) .ready() при использовании 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>

источник

2012-03-08 07:34:41 x29a

Спасибо за подсказку отладки инструмента. Это было очень полезно. – Dbz

Try включить ваш javascript в качестве внешних файлов, ссылаясь на нижнюю часть вашей страницы (прямо перед тем, как закрыть тело).

Кроме того, чтобы убедиться, что DOM фактически был загружен, завернуть его в DOMContentLoaded-слушателю:

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

источник

2012-03-08 07:58:37 Rexxars

Это избавило меня от одной из моих ошибок, спасибо. – Dbz

+1 для addEventListener с использованием DOMContentLoaded. Однако файлы не нужно включать в нижнюю часть страницы. – jmort253

addEventListener не запускается при использовании в расширении chrome

ответ

Смежные вопросы