Google Chrome擴展程序中的JavaScript事件

Question

我是對Chrome擴展程序進行編碼的新手，所以我使用以下代碼來調用函數：

getElementsByTagName('body').addEventListener("load", function() {

  chrome.tabs.getSelected(null, function(tab) {

     alert(tab.url);

  });

}, false);

而且它不起作用。 我也試過這個：

getElementsById('bottom').addEventListener("click", function() {

  chrome.tabs.getSelected(null, function(tab) {

     alert(tab.url);

  });

}, false);

我不知道問題可能出在manifest.json中，所以這里是：

{

   //Main

   "name": "Linknote",
   "version": "0.4",
   "manifest_version": 2,
   "description": "Store all your links",
   "permissions": [
     "storage",
     "http://ajax.googleapis.com/",
     "tabs"
   ],

//Chrome Tab

   "browser_action": {

     "default_title": "helloworld",      // optional; shown in tooltip
     "default_popup": "popup.html"        // optional

   }

}

Answer 1

如果您使用的是Chrome瀏覽器操作，則實際上應采用這種方式。

chrome.browserAction.onClicked.addListener( function(tab){
    -- Your javascript code here --
});

我想這就是你所缺少的！

Answer 2

您的代碼中有兩個錯誤：第一個錯誤是您忘記在getElementById上添加document對象。 只需在我的popup.html中運行此代碼，就沒有任何問題。

document.getElementById("bottom").addEventListener("click", function() { 
       console.log("Clicked") 
}, false);

第二個是您忘記了getElementsByTagName返回一個NodeCollection，因此您需要檢索要向其中添加EventListener的第一個節點。

document.getElementsByTagName("body")[0].addEventListener("load", function() { 
       console.log("Loaded") 
}, false);

您的代碼在開發人員工具欄中返回語法錯誤； 為了在Chrome擴展程序中將其打開，請單擊“瀏覽操作”圖標/“頁面操作”圖標，然后右鍵單擊彈出窗口。 單擊“檢查元素”將向您展示一個全新的世界。