javascript - Google Chrome 打包应用程序窗口

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.js 中，在 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'
            });
        }
    });
});

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