Chrome扩展程序:打开Jquery Ui对话框

时间:2012-09-27 07:55:37

标签: jquery html jquery-ui xhtml google-chrome-extension

我对chrome扩展开发很新。我从谷歌的教程和this question的一些帮助中得到了基本的想法 这是我到目前为止所做的事情

background.html

    <html>
    <head>
        <script>
            chrome.browserAction.onClicked.addListener(function(tab) {
                chrome.tabs.executeScript(null, 
                {file:"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/ui-lightness/jquery-ui.css", 
                    runAt:"document_start"}, 
                function() { alert('Added css'); });
                chrome.tabs.executeScript(null, 
                {file:"http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js", 
                    runAt:"document_start"}, 
                function () {
                    alert("loaded js");
                    chrome.tabs.executeScript(null, 
                    {file:"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"}, 
                    function () {
                        alert("loaded js2");
                        chrome.tabs.executeScript(null, {file:"popup.js"}, function() {alert("did it pop up yet?");});
                    });
                });
            });


        </script>
    </head>
</html>

Manifest.json文件

{
"name": "demo",
"version": "2.0",
"description": "Jquery Dialog in Chrome",
"browser_action": {
"default_icon": "favicon.ico",
"default_title": "Dialog Box"
},
"background_page": "background.html",
"content_scripts": [
    {
      "matches": ["http://*/*","http://jquery.com/*"],
      "js": ["jquery.js","popup.js"]
    }
  ],
"permissions": [
 "tabs","http://localhost/","http://*/*"
]
}

popup.js文件,我的ui对话框是

$(function() {
    alert('in popup');
var NewDialog = $('<div id="MenuDialog"><p>This is your dialog content, which can be multiline and dynamic.</p></div>');
NewDialog.dialog({
modal: true,
title: "title",
show: 'clip',
hide: 'clip',
buttons: [
    {text: "Submit", click: function() {doSomething()}},
    {text: "Cancel", click: function() {$(this).dialog("close")}}
]
});
NewDialog.dialog("open");
});

我从background.html收到警报但没有收到来自popup.js的警报,jquery ui也没有出现Dialog。我试着调试它

我打开了gmail并点击了扩展控制台显示4个错误&gt;

Error during tabs.executeScript: Cannot access contents of url "https://mail.google.com/mail/u/0/?shva=1#inbox". Extension manifest must request permission to access this host.

1 个答案:

答案 0 :(得分:3)

我认为错误信息非常清楚。您没有mail.google.com on https协议的权限 添加https://mail.google.com/*或更广泛的访问*://*.google.com/*到您的权限。