Chrome 扩展：在消息事件触发时从内容脚本打开 jquery UI 对话框

Question

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

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

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

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
}

Answer 1

在清单中，您设置了两次 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 中指定。