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

Question

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

例如，我希望图标在单击、双击、滚动单击和在 ¹ 上滚动时表现不同

如何将事件监听器附加到扩展程序图标？我不介意图标必须位于地址栏或扩展栏中。

^{1。我实际上专注于一个事件，“正在滚动”——因为这是唯一一个可以在没有焦点窗口的情况下触发的事件。但我认为更笼统的问题更好。}

Answer 1

可以跟踪单击和双击

a) Browser Action

b) Page Action使用 Chrome 扩展程序。

默认情况下，chrome 有一个针对 Browser 的单击鼠标事件监听器。和 Page Action ，通过扩展它你也可以捕获双击事件。

浏览器操作的单击和双击事件演示

此示例代码 changes browser action icon对于单击和双击，同样可以扩展为page action使用其 Listener和 setter .

ma​​nifest.json

在 list 中注册浏览器操作和后台脚本

{
    "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);
});

Browser action\Page Action 图标的宽度和高度最多可达 19 度(与设备无关的像素)。较大的图标会调整大小以适合这些小图像，理想情况下您不能滚动点击或滚动。

如果您需要更多信息，请告诉我