A node module to help build browser like windows in electron.
npm i electron-as-browser
import BrowserLikeWindow from 'electron-as-browser';
let browser;
browser = new BrowserLikeWindow({
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 created
browser.on('new-tab', ({ webContents }) => {
// Customize webContents if your like
});
browser.on('closed', () => {
// Make it garbage collected
browser = null;
});
To make the control interface works, there are two steps:
For react users, there is a custom hook useConnect
to help you setup ipc channels.
import useConnect from 'electron-as-browser/useConnect';
const ControlPanel = () => {
const { tabs, tabIDs, activeID } = useConnect();
return (
<div>Use tabs' information 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 idConstruct 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
:
import {
sendEnterURL, // sendEnterURL(url) to load url
sendChangeURL, // sendChangeURL(url) on addressbar input change
sendGoBack,
sendGoForward,
sendReload,
sendStop,
sendNewTab, // sendNewTab([url])
sendSwitchTab, // sendSwitchTab(toID)
sendCloseTab // sendCloseTab(id)
} from 'electron-as-browser/control';
See example for a full control interface implementation.