Make electron like browser easy and flexible.
npm install electron-as-browser2npm i electron-as-browser2
javascript
const BrowserLikeWindow = require('electron-as-browser2');
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;
});
`
$3
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.
`javascript
const useConnect = require('electron-as-browser2/useConnect');
const ControlPanel = () => {
const { tabs, tabIDs, activeID } = useConnect();
return (
Use tabs' information to render your control panel
);
}
`
For non-react users, you have to setup ipc channels yourself, there are three steps:
- ipcRenderer.send('control-ready') on dom ready
- ipcRenderer.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 informations
- tabIDs array of opened tab's ids
- activeID 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:
`javascript
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';
``