1

我只是开发 chrome 扩展的新手，只是 javascript 的新手。当用户单击我的 chrome 扩展程序上的按钮时，我想显示一个 Jquery 对话框。我一直在寻找将近一个星期，但没有运气。

更新： 我目前正在研究这个。但是似乎没有任何效果。我在做什么有什么问题？

清单.json

{
"name": "name",
"version": "1.0",
"description": "desc",
"manifest_version":         2,
"browser_action": { "default_icon": "four.png" },
"permissions": [ "tabs", "http://*/*" ],
"background": {
    "page": "background.html"
  },
"content_scripts": [ {
    "all_frames": true,
    "js": [ "jquery.js", "content.js" ],
    "matches": [ "http://*/*", "https://*/*" ] 
} ]
}

背景.html

chrome.tabs.executeScript(null, {file:"jquery.js"}, function() {
chrome.tabs.executeScript(null, {file:"content.js"});
});

内容.js

var layerNode= document.createElement('div');
layerNode.setAttribute('id','dialog');
layerNode.setAttribute('title','Basic dialog');
var pNode= document.createElement('p');
    console.log("msg var: "+massage); 
    pNode.innerHTML  = massage;


layerNode.appendChild(pNode);
document.body.appendChild(layerNode);

$("#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');
    }

});
4

1 回答 1

0

如果你打开 Chrome 开发者控制台，你会看到你的问题是什么：

Uncaught TypeError: Object [object Object] has no method 'dialog'

这仅仅是因为该dialog方法不是 jQuery的一部分，它是 jQuery UI 的一部分。您必须下载jquery-ui.js脚本，并将其与其他两个脚本一起注入。
请注意，要使 UI 正常工作，您还需要注入 jQuery-UI CSS。

附带说明一下，由于您在清单中声明了内容脚本，因此它将被注入到其 url 与您的模式匹配的所有页面上（此处，http://*/*或https://*/*）。因此，在后台页面中以编程方式注入它是没有用的：实际上，您将脚本注入了两次。

于 2013-10-24T08:50:14.207 回答