hulufei/electron-as-browser

Make electron like browser easy and flexible.

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

First, create BrowserLikeWindow in Main process

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;
});

Second, style your own browser control interface(renderer process).

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.

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

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.

Run Example

• yarn install
• yarn start:control
• yarn start

API