Chrome应用显示空白窗口，不会执行任何操作 [英] Chrome app displays blank window and won't do anything
问题描述
我精疲力尽.正在开发我的第一个chrome应用程序.
I am at the end of my wits. am developing my first chrome app.
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
};
从扩展程序菜单启动应用程序的结果:
result of launching the app from extensions menu:
我单击检查背景:
i click on inspect background:
并获得:
我单击检查index.html并获得:
i click on inspect index.html and get:
我能够直接在浏览器中打开index.html并确认它可以作为独立的html页面正常工作-js可以执行等操作.
推荐答案
据我所知，您显示的代码是正确的.
As far as I can see, the code you have shown is correct.
- 您的清单指定背景页面
- 后台页面正确侦听事件，并创建应用主窗口
- 应用程序窗口(index.html)出现在屏幕上，并加载
app.js -
app.js等待窗口加载，并将内部main"记录到* foreground页面的*控制台中.
- Your manifest specifies the background page
- The background page correctly listens for the event, and creates the main app window
- The app window (index.html) appears on screen, and loads
app.js app.jswaits for the window to load, and logs "inside main" to the *foreground page's * console.
您的Chrome应用有一个背景页面和一个前景页面，因此它有两个控制台.给定您已发布的代码，您所显示的正是我希望看到的.后台页面的控制台(您首先检查过)为空，而前台页面的控制台(您通过右键单击并选择检查元素"进行检查)包含"inside main".
Your Chrome app has a background page, and a foreground page, and so it has two consoles. What you have shown is exactly what I would expect to see, given the code you've posted. The background page's console (which you inspected first) is empty, and the foreground page's console (which you inspected by right-clicking and selecting "inspect element") contains "inside main".
如果愿意，可以使用chrome.app.window.create的回调将消息打印到后台页面的控制台上.像这样的东西:
If you wanted to, you could see a message printed to the background page's console by using the callback to chrome.app.window.create; something like this:
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之前执行.
That callback should execute before window.onload is fired in the foreground window.
现在，前台控制台中没有显示任何错误，但是却不知道该位中包含什么JavaScript(如果有):
Now, there aren't any errors shown in the foreground console, but without knowing what JavaScript, if any, is in this bit:
// rest of the code hidden
我不知道应该执行什么操作.
I can't tell what, if anything, should be executing.
这篇关于Chrome应用显示空白窗口，不会执行任何操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
