electron-as-browser2

!version!downloads!license

A node module to help build browser like windows in electron.

!./screenshot.png

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-browser2

Usage

$3

``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';
``

See example for a full control interface implementation.

$3

- yarn install
- yarn start:control
- yarn start

API