Google chrome 要在按钮上执行功能，请单击chrome extension

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

实际上，下面创建的面板只是一个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");

var数据_div=$（“”）；
数据分区css（“位置”、“固定”）；
数据分区css（“底部”、“0px”）；
数据分区css（“高度”，“300px”）；
数据分区css（“显示”、“块”）；
数据分区css（“宽度”、“100%”）；
数据分区css（“溢出”、“滚动”）；
数据分类css（“z指数”、“1004”）；
数据分区css（“背景色”）；
$（“正文”）。追加（数据部分）；
data_div.html（“这里有一个大数据集”）；

向我们展示您的manifest.json和脚本文件为什么不自己制作按钮？请提供更多与按钮处理相关的代码，并准确描述哪些不起作用。你好，斯坦，按钮没有太多代码。我只是将它附加到dom中，没有其他内容。我想知道一些方法。如果我点击上面的任何一个按钮，那么应该执行一个特定的功能。但是我不知道应该把这个函数放在哪里，因为内容脚本在页面加载完成后只执行一次，所以它不会有用，而且后台脚本也没有多大用处…………bcoz它将无法保存当前页面的dom。Plz建议我一些方法。是的，内容脚本只执行一次，但这是一个将单击事件处理程序绑定到按钮的权限，就像您通常使用jQuery那样：

$（“#buttonid”）。单击（函数（）{//handle click，视情况而定）