将jQuery与Google Chrome应用程序一起使用而非Chrome扩展程序

问题描述 投票:4回答:1

我需要一些帮助,包括jQuery lib到谷歌Chrome应用程序..我找到一些谷歌扩展的帮助..但我没有找到任何谷歌铬应用程序。我认为它必须通过manifest.json文件完成...但我很难让它工作......

my main.js file
chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('index.html', {
    bounds: {
      width: 1200,
      height: 800
    }
  });
});

我的manifest.json文件

    {
      "manifest_version": 2,
      "name": "eLiteLAB",
      "version": "1",
      "app": {
        "background": {
          "scripts": ["main.js"]
        }
      },
      "content_scripts": [
        {
          "css": ["css/jquery-ui-1.10.0.custom.css","css/index.css"],
          "js": ["./js/jquery-1.9.0.js","js/jquery-ui-1.10.0.custom.min.js","js/mainApp.js"]
        }
      ]
    }

我的索引文件

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>elite Labs</title>
<link href="css/index.css"  rel="stylesheet" type="text/css">
<link href="css/jquery-ui-1.10.0.custom.css" rel="stylesheet" type="text/css">
<script language="JavaScript" src="js/jquery-1.9.0.js" type="text/javascript"></script>
<script language="JavaScript" src="js/jquery-ui-1.10.0.custom.min.js" type="text/javascript"></script>
  <script type="text/javascript">
        $(document).ready(function(e) {
            $('#uoperatorselect').hide();
            $('#login').button().click(function(e) {
               $.post('../scripts/login/controller.php',$('#loginform').serialize(),function(w){
                    if(w=='Fail'){
                        alert('Login Failed, Please contact your administrator @ 9848622259');
                    }else{
                        if(w=='Admin'){
                            $('#uloginscreen').hide();
                            $('#uoperatorselect').show("slide", { direction: "right" }, 1000);
                        }
                        else{
                            window.location.href = w;   
                        }
                    }
                });
            });
            $('#back').button().click(function(e){
                $.post('../scripts/login/controller.php',{lAction : 'Logout'}, function(e){
                    $('#uoperatorselect').hide();
                    $('#uloginscreen').show("slide", { direction: "left" }, 1000);
                });
            });
            $('#go').button().click(function(a){
                var cnt = $('input:checked').length;
                if(cnt == 1){
                    if($('.udiv1 > input:checkbox:checked').attr('redir') == 'N'){
                        alert('Redirection not setup for this option');
                    }else{
                        window.location.href = $('.udiv1 > input:checkbox:checked').attr('redir');
                    }
                }
                if((cnt > 1) || (cnt == 0)){
                    alert('You have to select one and only one option');
                    return false;
                }
            });
         });
</script>
</head>

<body>
<div class="wrapper">
    <div class="container" class=" ui-corner-all">
        <div id="uholder" class=" ui-corner-all">
            <div id="uloginscreen" class=" ui-corner-all">
                    <div class=" ui-corner-all">
                        <img id="elimg" src="images/elitelab.jpg" width="324" height="82" />
                        <form id="loginform" enctype="multipart/form-data" action="../scripts/login/controller.php" method="post">
                            <fieldset>
                                <legend>User Credentials</legend>
                                <input type="hidden" name="lAction" value="Login"/>
                                <label for="userid" class="ulabel">Userid</label>
                                <input type="text" name="userid" id="usrid" class="uinput ui-corner-all"  />
                                <label for="password" class="ulabel">Password</label>
                                <input type="password" name="password" id="pwd" class="uinput ui-corner-all" />
                                <a href="#" class="elButton" id="login">LogIn</a>
                            </fieldset>
                        </form>
                    </div>
            </div>
            <div id="uoperatorselect">
                    <div class=" ui-corner-all">
                        <img id="elimg" src="images/elitelab.jpg" width="324" height="82" />
                        <form id="redirectform" enctype="multipart/form-data" action="../scripts/login/controller.php" method="post">
                            <fieldset>
                                <legend>Admin Selection</legend>
                                <input type="hidden" name="lAction" value="Login" />
                                <div class="udiv1">
                                    <input type="checkbox" name="operatorscreen" class="ucheckboxes" redir='../../users/operator/' />
                                    <label for="operatorscreen" class="ucheckboxeslbls">Login as Operator</label>
                                </div>
                                <div class="udiv1">
                                    <input type="checkbox" name="operatorscreen1" class="ucheckboxes" redir='../../users/dealer/' />
                                    <label for="operatorscreen1" class="ucheckboxeslbls">Login as Dealer</label>
                                </div>
                                <div class="udiv1">
                                    <input type="checkbox" name="operatorscreen2" class="ucheckboxes" redir='../../users/partner/' />
                                    <label for="operatorscreen2" class="ucheckboxeslbls">Login as Partner</label>
                                </div>
                                <div id="uoptiondiv">
                                    <a href="#" class="elButton" id="back">Back</a>
                                    <a href="#" class="elButton" id="go">Go</a>
                               </div>
                            </fieldset>
                        </form>
                    </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

如果你注意到我有一些jquery代码而且没有执行...

jquery json google-chrome manifest
1个回答
0
投票

从您的代码中很难说(当然), 但显然你有不同的路径为jquery-1.9.0.js和你的mainApp.js :-)

我在谈论manifest.json中的一个点:

"js": [
   "./js/jquery-1.9.0.js",
   "js/jquery-ui-1.10.0.custom.min.js",
   "js/mainApp.js"
]
© www.soinside.com 2019 - 2024. All rights reserved.