Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/el3um4s/electron-window
Electron - create a window with optional autoupdater and browserview
https://github.com/el3um4s/electron-window
browser browser-view browserview electron electron-browser electron-browser-window electron-window electronjs npm typescript window
Last synced: about 4 hours ago
JSON representation
Electron - create a window with optional autoupdater and browserview
- Host: GitHub
- URL: https://github.com/el3um4s/electron-window
- Owner: el3um4s
- License: mit
- Created: 2022-08-28T09:32:39.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-02-04T16:09:10.000Z (over 1 year ago)
- Last Synced: 2024-09-20T00:02:16.400Z (5 days ago)
- Topics: browser, browser-view, browserview, electron, electron-browser, electron-browser-window, electron-window, electronjs, npm, typescript, window
- Language: TypeScript
- Homepage:
- Size: 1.22 MB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Electron Window
Electron - create a window with optional autoupdater and browserview
NPM link: [@el3um4s/electron-window](https://www.npmjs.com/package/@el3um4s/electron-window)
### Install and use the package
To use the package in a project:
```bash
npm i @el3um4s/electron-window
```Then in a file:
```ts
import ElectronWindow from "@el3um4s/electron-window";
import windowControls from "@el3um4s/renderer-for-electron-window-controls";const createWindow = async (options: {
url: string;
preload: string;
themeSource?: "system" | "light" | "dark";
settings?: Electron.BrowserWindowConstructorOptions;
}): Promise => {
let window: ElectronWindow;const { url, themeSource = "system", preload } = options;
const settings = {
...options?.settings,
title: "GEST DASHBOARD",
};
window = new ElectronWindow(settings);window.createWindow({ url, themeSource, preload });
await window.setIpcMain([windowControls]);
await window.addBrowserViewHidden();
await window.setIpcMainView([windowControls]);window.addAutoUpdater();
return window;
};let electronWindow: ElectronWindow;
electronWindow = await createWindow({
url,
preload,
themeSource: "light",
settings: {
x: Math.floor(Math.random() * 64),
y: Math.floor(Math.random() * 64),
},
});
```To use in the renderer install:
```bash
npm i @el3um4s/electron-window @el3um4s/renderer-electron-window-browser-view @el3um4s/ipc-for-electron
```Then in the preload file:
```ts
import { generateContextBridge } from "@el3um4s/ipc-for-electron";
import { browserView } from "@el3um4s/electron-window";const listAPI = [browserView];
generateContextBridge(listAPI, "ipc");
```Then in the renderer:
```ts
import browserView from "@el3um4s/renderer-electron-window-browser-view";browserView.openInBrowserView({ url: "https://www.google.com", apiKey: "ipc" });
browserView.showBrowserView({
bounds: {
paddingLeft: 64,
paddingTop: 64,
paddingRight: 128,
paddingBottom: 128,
},
apiKey: "ipc",
});browserView.on.browserViewCanBeShowed({
callback: (data) => {
console.log(data);
},
});
```### API: main process
`new ElectronWindow(settings?: Electron.BrowserWindowConstructorOptions):ElectronWindow`: create a new instance of ElectronWindow
```ts
import ElectronWindow from "@el3um4s/electron-window";let window: ElectronWindow;
const settings = {
title: "GEST DASHBOARD",
backgroundColor: "red",
};window = new ElectronWindow(settings);
````createWindow(options?: CreateWindow): BrowserWindow`: create a new window
```ts
import ElectronWindow from "@el3um4s/electron-window";let window: ElectronWindow;
const options = {
url: "https://www.google.com",
themeSource: "light",
preload: "path/to/preload.js",
};window = new ElectronWindow();
window.createWindow(options);
````loadUrl(url: string): void`: load a new url in the window
```ts
import ElectronWindow from "@el3um4s/electron-window";let window: ElectronWindow;
const options = {
url: "https://www.google.com",
themeSource: "light",
preload: "path/to/preload.js",
};window = new ElectronWindow();
window.createWindow(options);window.loadUrl("https://www.youtube.com");
````async setIpcMain(api: Array): Promise`: set the ipcMain for the window
Use `el3um4s/ipc-for-electron` ([GitHub](https://github.com/el3um4s/ipc-for-electron), [NPM](https://www.npmjs.com/package/@el3um4s/ipc-for-electron)) to set the ipcMain for the window
```ts
import ElectronWindow from "@el3um4s/electron-window";
import windowControls from "@el3um4s/renderer-for-electron-window-controls";let window: ElectronWindow;
window = new ElectronWindow();
window.createWindow();const listAPI = [windowControls];
await window.setIpcMain(listAPI);
````async addAutoUpdater(): Promise`: add the autoUpdater to the window
If you want to use the autoupdater, you need to install
- `el3um4s/ipc-for-electron` ([GitHub](https://github.com/el3um4s/ipc-for-electron), [NPM](https://www.npmjs.com/package/@el3um4s/ipc-for-electron))
- `el3um4s/ipc-for-electron-auto-updater` ([GitHub](https://github.com/el3um4s/ipc-for-electron), [NPM](https://www.npmjs.com/package/@el3um4s/ipc-for-electron))
- `el3um4s/renderer-for-electron-auto-updater` ([GitHub](https://github.com/el3um4s/ipc-for-electron), [NPM](https://www.npmjs.com/package/@el3um4s/ipc-for-electron))```bash
npm i @el3um4s/electron-window @el3um4s/ipc-for-electron @el3um4s/ipc-for-electron-auto-updater @el3um4s/renderer-for-electron-auto-updater
```In the main process:
```ts
import ElectronWindow from "@el3um4s/electron-window";let window: ElectronWindow;
window = new ElectronWindow();
window.createWindow();window.addAutoUpdater();
```In the preload file:
```ts
import { generateContextBridge } from "@el3um4s/ipc-for-electron";
import autoUpdater from "@el3um4s/ipc-for-electron-auto-updater";const listAPI = [autoUpdater];
generateContextBridge(listAPI, "ipc");
````async addBrowserView(options?: CreateBrowserView): Promise`: add a browserView to the window
```ts
import ElectronWindow from "@el3um4s/electron-window";let window: ElectronWindow;
window = new ElectronWindow();
window.createWindow();const options = {
url: "https://www.google.com",
preload: "path/to/preload.js",
bounds: {
paddingLeft: 64,
paddingTop: 64,
paddingRight: 64,
paddingBottom: 64,
},
};await window.addBrowserView(options);
````async addBrowserViewHidden(options?: CreateBrowserView): Promise`: add a browserView to the window and hide it
```ts
import ElectronWindow from "@el3um4s/electron-window";let window: ElectronWindow;
window = new ElectronWindow();
window.createWindow();const options = {
url: "https://www.google.com",
preload: "path/to/preload.js",
};await window.addBrowserViewHidden(options);
````async setIpcMainView(api: Array): Promise`: set the ipcMain for the browserView
Use `el3um4s/ipc-for-electron` ([GitHub](https://github.com/el3um4s/ipc-for-electron), [NPM](https://www.npmjs.com/package/@el3um4s/ipc-for-electron)) to set the ipcMain for the window
```ts
import ElectronWindow from "@el3um4s/electron-window";
import systemInfo from "@el3um4s/ipc-for-electron-system-info";let window: ElectronWindow;
window = new ElectronWindow();
window.createWindow();const options = {
url: "https://www.google.com",
preload: "path/to/preload.js",
};await window.addBrowserViewHidden(options);
const listAPI = [systemInfo];
await window.setIpcMainView(listAPI);
```### API: browserView - Electron Side
- `openInBrowserView`: open the url in the browserView.
- `showBrowserView`: show the browserView. The response is sent to the `showBrowserView` channel.
- `resizeBrowserViewToMaximized`: resize the browserView to the maximized size.
- `resizeBrowserViewToUnMaximized`: resize the window to the un-maximized size.
- `removeBrowserView`: remove the browserView.
- `openBrowserViewDevTools`: open the devTools of the browserView.
- `printBrowserView`: print the browserView.
- `goBackBrowserView`: go back in the browserView.
- `goForwardBrowserView`: go forward in the browserView.
- `reloadCurrentPageBrowserView`: reload the current page in the browserView.### API: browserView - Renderer Side
`on.browserViewCanBeShowed = async (options: { callback?: (arg0: boolean) => void; apiKey?: string; }): Promise`
example:
```ts
import browserView from "@el3um4s/renderer-electron-window-browser-view";browserView.openInBrowserView({ url: "https://www.google.com", apiKey: "ipc" });
browserView.showBrowserView({
bounds: {
paddingLeft: 64,
paddingTop: 64,
paddingRight: 128,
paddingBottom: 128,
},
apiKey: "ipc",
});browserView.on.browserViewCanBeShowed({
callback: (data) => {
console.log(data);
},
});
````showBrowserView = async (options: { callback?: (arg0: boolean) => void; apiKey?: string; bounds?: BrowserViewBounds; }): Promise`: show the browserView
example:
```ts
import browserView from "@el3um4s/renderer-electron-window-browser-view";browserView.openInBrowserView({ url: "https://www.google.com", apiKey: "ipc" });
browserView.showBrowserView({
bounds: {
paddingLeft: 64,
paddingTop: 64,
paddingRight: 128,
paddingBottom: 128,
},
apiKey: "ipc",
callback: (data) => {
console.log(
data ? "BrowserView can be shown" : "BrowserView can't be shown"
);
},
});
````openInBrowserView = (options: { apiKey?: string; url: string }): void`: open the url in the browserView
example:
```ts
import browserView from "@el3um4s/renderer-electron-window-browser-view";browserView.openInBrowserView({ url: "https://www.google.com", apiKey: "ipc" });
````resizeBrowserViewToMaximized = (options?: { apiKey?: string; bounds?: BrowserViewBounds; }): void`: resize the browserView to the maximized size
example:
```ts
import browserView from "@el3um4s/renderer-electron-window-browser-view";const bounds: {
paddingLeft: 64;
paddingTop: 64;
paddingRight: 64;
paddingBottom: 64;
};browserView.resizeBrowserViewToMaximized({ bounds, apiKey: "ipc" });
````resizeBrowserViewToUnMaximized = (options?: { apiKey?: string; bounds?: BrowserViewBounds; }): void`: resize the browserView to the un-maximized size
example:
```ts
import browserView from "@el3um4s/renderer-electron-window-browser-view";const bounds: {
paddingLeft: 64;
paddingTop: 64;
paddingRight: 64;
paddingBottom: 64;
};browserView.resizeBrowserViewToUnMaximized({ bounds });
````removeBrowserView = (options?: { apiKey?: string }): void`: remove the browserView
example:
```ts
import browserView from "@el3um4s/renderer-electron-window-browser-view";browserView.removeBrowserView({ apiKey: "ipc" });
````openBrowserViewDevTools = (options?: { apiKey?: string }): void`: open the dev tools window of the browserView
example:
```ts
import browserView from "@el3um4s/renderer-electron-window-browser-view";browserView.openBrowserViewDevTools();
````printBrowserView = (options?: { apiKey?: string }): void`: print the browserView
example:
```ts
import browserView from "@el3um4s/renderer-electron-window-browser-view";browserView.printBrowserView();
````goBackBrowserView = (options?: { apiKey?: string }): void`: go back in the browserView
example:
```ts
import browserView from "@el3um4s/renderer-electron-window-browser-view";browserView.goBackBrowserView();
````goForwardBrowserView = (options?: { apiKey?: string }): void`: go forward in the browserView
example:
```ts
import browserView from "@el3um4s/renderer-electron-window-browser-view";browserView.goForwardBrowserView();
````reloadCurrentPageBrowserView = (options?: { apiKey?: string }): void`: reload the current page in the browserView
example:
```ts
import browserView from "@el3um4s/renderer-electron-window-browser-view";browserView.reloadCurrentPageBrowserView();
```### Default settings
```ts
const defaultSettings = {
title: appName,
width: 854,
height: 480,
frame: false,
backgroundColor: "#FFF",
};
```### Interfaces
**CreateWindow**
```ts
interface CreateWindow {
url: string;
iconPath?: string;
preload?: string;
themeSource?: "system" | "light" | "dark";
}
```**CreateBrowserView**
```ts
interface CreateBrowserView {
url?: string;
preload?: string;
bounds?: BrowserViewBounds;
}
```**BrowserViewBounds**
```ts
interface BrowserViewBounds {
paddingLeft?: number;
paddingTop?: number;
paddingRight?: number;
paddingBottom?: number;
show?: boolean;
}
```