To execute a function on the button click in chrome extension - google-chrome

Question

In the above screenshot you will see a panel and there are three buttons namely hide, close and clear.
I want to perform a particular action on click of those buttons.
Can you please suggest me some approach to achieve it?
Actually the panel created below is nothing but a div container which I have appended to the body of the current webpage.
So I had tried with one approach to inject my own script in that particular webpage and perform a particular action on those button clicks.
But that didn't work for me.
Can you please suggest me some other approach?
This is my manifest file :-
{
"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://*/*",
]
}
And my content.js file is as follows:
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");