CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-app
Let Me Tink About It
Let Me Tink About It

Reputation: 16112

How to allow popup windows and redirects using <webview> in Google Chrome Apps?

I have a Google Chrome App that uses a <webview> component.

Inside the <webview>, at the URL of the guest, user authentication is handled using a popup and redirect managed by OAuth client in response to a login button onclick event.

My problem is that when I click my login button, nothing happens. i.e., No popup. No redirect. No login.

How do I fix this to allow the popup and redirect needed by my OAuth implementation?

window.html 
<!DOCTYPE html>
<html>
    <head>
        ...
    </head>
    <body>
        <webview id="webview" src="https://mywebapp.com"></webview>
    </body>
</html>
background.js 
chrome.app.runtime.onLaunched.addListener(function() {
    runApp();
});

function runApp() {
    chrome.app.window.create('window.html', {
        state: 'fullscreen'
    });
}

var webview = null;
function isSafeUrl(url) {
    // This is Hello world test for now; permissions code will go here later
    return true;
}

function onPermissionRequest(e) {
    e.request.allow();
    // This is Hello world test for now; permissions code will go here later
}

function onDomReady() {
    webview = document.getElementById('webview');
    webview.addEventListener('permissionrequest', onPermissionRequest);
}

document.addEventListener('DOMContentLoaded', onDomReady);

Upvotes: 2

Views: 1890

Answers (1)

Xan
Xan

Reputation: 77521

Your script needs to be split into two parts.

The background script runs in a different document than window.html, the Event page. Your app should look like this:

enter image description here

// This should be split off to app.js
var webview = null;
function isSafeUrl(url) {
    // This is Hello world test for now; permissions code will go here later
    return true;
}

function onPermissionRequest(e) {
    e.request.allow();
    // This is Hello world test for now; permissions code will go here later
}

function onDomReady() {
    webview = document.getElementById('webview');
    webview.addEventListener('permissionrequest', onPermissionRequest);
}

document.addEventListener('DOMContentLoaded', onDomReady);

Then include a <script> tag for the new script to window.html.

Since there is no such concept as "webview window" in a Chrome App, it's going to be more complicated than allowing everything.

You need to catch the newwindow event and process it by creating a new <webview>, possibly in another window. It's not very easy, but there may be implementations already if you look for them.

For the authentication to actually proceed, you need to make sure that the two webviews share a partition.

..as you can see, it's quite a bit more complicated than iframes.

However! I do believe you're going down an incorrect path altogether. If your task is to get an OAuth token, you should consider chrome.identity API, specifically launchWebAuthFlow.

Upvotes: 2

Related Questions