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

旧问题：

该代码使用未在任何地方定义的变量massage。您应该在控制台中看到指出该错误以及可能还有其他问题的错误。
由于您没有列出清单，请确认jQuery和jQuery-UI已下载到扩展文件夹并在manifest.json中指定。

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

1 个答案: