CODEWITHSUNDEEP
jqueryjquery-uigoogle-chrome-extension
Danny
Danny

Reputation: 9

chrome extensions with jqueryui error for dialog box

I seem to be getting the error:

Error in event handler for contextMenus: TypeError: undefined is not a function at context_menu_onClick (sample.js line 21)

My manifest.json file is 

{
  "name": "Wikipedia",
  "description": "Just testing",
  "version": "0.1",
  "manifest_version": 2,
  "permissions": ["contextMenus", "https://*/", "<all_urls>"],
  "background": {
    "scripts": ["sample.js","jquery.min.js","jqueryui/jquery-ui.min.js"]
  },
   "content_scripts": [
    {
      "matches": ["http://*/*"],
      "css": ["jqueryui/jquery-ui.min.css"],
      "run_at": "document_end",
      "all_frames": true
    }],
  "content_security_policy": "script-src 'self' https://en.wikipedia.org; object-src 'self'"
}

I think that everything is fine on this front. Here is an excerpt of my sample.js file and the error location: 

function context_menu_onClick(info, tab) {
alert('This is a dialog box using jqueryui');
var NewDialog = $('<div id="MenuDialog"><p>This is your dialog content, which can be multiline and dynamic.</p></div>');
NewDialog.dialog({ //<---- ERROR HERE
modal: true,
title: "title",
show: 'clip',
hide: 'clip',
buttons: [
    {text: "Submit", click: function() {doSomething()}},
    {text: "Cancel", click: function() {$(this).dialog("close")}}
]
});

My mission is that when context_menu_onClick happens that a user is prompted with a jqueryUI dialog box... What am I doing wrong?

Upvotes: 0

Views: 394

Answers (1)

Marco Bonelli
Marco Bonelli

Reputation: 69306

The problem is in your manifest.json file, more precisely in your "background" field: you are declaring the sample.js script before the jquery-ui.min.js script. This will result in an error if you try to create some UI parts using jQuery, because your script runs before jQuery gets initialized.

To solve this, just reorder the scripts in your background:

"background": {
    "scripts": [
        "jquery.min.js",
        "jqueryui/jquery-ui.min.js",
        "sample.js"
    ]
}

Upvotes: 1

Related Questions