javascript - 在 Chrome 扩展中注入(inject) Jquery 对话框

Question

我只是开发 chrome 扩展的新手，也是 javascript 的新手。我想在用户单击 chrome 扩展上的按钮时显示 Jquery 对话框。我已经寻找了将近一周，但没有成功。

更新: 我目前正在研究这个。然而似乎没有任何作用。我正在做的事情有什么问题吗？

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

});

Answer 1

如果您打开 Chrome 开发者控制台，您将看到问题所在:

未捕获类型错误:对象 [object Object] 没有方法“对话框”

这只是因为 dialog 方法不是 jQuery 的一部分，it's part of jQuery UI 。您必须下载 jquery-ui.js 脚本，并将其与其他两个脚本一起注入(inject)。
请注意，为了使 UI 正常工作，您还需要注入(inject) jQuery-UI CSS。

顺便说一句，由于您在 list 中声明了内容脚本，因此它将被注入(inject)到 url 与您的模式匹配的所有页面上(此处为 http://*/* 或 https://*/*)。因此，以编程方式将其注入(inject)后台页面是没有用的:实际上，您将脚本注入(inject)两次。