Inject Jquery dialog in Chrome Extension

Question

I'm just new in developing chrome extensions and just a newbie in javascript. I want to display a Jquery dialog when the user clicks a button on my chrome extension. I've been searching for almost a week and with no luck.

Update: I'm Currently working on this one. However nothing seems to work. What's wrong with what I'm doing?

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

});

Whenever you write js code in a html file, the script tag should be the last descendant of. — Mozak, Oct 24 '13 at 04:09
Check this page of the documentation: http://developer.chrome.com/extensions/contentSecurityPolicy.html Inline JavaScript is not run. See also this SO answer: http://stackoverflow.com/questions/17601615/the-chrome-extension-popup-is-not-working-click-events-are-not-handled — Timothée Boucher, Oct 24 '13 at 04:26
I've removed the html to avoid confusion. I've updated my post. Kindly help me out. — kuletzxc, Oct 24 '13 at 05:12

score 0 · Answer 1 · answered Oct 24 '13 at 08:50

If you open the Chrome developer console, you'll see what your problem is:

Uncaught TypeError: Object [object Object] has no method 'dialog'

That's simply because the dialog method is not part of jQuery, it's part of jQuery UI. You'll have to download the jquery-ui.js script, and inject it with the two other scripts.
Note that for the UI to work properly, you'll also need to inject the jQuery-UI CSS.

On a side note, since you declare your content script in your manifest, it will be injected on all pages whose url matches your pattern (here, http://*/* or https://*/*). It's therefore useless to inject it programmatically in your background page: in effect, you're injecting your script twice.

Inject Jquery dialog in Chrome Extension

1 Answers1