4

我正在尝试从我的 chrome 扩展中打开一个 jquery 对话框。有几篇关于此的帖子,并非所有帖子都与我的需求相关。

我发现这个声称有一个工作代码。我试图在我的扩展中使用该方法但没有成功。

在我的后台扩展中,我向内容脚本发送一条消息,如下所示:

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

并且在内容脚本中,我几乎按原样放置了我复制的代码(对不起,但只是为了确定,我想尽可能地接近原件,以找出我在搞砸什么不过):

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

}); 

现在,警报弹出,所以我知道消息已到达,但对话框没有打开。

你能建议这里有什么问题吗?

编辑:

根据 Brock 的要求,这是我的清单:

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

1 回答 1

3

在清单中,您设置了js两次属性:

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

这会覆盖第一个值,因此永远不会为您的内容脚本加载 jQuery 和 jQuery-UI。

清单的那一部分应该是:

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


老问题:

  1. 该代码使用一个massage未在任何地方定义的变量。您应该会在控制台中看到指出这一点的错误以及可能还有其他问题。

  2. 由于您没有列出清单,请验证 jQuery 和 jQuery-UI 是否已下载到扩展文件夹并在manifest.json.

于 2013-01-09T23:16:49.650 回答