electron-as-browser
A node module to help build browser like windows in electron.
Features
- Made with BrowserView instead of webview
- Pluggable control panel (Navigation interface)
- Exposed webContents and BrowserWindow
- Tricky auto resize just out of the box
Install
npm i electron-as-browser
Usage
Main process
First, create BrowserLikeWindow inconst BrowserLikeWindow = ; let browser; browser = controlPanel: 'renderer/you-control-interface.html' startPage: 'https://page-to-load-once-open' blankTitle: 'New tab' debug: true // will open controlPanel's devtools; // Trigger on new tab createdbrowser; browser;
renderer process).
Second, style your own browser control interface(To make the control interface works, there are two steps:
- Setup ipc channels to receive tabs' informations
- Send actions to control the behaviours
For react users, there is a custom hook useConnect
to help you setup ipc channels.
const useConnect = ; const ControlPanel = { const tabs tabIDs activeID = ; return <div>Use tabs informations to render your control panel</div> ;}
For non-react users, you have to setup ipc channels yourself, there are three steps:
ipcRenderer.send('control-ready')
on dom readyipcRenderer.on('tabs-update', (e, tabs) => { // tabs updated })
ipcRenderer.on('active-update', (e, activeID) => { // Active tab's id updated })
Don't forget to removeListener
on ipcRenderer
once control panel unmounted.
Once setup ipc channels, you'll get all your control panel needed informations:
tabs
an object contains all the opened tab's informationstabIDs
array of opened tab's idsactiveID
current active tab's id
Construct and style your control interface as your like.
Then you can send actions to control the browser view, the actions can require from electron-as-browser/control
:
;
See example for a full control interface implementation.
Run Example
- yarn install
- yarn start:control
- yarn start