hulufei / electron-as-browser Goto Github PK

View Code? Open in Web Editor NEW

182.0 5.0 43.0 1.38 MB

Make electron like browser easy and flexible.

License: MIT License

JavaScript 91.64% HTML 0.94% CSS 7.43%

electron electron-browser browserview newtab addressbar

electron-as-browser's Introduction

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

electron-as-browser's People

Contributors

Stargazers

Watchers

electron-as-browser's Issues

twice window.open but can not open a tab

A very cool project, and i found
there is a strange case when i ran project with a simple main page just like this below:

<div><button id="b2" > test2 </button></div>
<script>
b2 = document.getElementById("b2")
b2.addEventListener("click",
    (event) => {
        alert('b2')
        window.open('https://www.google.com', 'bbbddd');
    },
    false,
)
</script>

First when i clicked the button 'test2' to open a new Google tab-page, it worked;

then i closed this new-opend page by clicking the 'x' on the tab card;

so that i switched to the original simple main page;

and next, i clicked the button 'test2' again to open a new Google tab-page, BUT it can't work.

As I repeated these steps with the simple page on Chrome browser, it work well.

i found it would worked as long as using un-uniqe value on the second parm of func 'window.open' like

window.open('https://www.google.com',  'bbbddd'+new Date().getTime());

Can u help this out?

release build or production build

how to make build of electron APP

Question abour `webPreferences` for `controlView`

It's not clear to me why for new Tab:

sandbox: true

https://github.com/hulufei/electron-as-browser/blob/master/index.js#L390

but for controlView

contextIsolation : false,
nodeIntegraion: true

https://github.com/hulufei/electron-as-browser/blob/master/index.js#L80

Is it enough secure?

bug when electron upgrade

Hi,
I've tried to run this module under electron version 25, but it doesn't work. Is it possible to update it with the latest version of electron? Thank you.

Can not open an “a” html tag element with target="_blank"

Migrate to web contents view

Browser view is deprecated, it is superceded by https://www.electronjs.org/docs/latest/api/web-contents-view

Unresponsive Controls Bar

Hey ,

I'm trying to recreate a similar experiment from scratch by putting two BrowserViews.

However, once I add the second browser view - the first browser view goes unresponsive - but is still in the background. I am not sure how to focus it back when I click on it.

Have you run into this? I feel like I might be missing a flag maybe.

Debug value and errors

Setting debug to false in order to prevent the dev tools window from popping up results in getting a blank page.

Is there a way to disable the dev tools window popping up?

I am also getting the following errors upon start in the console:

(node:517563) UnhandledPromiseRejectionWarning: Error: An object could not be cloned.
    at EventEmitter.t.ipcRendererInternal.send (node:electron/js2c/renderer_init:85:328)
    at EventEmitter.<anonymous> (node:electron/js2c/renderer_init:81:357)
(Use `electron --trace-warnings ...` to show where the warning was created)
(node:517563) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)

Add typings

Pretty simple request: add .d.ts files for all the .js files.