google-chrome - 要在按钮上执行功能，请单击 chrome 扩展

Question

在上面的屏幕截图中，您将看到一个面板，其中包含三个按钮，即隐藏、关闭和清除。我想在单击这些按钮时执行特定操作。你能建议我一些方法来实现它吗？

实际上，下面创建的面板只不过是一个 div 容器，我已将其附加到当前网页的正文中。因此，我尝试了一种方法，将我自己的脚本注入到该特定网页中，并对这些按钮单击执行特定操作。但这对我不起作用。

你能建议我一些其他的方法吗？

这是我的清单文件：-

    {
        "name": "Demo Extension",
        "version": "1.0.0",
        "manifest_version": 2,
        "browser_action": {
        "default_icon": "icon.png"
    },


    "background": {
    "scripts": ["jquery-1.7.2.js","code.js"]
    },

    "content_scripts": [
        {
            "matches": ["*://*/*"],
            "js": ["jquery-1.7.2.js","content.js"],
            "css": ["panel.css"],
            "run_at": "document_end"
        }
    ],

        "permissions": [
        "webRequest",
        "tabs",
        "http://*/*",
        "https://*/*",
    ]
}

我的 content.js 文件如下：

var data_div = $("<div class='panel'></div>");

data_div.css("position","fixed");
data_div.css("bottom","0px");
data_div.css("height","300px");
data_div.css("display","block");
data_div.css("width","100%");
data_div.css("overflow","scroll");
data_div.css("z-index","1004");
data_div.css("background-color","#C0C0C0");

$("body").append(data_div);

data_div.html("One big data set here");