How to allow popups in dynamically created webviews in Electron.js

My smol menubar project utilizes Electron’s special webview tag to dynamically generate a list of sub browser windows for chat. For the last couple months I’ve had an issue with the SSO popups in this, namely that they just don’t work at all, presumably because Electron blocks popups for you by default.

Electron’s webview has an allowpopups tag that allows this if you make the webview statically, but if you add it dynamically this fails to work.

const webview = document.createElement('webview'); = provider.webviewId;
webview.src = provider.url;
webview.setAttribute('allowpopups', 'true'); // adding dynamically...

I also have it here:

import { ProviderInterface } from 'lib/types';

export default function Pane({ provider }: { provider: ProviderInterface }) {
	return (
		<div key={provider.paneId()} className="page darwin">
				// @ts-ignore - we need this to be here or it will not show up in electron and then the allowpopups doesnt work
					provider.getUserAgent() ? provider.getUserAgent() : undefined

but produces a TypeError: this._windowOpenHandler is not a function error.


naively using setWindowOpenHandler does not seem to work.

After about half an hour of searching I found this stackoverflow answer. Commenting here for others to find.

The solution is that you have to set it inside of your main process:

	app.on('web-contents-created', (e, wc) => {
		// wc: webContents of <webview> is now under control
		wc.setWindowOpenHandler((handler) => {
				return {action : "allow"}; // deny or allow

PR Here:

Leave a reaction if you liked this post! 🧡
Loading comments...

Subscribe to the newsletter

Join >10,000 subscribers getting occasional updates on new posts and projects!

I also write an AI newsletter and a DevRel/DevTools newsletter.

Latest Posts

Search and see all content