ElectronのwebContents(webview)についてメモ

date
Jun 22, 2022
slug
electron-ipc-renderer-webview
status
Published
summary
ElectronのwebContents(webview)についてメモ
type
Post
ステータス

<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は以下に記載されている。
 
以下は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); // デフォルトブラウザで開く
  });
 

© わくてか 2022