ElectronのwebContents（webview）についてメモ

<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”のアンカーリンクについては、パソコンのデフォルトブラウザで開くように変更される。

<webview src="https://google.com" allowpopups="" />

また、この場合にブラウザウィンドウでリンクを開こうとした際に、URLによってはブロックするようなことがある。

その場合は以下のように記述する。

contents.setWindowOpenHandler(({ url }) => {
    if (
      url.startsWith('https://accounts.google.com/AccountChooser')
    ) {
      contents.loadURL(url); // webview内で読み込む
      return { action: 'deny' }; // denyが返されると、デフォルトブラウザで開く挙動が無効化される
    }

    shell.openExternal(url); // デフォルトブラウザで開く
  });