Javascript Google Chrome打包应用程序窗口

我正在创建一个Chrome打包的应用程序，现在有两个页面。页面是指实际的.html文件。一个名为login.html，另一个名为index.html

现在，与用户相关的所有内容都存储在chrome.storage.local中

chrome.storage.onChanged.addListener(function(changes, namespace) {
    chrome.storage.local.get('login', function (result) {
        if (result.login.status === "loggedIn") {
            chrome.app.window.get('loginWindow').close();
            chrome.app.window.create('index.html', {
                id: 'mainWindow',
                'bounds': {
                    'top':      positions.top,
                    'left':     positions.left,
                    'width':    dimensions.width,
                    'height':   dimensions.height
                },
                minWidth: dimensions.width,
                minHeight: dimensions.height,
                maxWidth: dimensions.width,
                maxHeight: dimensions.height,
                frame: 'none'
            });
        }
    });
});

下面是在chrome.js中启动页面的代码

chrome.app.runtime.onLaunched.addListener(function () {
    var dimensions = getDimensions(screen),
        positions = getPositions(screen);

    chrome.storage.local.get('login', function (result) {
        if(result.login.status === "loggedOut") {
            chrome.app.window.create('login.html', {
                id: 'loginWindow',
                'bounds': {
                    'width':    400,
                    'height':   600
                },
                minWidth: 400,
                minHeight: 600,
                maxWidth: 400,
                maxHeight: 600,
                frame: 'none'
            });
        } else {
            chrome.app.window.create('index.html', {
                id: 'mainWindow',
                'bounds': {
                    'top':      positions.top,
                    'left':     positions.left,
                    'width':    dimensions.width,
                    'height':   dimensions.height
                },
                minWidth: dimensions.width,
                minHeight: dimensions.height,
                maxWidth: dimensions.width,
                maxHeight: dimensions.height,
                frame: 'none'
            });
        }
    });
});

现在因为chrome.storage.local.get login.status==loggedOut，它会弹出带有登录表单的登录页面。那么，当用户输入正确的凭据时，我如何继续。如何关闭登录窗口，然后打开主窗口。上面的代码只是下次打开index.html，不再显示登录名

我已经完成了检查凭证的代码，这很有效，但是我现在想关闭登录表单窗口，打开一个新的index.html，它的边界、最大宽度、最小宽度和高度与您在上面的代码中看到的相同

下面是我要找的：[这现在在login.js中，称为inside login.html]

if(login === success) {
    // close login window and goto mainWindow
} else {
    // Username or password is wrong
}

---

提前谢谢

要做到这一点，您必须添加此选项，以检查chrome.storage.local中是否发生了更改

chrome.storage.onChanged.addListener(function(changes, namespace) {
    chrome.storage.local.get('login', function (result) {
        if (result.login.status === "loggedIn") {
            chrome.app.window.get('loginWindow').close();
            chrome.app.window.create('index.html', {
                id: 'mainWindow',
                'bounds': {
                    'top':      positions.top,
                    'left':     positions.left,
                    'width':    dimensions.width,
                    'height':   dimensions.height
                },
                minWidth: dimensions.width,
                minHeight: dimensions.height,
                maxWidth: dimensions.width,
                maxHeight: dimensions.height,
                frame: 'none'
            });
        }
    });
});

---

当然，您可以使用这些更改和名称空间，但我选择不使用它们。

MiroRauhala已经回答了您的直接问题，但也许您应该重新思考应用程序的结构

Chrome应用程序不像普通网站那样具有导航功能。它们有窗口，每个窗口对应一个不同的html页面。与关闭一个窗口并打开一个具有完全相同边界的新窗口不同，您可以在一个文档中使用不同的div，并根据需要隐藏和显示

我认为从长远来看，改变你的结构将导致一个更简单的应用程序

---

如果你采用单独窗口的方法，你需要小心。例如，如果向窗口添加id并指定边界，则仅在第一次显示时应用边界。之后，它会记住边界。你可以通过创建隐藏的，然后移动，然后显示来绕过它。在使用chrome应用程序平台时，您可能会遇到其他类似的情况。

此窗口开关仅在登录时应用，用户登录后可以在该窗口内执行所有操作（其他内容将由ajax调用）。这仍然是alpha-beta之前的版本，不稳定，所以不要担心，我只是想了解更多的chromesdk，并在其中发挥作用。我以后可能会省去这一点。如果您安装了Spotify，那么您可以看到我正在努力实现的目标。