Question

我的智慧结束了。我正在开发我的第一个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执行等。

Answer 1

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

您的清单指定了背景页
后台页面正确侦听事件，并创建主应用程序窗口
应用程序窗口（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

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

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

1 个答案: