cba85/electron-webview

A simple electron webview with cool features.

Summary

cba85/electron-webview is a minimal Electron 39 boilerplate that wraps a <webview> tag inside a small browser shell. It ships with a MacOS-friendly menu, a frameless window option, persistent window dimensions, and a build pipeline for packaging Mac, Windows, and Linux executables plus a DMG installer for Mac. MIT-licensed and written in JavaScript, it serves as a starting point rather than a finished product.

What it is useful for

This is useful when you need a desktop wrapper around a web page or internal web app without scaffolding an Electron project from scratch. Engineers can point it at a single URL by changing the src attribute of the <webview> tag in index.html, or load a URL directly with mainWindow.loadURL("https://github.com") for a no-chrome experience. The included topbar adds a "Home" button, configured via the data-home attribute on the <webview> element, for returning to the start URL after users navigate through external links, plus a "Print" button that calls into the renderer through a preload script. The src/view.js module also exposes a createBrowserView(mainWindow) helper for engineers who prefer Electron's BrowserView API over the <webview> tag.

How engineers can use it

Clone the repository and run the documented setup:

npm install
npm start

Node.js is required. To change the embedded page, edit the <webview> element's src (and optionally data-home) in index.html. To toggle the topbar, the README walks through commenting or uncommenting lines in src/main.js, src/window.js, index.html, and assets/js/renderer.js, and switching between assets/css/topbar.css and assets/css/no-topbar.css. For window chrome, setting frame: false or titleBarStyle: 'hidden' in main.js removes the title bar, while the width and height properties set the initial size that gets persisted across sessions. For packaging, the README documents npx electron-packager commands per platform and an electron-installer-dmg command for Mac, exposed as npm run package-mac, package-win, package-linux, and create-installer-mac.

One documented limitation: the .icns icon generated by iConvert Icons does not work on Mac, so the README recommends using Image2icon instead. The README also calls out a security trade-off worth knowing: nodeIntegration is disabled in favor of a preload script using contextBridge and ipcRenderer, so any renderer code that previously relied on Node APIs will need to be re-exposed through that bridge. For background on the underlying APIs, the README points to the official Electron quick start.