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!");
`);
});
}
ハンドル可能なイベント一覧は**こちら** に記載
実装で一番多かったのが、新しいサイトを開いたとき、または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”のアンカーリンクについては、パソコンのデフォルトブラウザで開くように変更される。