electron-as-browser

    1.0.0 • Public • Published

    electron-as-browser

    versiondownloadslicense

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

    ./screenshot.png

    Features

    Install

    npm i electron-as-browser

    Usage

    First, create BrowserLikeWindow in Main process

    const BrowserLikeWindow = require('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.

    const useConnect = require('electron-as-browser/useConnect');
     
    const ControlPanel = () => {
      const { tabs, tabIDs, activeID } = useConnect();
      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 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

    Install

    npm i electron-as-browser

    DownloadsWeekly Downloads

    12

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    18.5 kB

    Total Files

    6

    Last publish

    Collaborators

    • hulufei