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扩展程序中将其打开，请单击“浏览操作”图标/“页面操作”图标，然后右键单击弹出窗口。 单击“检查元素”将向您展示一个全新的世界。