addEventListener在擴展中使用時不觸發

我試圖做一個chrome擴展，它將爲給定頁面搜索不同的緩存數據庫。但是，它並不像我預期的那樣工作。addEventListener在擴展中使用時不觸發

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

這裏是我的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事件調用它（或$（文件）。就緒（）如果使用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 2012-03-09 01:43:43

嘗試將您的JavaScript作爲外部文件加入，從頁面底部引用（就在您關閉本體之前）。

此外，爲確保DOM實際上已經被加載，它包裝在一個DOMContentLoaded監聽：

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

來源

2012-03-08 07:58:37 Rexxars

這擺脫了我的一個錯誤，謝謝。 – Dbz 2012-03-09 01:43:12

使用DOMContentLoaded爲addEventListener +1。但是，文件不需要包含在頁面的底部。 – jmort253 2012-10-16 00:35:43

addEventListener在擴展中使用時不觸發

回答

相關問題