Chrome app displays blank window and won't do anything

问题

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:

and get:

i click on inspect index.html and get:

i am able to open index.html directly in browser and verify it works fine as a stand alone html page - the js executes etc.

回答1:

As far as I can see, the code you have shown is correct.

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.js waits for the window to load, and logs "inside main" to the *foreground page's * console.

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".

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");
    });

That callback should execute before window.onload is fired in the foreground window.

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.

来源：https://stackoverflow.com/questions/24771358/chrome-app-displays-blank-window-and-wont-do-anything

标签

google-chrome-app