要在按钮上执行功能，请单击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");