私のsmol menubarプロジェクトでは、Electron独自のwebviewタグを使って、チャット用のサブブラウザウィンドウのリストを動的に生成している。ここ数ヶ月、この中でSSOのポップアップがまったく動作しないという問題に悩まされてきた。おそらくElectronがデフォルトでポップアップをブロックしているせいだろう。

Electronのwebviewにはallowpopupsという属性があり、webviewを静的に作る場合はこれでポップアップを許可できるのだが、動的に追加するとうまく機能しない。

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

こちらにも記述しているのだが：

import { ProviderInterface } from 'lib/types';

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

しかし、これだとTypeError: this._windowOpenHandler is not a functionというエラーが発生してしまう。

安直にsetWindowOpenHandlerを使ってみても、うまくいかないようだった。

30分ほど検索した結果、こちらのStack Overflowの回答を見つけた。他の人の参考になればと思い、ここにメモしておく。

解決策は、メインプロセス内で次のように設定することだ：

    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はこちら： https://github.com/smol-ai/menubar/pull/116/commits/89585ee94f27760e220efee5dc03e5480b8ca078