如何捕获扩展图标上触发的事件？

Question

我想为Chrome编写一个扩展，其中扩展图标上的某些鼠标操作会触发某些响应。

例如，我想，当它被点击，双次点击，滚动点击，滚动和对

我怎样才能把事件侦听器扩展程序图标，该图标不同的表现？我不介意图标是否在地址栏或扩展栏中。

^{1.我实际上专注于一个事件，即“正在滚动” - 因为这是唯一可以在没有窗口焦点时触发的事件。但我认为更普遍的问题更好。}

Answer 1

单单击和双击可以追踪使用Chrome浏览器扩展

一）Browser Action

B）Page Action。

默认情况下，chrome具有Browser和Page的单鼠标单击事件侦听器通过扩展该操作，您还可以捕获双击事件。

示范单和浏览器操作

此示例代码changes browser action icon单和双击双击事件（S），同样可以使用延长page action其Listener和setter。

的manifest.json

清单中

{ 
    "name": "Mouse Clicks", 
    "version": "0.0.1", 
    "manifest_version": 2, 
    "description": "This demonstrates how mouse clicks are tracked", 
    "background":{ 
     "scripts":["background.js"] 
    }, 
    "browser_action":{ 
     "default_icon":"normal.png" 
    } 

} 

background.js注册浏览器操作和后台脚本

//Set click to false at beginning 
var alreadyClicked = false; 
//Declare a timer variable 
var timer; 

//Add Default Listener provided by chrome.api.* 
chrome.browserAction.onClicked.addListener(function (tab) { 
    //Check for previous click 
    if (alreadyClicked) { 
     //Yes, Previous Click Detected 

     //Clear timer already set in earlier Click 
     clearTimeout(timer); 
     console.log("Double click"); 

     //Change Icon 
     chrome.browserAction.setIcon({ 
      "path": "double.png" 
     }, function() { 
      console.log("Changed Icon for Double Click"); 
     }); 

     //Clear all Clicks 
     alreadyClicked = false; 
     return; 
    } 

    //Set Click to true 
    alreadyClicked = true; 

    //Add a timer to detect next click to a sample of 250 
    timer = setTimeout(function() { 
     //No more clicks so, this is a single click 
     console.log("Single click"); 

     //Chane Icon 
     chrome.browserAction.setIcon({ 
      "path": "single.gif" 
     }, function() { 
      console.log("Changed Icon for Single Click"); 
     }); 

     //Clear all timers 
     clearTimeout(timer); 

     //Ignore clicks 
     alreadyClicked = false; 
    }, 250); 
}); 

浏览器操作\页面操作图标可以高达19次倾斜（与设备无关的像素）。较大的图标会调整大小以适合这些小图像，理想情况下，您无法使用scroll click或scroll on。

让我知道如果你需要更多的信息

Answer 2

使用苏达答案我能够适应的代码，写我的答案，它看起来像这样：

var OnDoubleClickListener = function(config){ 
    // Max time between click events occurrence; 
    var CONTROL_TIME = 250; 

    //Set click to false at beginning 
    var alreadyClicked = false; 
    var timer; 

    if(config && config.onDoubleClick instanceof Function) 
    return function(tab) { 

     //Check for previous click 
     if (alreadyClicked) { 
      //Yes, Previous Click Detected 

      //Clear timer already set in earlier Click 
      clearTimeout(timer); 

      //Clear all Clicks 
      alreadyClicked = false; 


      return config.onDoubleClick.apply(config.onDoubleClick,[tab]); 
     } 

     //Set Click to true 
     alreadyClicked = true; 

     //Add a timer to detect next click to a sample of 250 
     timer = setTimeout(function() { 
      //Clear all timers 
      clearTimeout(timer); 
      //Ignore clicks 
      alreadyClicked = false; 
     }, CONTROL_TIME); 
    }; 
    throw new Error("[InvalidArgumentException]"); 
}; 

，然后一样简单：

//Add Default Listener provided by chrome.api.* 
chrome.browserAction.onClicked.addListener(new OnDoubleClickListener({ 
    onDoubleClick : function(tab) { 
     alert("Double Clicked!!!"); 
    } 
}));