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://*/*" ] 
} ]
}

background.html

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

content.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开发者控制台，则会看到问题所在：

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

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

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

在Chrome扩展中注入Jquery对话框

1 个答案: