Geek Answers Handbook

Chrome extension: opening jQuery user interface dialog from content - script as message event occurs

I am trying to open a jquery dialog from my chrome extension. There are several posts about this, not all of them are related to my needs.

I found this one that claims to have working code. I tried to use this method in my extension without success.

In my extension on the background, I send 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 of the script I put the code that I copied almost as it is (Sorry for that, but just for the sake of the nail radius I wanted to get as close to the original as possible to find out that I was 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 a warning appears, so I know that the message has appeared, but the dialog does not open.

Can you please suggest what is wrong 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 }
+4
source share
1 answer

In the manifest, you set 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 never load for your script content.

This 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"]

Old problems:

  • This code uses the massage variable, which is not defined anywhere. You should see errors in the console that indicate this and possibly other problems.

  • Since you did not specify your manifest, make sure that jQuery and jQuery-UI are loaded into the extension folder and listed in manifest.json .

+3
source

More articles:


All Articles