javascript - Chrome 拡張機能に Jquery ダイアログを挿入する

Question

私はChrome拡張機能の開発が初めてで、JavaScriptの初心者です。ユーザーが Chrome 拡張機能のボタンをクリックしたときに Jquery ダイアログを表示したいと考えています。私はほぼ一週間探していましたが、運がありませんでした。

更新： 私は現在これに取り組んでいます。しかし、何も機能していないようです。私がやっていることの何が問題になっていますか？

マニフェスト.json

{
"name": "name",
"version": "1.0",
"description": "desc",
"manifest_version":         2,
"browser_action": { "default_icon": "four.png" },
"permissions": [ "tabs", "http://*/*" ],
"background": {
    "page": "background.html"
  },
"content_scripts": [ {
    "all_frames": true,
    "js": [ "jquery.js", "content.js" ],
    "matches": [ "http://*/*", "https://*/*" ] 
} ]
}

background.html

chrome.tabs.executeScript(null, {file:"jquery.js"}, function() {
chrome.tabs.executeScript(null, {file:"content.js"});
});

content.js

var layerNode= document.createElement('div');
layerNode.setAttribute('id','dialog');
layerNode.setAttribute('title','Basic dialog');
var pNode= document.createElement('p');
    console.log("msg var: "+massage); 
    pNode.innerHTML  = massage;


layerNode.appendChild(pNode);
document.body.appendChild(layerNode);

$("#dialog").dialog({
    autoOpen: true, 
    draggable: true,
    resizable: true,
    height: 'auto',
    width: 500,
    zIndex:3999,
    modal: false,
    open: function(event, ui) {
        $(event.target).parent().css('position','fixed');
        $(event.target).parent().css('top', '5px');
        $(event.target).parent().css('left', '10px');
    }

});