CODEWITHSUNDEEP
javascriptwebviewchromiumelectronnew-window
kodiSPO
kodiSPO

Reputation: 366

Electron: webview doesn't receive callback code from new created window

I've got desktop application that works as simple browser. It has tabs with webviews that show web pages.

Some websites have social sign-in option. And I really need it to be available for my users.

In general browser (e.g. chrome) when you sign in via Facebook, it creates new window with social authorization form. After submitting this form the new window closes and parent window receives callback code, reloads and sign you in.

In my app when you try to do the same, webview that contains the web page, creates new BrowserWindow with the same auth form. At this point everything works fine. When you submit form, the new window closes but nothing happens after. Parent window doesn't receive any callback, the code that should run isn't triggered at all. Or probably it has been received, but not triggered, since if I reload page, it shows that I'm signed in.

According to the electron documentation <webview> runs in a separate process than renderer process. So I think when new window closes, the callback is received by parent BrowserWindow (renderer process) and not runs exactly in webview frame.

While searching through different sources for solution, I found that this problem is also concerned with window.opener, that was not fully supported in the earliest versions of electron. But according to the issue#1865 on github full window.opener support is now available if I open window by window.open method.

To make this work I should prevent webview to open new BrowserWindow and create it by myself.

The following code fails:

// in renderer process
webview.addEventListener('new-window', function(event) {
    event.preventDefault();
    // I also tried 'event.defaultPrevented = true;'
    // or 'return false;'
});

The listener is triggered, but I can't prevent new-window opening.

Someone wrote that new-window can be prevented in main process only.

So I add the following code in my main.js:

// in main process
var electron      = require('electron');
var BrowserWindow = electron.BrowserWindow;

mainWindow = new BrowserWindow({
    "width": 970,
    "height": 500,
    "center": true,
    'title': 'Main window',
    "autoHideMenuBar": true
});

mainWindow.loadURL('file://' + root + '/index.html');

mainWindow.webContents.on('new-window', function(event) {
    console.log(event);
});

This time event 'new-window' is not triggered at all. I think this is because the event works only if renderer process requests to open a new window by window.open for example. But in my case new window is opened by <webview> tag, not by renderer process. So I failed to prevent new-window to open since these are two separate processes.

So I decided just to get new-window after it opens.

// in renderer process
var electron = require("electron");
var remote   = electron.remote;

webview.addEventListener('new-window', function(event) {
    var win      = remote.BrowserWindow.getFocusedWindow();
    var contents = win.webContents;

    win.setIcon(root+"/img/favicon.ico");
    win.setMenuBarVisibility(false);

    contents.on('dom-ready', function() {
        contents.openDevTools();
    })
});

After that I really have no idea what to do next... how to append window.opener and solve my issue

I found many similar issues on github. But all of them are merged to one issue #1865 and there is no clear answer so far.

I know solution exists. Brave developers fixed this. Brave browser also made with electron works correctly the same as general browser does. But I can't find answer while looking through its sources.

They even made tests to check whether window.opener works correctly. But I failed to install Brave from git repository. After 'npm-start' it says 'Error: %1 is not valid Win32 application'. I have Windows 10. (just another reason makes me switch to Linux. Hope to make it soon.)

So, my question is: how to send callback data from new window back to webview that created this window. Thanks in advance.

Upvotes: 2

Views: 2951

Answers (1)

FF_Dev
FF_Dev

Reputation: 578

First, to handles new-window popups yourself, you have to disable allowpopups (i.e. remove allowpopups attribute from the webview) This way the new-window event will be triggered but no popup will be opened until you explicitelly code it.

For the window.opener feature which is required for some social or sso login, electron does not have enough support of it. See issue 1865

The Brave team have implemented it in a restricted way in their fork of Electron. See issue 4175. You may try to either:

  • Use the fork of electron from Brave (not sure it will fit your needs as they have made some major changes)
  • Make a PR to electron to integrate the support of window.opener from the fork.
  • Make your own polyfill for the methods you need by injecting a script that implements missing window.opener methods. You can use window.opener.send to communicate with renderer process)

Upvotes: 1

Related Questions