google-chrome - クロム拡張機能でボタンをクリックして機能を実行するには

Question

上のスクリーンショットでは、パネルが表示され、非表示、閉じる、クリアという 3 つのボタンがあります。これらのボタンのクリック時に特定のアクションを実行したい。それを達成するためのいくつかのアプローチを教えてください。

実際、以下で作成されたパネルは、現在の Web ページの本文に追加した div コンテナーに他なりません。そのため、その特定の Web ページに独自のスクリプトを挿入し、それらのボタンのクリックに対して特定のアクションを実行するという 1 つのアプローチを試みました。しかし、それは私にはうまくいきませんでした。

他のアプローチを教えてください。

これは私のマニフェスト ファイルです:-

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