CODEWITHSUNDEEP
jqueryjquery-uigoogle-chrome-extensioncontent-script
Subway
Subway

Reputation: 5716

Chrome-extension: opening a jquery UI dialog box from content-script as message event fires

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.

I've found this one which claims to have a working code. I've tried to use that method in my extension with no success.

In my extension on the background I'm sending over a message to the content script as follows:

chrome.tabs.query({active: true, currentWindow: true}, function(tabs){ 
  chrome.tabs.sendMessage(tabs[0].id, {action: "open_dialog_box"}, function(response)     {
  });
});

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):

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');
  }

});

Now, the alert pops up, so I know that the message arrived, but the dialog isn't opening.

Can you suggest please what is wrong about here?

EDIT:

As per Brock's request, here is my manifest:

{
"name": "Dialog test",
"version": "1.1",

"background": 
{ 
    "scripts": ["contextMenus.js"]
},

"permissions": ["tabs", "<all_urls>", "contextMenus"],

"content_scripts" : [
    {
        "matches" : [ "http://*/*" ],
        "js": ["jquery-1.8.3.js", "jquery-ui.js"],
        "css": [ "jquery-ui.css" ],
        "js": ["openDialog.js"]
    }
],

"manifest_version": 2
}

Upvotes: 4

Views: 3492

Answers (1)

Brock Adams
Brock Adams

Reputation: 93473

In the manifest, you're setting the js property twice:

"js": ["jquery-1.8.3.js", "jquery-ui.js"],
"css": [ "jquery-ui.css" ],
"js": ["openDialog.js"]

This overwrites the first value, so jQuery and jQuery-UI are never loaded for your content script.

That section of the manifest should be:

"js":  ["jquery-1.8.3.js", "jquery-ui-1.9.2.custom.min.js", "openDialog.js"],
"css": ["jquery-ui-1.9.2.custom.css"]

Older problems:

  1. That code uses a variable, massage that is not defined anywhere. You should see errors in the console that point that out and possibly other problems as well.

  2. Since you didn't list your manifest, verify that jQuery and jQuery-UI are downloaded to the extension folder and specified in manifest.json.

Upvotes: 3

Related Questions