对话框中带有jqueryui错误的chrome扩展

时间:2015-02-19 22:09:24

标签: jquery jquery-ui google-chrome-extension

我似乎得到了错误:

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

我的manifest.json文件是

{
  "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'"
}

我认为这方面的一切都很好。以下是我的sample.js文件和错误位置的摘录:

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")}}
]
});

我的任务是当context_menu_onClick发生时,用户会被提示使用jqueryUI对话框...我做错了什么?

1 个答案:

答案 0 :(得分:1)

问题出在您的manifest.json文件中,更准确地说是在"background"字段中:您在sample.js脚本之前声明jquery-ui.min.js脚本。如果您尝试使用jQuery创建一些UI部件,这将导致错误,因为您的脚本在jQuery初始化之前运行。

要解决此问题,只需在后台重新排序脚本:

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