豆蔵デベロッパーサイトに投稿したブログ。
WebView 使ってる場合じゃなかったんやー・・ってことで、より速くてセキュアで将来性のある BrowserView による 野良 Scrapbox アプリ再構築を試みています。
ツールバーとかタブバーは、メインウィンドウの BrowserWindow の webContents として実装。Scrapbox のページは BrowserView に読み込んでいます。
BrowserWindow や BrowserView ごとに
main process ↔ contextBridge(preload) ↔ renderer process
の形で実装し、renderer process は Node.js から隔離した (通常の Web アプリの JavaScript と同等の) 実行環境になっています。contextBridge は BrowserView / BrowserWindow の生成時に preload される JavaScript で、main process との通信を担い、Node.js を使った API を renderer process に提供します。色々と作り方が変わるので空き時間に試行錯誤しています。
ページ一覧画面は動きました。
従来、ページ情報画面などの補助画面を HTML の dialog 要素で作ってましたが、BrowserWindow を子ウィンドウとして表示する方式で実装しました。
メインウィンドウの webContents として全てのページを表示していた WebView 方式と違い、独立した Web ページとして各画面を表示しなくてはいけないので多少ルック＆フィールは変わりますがまあいいかなと思っています。
今のところタブは作ってなくて、Scarpbox ページと一覧画面を切り替えるボタンをタブのように (静的に) 配置しているだけです。これまで使ってた electron-tabs が BrowserView には対応しておらず自分で作らなきゃなので、最回しにしてます *1。
あとは、使いながらこれはないと不便！って思った機能 (URL をタイトル付きで貼り付けるなど) から優先的に追加していっています。
*1:ページごとにタブがなくても、ページと一覧を切り替えられるれば致命的には使いにくくならない感じです