Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hulufei/electron-as-browser
Make electron like browser easy and flexible.
https://github.com/hulufei/electron-as-browser
addressbar browserview electron electron-browser newtab
Last synced: 7 days ago
JSON representation
Make electron like browser easy and flexible.
- Host: GitHub
- URL: https://github.com/hulufei/electron-as-browser
- Owner: hulufei
- License: mit
- Created: 2019-08-18T04:27:03.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-01-09T07:20:20.000Z (about 1 year ago)
- Last Synced: 2025-01-05T19:07:50.758Z (14 days ago)
- Topics: addressbar, browserview, electron, electron-browser, newtab
- Language: JavaScript
- Size: 1.35 MB
- Stars: 204
- Watchers: 5
- Forks: 44
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-github-star - electron-as-browser
README
# electron-as-browser
A node module to help build browser like windows in electron.
## Features
- Made with [BrowserView](https://electronjs.org/docs/api/browser-view) instead of [webview](https://electronjs.org/docs/api/webview-tag)
- Pluggable control panel (Navigation interface)
- Exposed [webContents](https://electronjs.org/docs/api/web-contents) and [BrowserWindow](https://electronjs.org/docs/api/browser-window)
- Tricky auto resize just out of the box
## Install
`npm i electron-as-browser`
## Usage
### First, create BrowserLikeWindow in [Main](https://electronjs.org/docs/glossary#main-process) process
```javascript
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](https://electronjs.org/docs/glossary#renderer-process) 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.
```javascript
import useConnect from 'electron-as-browser/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`](https://hulufei.github.io/electron-as-browser/#tabs) an object contains all the opened tab's informations
- [`tabIDs`](https://hulufei.github.io/electron-as-browser/#tabid) array of opened tab's ids
- [`activeID`](https://hulufei.github.io/electron-as-browser/#tabid) 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](./example) for a full control interface implementation.
### Run Example
- yarn install
- yarn start:control
- yarn start
## [API](https://hulufei.github.io/electron-as-browser/)