Chrome应用会显示空白窗口并且无法执行任何操作

时间:2014-07-16 02:40:27

标签: google-chrome-app

我的智慧结束了。我正在开发我的第一个Chrome应用程序。

的manifest.json:

{
  "name": "My App",
  "description": "My App",
  "version": "0.1",
  "manifest_version": 2,
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "icons": { "16": "calculator-16.png", "128": "calculator-128.png" }
}

background.js:

chrome.app.runtime.onLaunched.addListener(function () {
    // Center window on screen.
    var screenWidth = screen.availWidth;
    var screenHeight = screen.availHeight;
    var width = 1024;
    var height = 768;

    chrome.app.window.create('index.html', {
        id: "myappid",
        bounds: {
            width: width,
            height: height,
            left: Math.round((screenWidth - width) / 2),
            top: Math.round((screenHeight - height) / 2)
        }
    });
});

的index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>My App</title>
    <link rel="stylesheet" href="app.css" type="text/css" />   
    <script type="text/javascript" src="app.js"></script> 
</head>
<body>    
    <h1>Hello World!</h1>
    <div id="main" style="position:relative">
        <div id="board" style="position:absolute"></div>
        <div id="div1" style="position:absolute;left:800px"></div>
    </div>
</body>
</html>

app.js:

window.onload = function () {
    console.log("inside main");
    // rest of the code hidden
};

从扩展程序菜单启动应用程序的结果:

enter image description here

我点击检查背景:
enter image description here

并得到: enter image description here

我点击检查index.html并获取:

enter image description here

我可以直接在浏览器中打开index.html并验证它是否可以作为独立的html页面运行 - js执行等。

1 个答案:

答案 0 :(得分:0)

据我所知,你所展示的代码是正确的。

  • 您的清单指定了背景页
  • 后台页面正确侦听事件,并创建主应用程序窗口
  • 应用程序窗口(index.html)出现在屏幕上,并加载app.js
  • app.js等待加载窗口,并在主要内容中记录&#34;到*前台页面的*控制台。

您的Chrome应用有一个背景页面和一个前台页面,因此它有两个控制台。根据您发布的代码,您所展示的内容正是我期望看到的内容。后台页面的控制台(您首先检查过)是空的,前台页面的控制台(通过右键单击并选择&#34;检查元素&#34;)进行检查,其中包含&#34 ;在主要内部&#34;。

如果您愿意,可以使用回调chrome.app.window.create在后​​台页面的控制台上看到一条消息;像这样的东西:

    console.log("Going to create the window");
    chrome.app.window.create('index.html', {
        id: "myappid",
        bounds: {
            width: width,
            height: height,
            left: Math.round((screenWidth - width) / 2),
            top: Math.round((screenHeight - height) / 2)
        }
    }, function() {
        console.log("Successfully created the window");
    });

该回调应该在前台窗口中触发window.onload之前执行。

现在,前台控制台中没有显示任何错误,但不知道这一点中有哪些JavaScript,如果有的话:

// rest of the code hidden

我不知道应该执行什么,如果有的话。