title: Chrome-extension: opening a jquery UI dialog box from content-script as message event fires
body: <p>I'm trying to open a jquery dialog box from my chrome-extension. There are several posts about that, not all of them are relevant to my needs.</p>
  
  <p>I've found <a href="https://stackoverflow.com/questions/13740912/chrome-ext-content-script-that-creates-jquery-dialog-need-to-ignore-iframes">this one</a> which claims to have a working code. I've tried to use that method in my extension with no success. </p>
  
  <p>In my extension on the background I'm sending over a message to the content script as follows:</p>
  
  <pre><code>chrome.tabs.query({active: true, currentWindow: true}, function(tabs){ 
    chrome.tabs.sendMessage(tabs[0].id, {action: "open_dialog_box"}, function(response)     {
    });
  });
  </code></pre>
  
  <p>and in the content script I've put the code which I've copied almost as is (Sorry for that, but just for the nailing down sake I wanted to be close to the original as much as possible to find out what am I messing up though):</p>
  
  <pre><code>chrome.extension.onMessage.addListener(function(msg, sender, sendResponse){
  
    if (msg.action == 'open_dialog_box') {
      alert("Message recieved!");
  
  
    var layerNode= document.createElement('div');
    layerNode.setAttribute('id','dialog');
    layerNode.setAttribute('title','Basic dialog');
    var pNode= document.createElement('p');
    console.log("pNode created"); 
    pNode.innerHTML  = "something";
  
    layerNode.appendChild(pNode);
    document.body.appendChild(layerNode);
  
    jQuery("#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');
    }
  
  }); 
  </code></pre>
  
  <p>Now, the alert pops up, so I know that the message arrived, but the dialog isn't opening.</p>
  
  <p>Can you suggest please what is wrong about here?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>As per Brock's request, here is my manifest:</p>
  
  <pre><code>{
  "name": "Dialog test",
  "version": "1.1",
  
  "background": 
  { 
      "scripts": ["contextMenus.js"]
  },
  
  "permissions": ["tabs", "&lt;all_urls&gt;", "contextMenus"],
  
  "content_scripts" : [
      {
          "matches" : [ "http://*/*" ],
          "js": ["jquery-1.8.3.js", "jquery-ui.js"],
          "css": [ "jquery-ui.css" ],
          "js": ["openDialog.js"]
      }
  ],
  
  "manifest_version": 2
  }
  </code></pre>