<webview>タグの基本

Electron内ではwebviewタグが用意してあり、いわゆるアプリ内ブラウザのような挙動となる。メインプロセスからコントロールする際には、window.webContentsを参照する。

let mainWindow: BrowserWindow | null = null;

if (mainWindow) {
  mainWindow.webContents.on('found-in-page', (event, result) => {
    if (result.finalUpdate) {
      mainWindow.webContents.stopFindInPage('keepSelection');
    }
  });

  mainWindow.webContents.once('dom-ready', () => {
    mainWindow.webContents.executeJavaScript(`
      console.log("This loads no problem!");
    `);
  });
}

ハンドル可能なイベント一覧は**こちら** に記載

URL遷移時に処理を行う

実装で一番多かったのが、新しいサイトを開いたとき、またはwebview内でページ遷移が行われた時に、それをブロックしたり、ユーザーエージェントを偽装(変更)したりする処理。

同様にwebContentsに対して did-start-navigation を指定する。

contentsモジュールのAPIは以下に記載されている。

https://www.electronjs.org/docs/latest/api/web-frame

以下はGoogleのアカウント選択画面でElectronがセキュリティエラーになったので、userAgentを変更して再試行する処理。

contents.on('did-start-navigation', (newEvent, url, isInPlace) => {
		// ズーム率のリセット    
		contents.setZoomFactor(1);
		
    if (url.indexOf('deniedsigninrejected') > -1) {
			contents.executeJavaScript("alert('ログインに失敗しました。再度こちらの画面からお試しください');")

			// Googleのアカウント選択時にエラーが出たらuserAgentを変更する
      contents.loadURL('<https://accounts.google.com/AccountChooser>', {
        userAgent: 'Chrome',
      });
    }
  });

「新しいウィンドウで開いた時」に処理を行う

webview内のリンクなどを開くと、基本的にはwebview内でページが切り替わる。

以下のようにallowpopups属性を指定することで、target=”_blank”のアンカーリンクについては、パソコンのデフォルトブラウザで開くように変更される。