jquery - 将 jQuery 与 Google Chrome 应用程序而不是 Chrome 扩展程序一起使用

标签 jquery json google-chrome manifest

我需要一些帮助,将 jQuery lib 包含到 google chrome 应用程序中。我找到了一些针对 google 扩展的帮助。但我没有找到任何针对 google 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-1.9.0.jsmainApp.js 有不同的路径:-)

我说的是 manifest.json 中的一个点:

"js": [
   "./js/jquery-1.9.0.js",
   "js/jquery-ui-1.10.0.custom.min.js",
   "js/mainApp.js"
]

关于jquery - 将 jQuery 与 Google Chrome 应用程序而不是 Chrome 扩展程序一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18222746/

相关文章:

javascript - 如何避免模态对背景内容的影响?

javascript - CSS :contains after Ajax loaded script append

javascript - 我们如何通过 JQuery 创建另一个带有一些选项的选择框

java - 如何在 Spring MVC 中进行休息服务?

php - 如何将 jSON 转换为 XML

javascript - angularjs ui-select-choices 下拉字母顺序取决于给定的输入

javascript - json 按值删除元素

google-chrome - 我们应该在 HTTP/2 中复用多少并发请求

javascript - 使用javascript禁用媒体控制键

javascript - 获取自动填充输入的值 - Jquery