Question

我正在创建一个Chrome打包应用，它有两个页面[暂时]。并通过页面平均实际的.html文件。一个叫做login.html，另一个叫index.html。

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

以下是在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.html中调用的，在login.html中调用]

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

提前致谢！

Answer 1

要完成此操作，您需要添加此项检查是否在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'
            });
        }
    });
});

当然，您可以使用这些更改和命名空间，但我选择将它们排除在外。

Answer 2

MiroRauhala已回答了您的直接问题，但也许您应该重新考虑应用的结构。

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

我认为从长远来看，改变你的结构会带来更简单的应用程序。

如果你选择单独的窗口方法，你需要小心。例如，如果向窗口添加id并指定边界，则仅在第一次显示边界时应用边界。之后它会记住界限。你可以通过创建隐藏，然后移动它，然后显示它来解决这个问题。您可能会遇到其他类似的事情，因为您正在以一种它未设计的方式使用Chrome应用程序平台。

Google Chrome打包应用窗口

2 个答案: