Skip to content

Instantly share code, notes, and snippets.

@gaodeng

gaodeng/index.html

Last active August 16, 2025 08:18
Show Gist options
  • Save gaodeng/4ca07e70b32701b99fbe0063efb9cdb9 to your computer and use it in GitHub Desktop.
Save gaodeng/4ca07e70b32701b99fbe0063efb9cdb9 to your computer and use it in GitHub Desktop.
Download ZIP
super-browser-window-kit-example
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
display: flex;
flex-direction: row;
font-family: Arial, sans-serif;
}
.drag-region {
-webkit-app-region: drag;
}
.no-drag {
-webkit-app-region: no-drag;
}
.side-bar {
width: 205px;
padding: 10px;
}
.main-content {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: solid 1px #cccccc44;
margin: 10px;
margin-left: 5px;
border-radius: 18px;
overflow: hidden;
padding: 20px;
}
.side-bar-content {
display: flex;
flex-direction: column;
/* border: solid 1px blue; */
height: 100%;
border-radius: 20px;
overflow: hidden;
}
.side-bar-list {
list-style: none;
padding: 0;
margin: 0;
margin-top: 50px;
}
.side-bar-list li {
margin: 2px 10px;
padding: 8px;
border-radius: 8px;
font-size: 13px;
-webkit-app-region: no-drag;
cursor: default;
}
.side-bar-list li.active {
background-color: #cccccc44;
}
.side-bar-list li a {
text-decoration: none;
color:#000000;
}
@media (prefers-color-scheme: dark) {
body {
color: #ffffff;
}
.side-bar-list li a {
color: #ffffff;
}
.side-bar-list li.active {
background-color: #ffffff11;
}
}
#hello-msg {
font-size: 36px;
font-family: 'SF Pro Display', sans-serif;
}
</style>
</head>
<body class="drag-region">
<div class="side-bar">
<div class="side-bar-content">
<ul class="side-bar-list">
<li class="active">aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
</ul>
</div>
</div>
<div class="main-content">
<h1 class="drag-region no-drag" id="hello-msg">Hello Electron</h1>
<div> We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
and Electron <span id="electron-version"></span>.
</div>
</div>
<script src="./renderer.js"></script>
</body>
</html>
Raw
main.js
// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
const path = require('node:path')
const {
default: SuperBrowserWindowKit,
AutoresizingMask,
GlassMaterialVariant,
SystemColor
} = require("super-browser-window-kit");
function createWindow() {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
transparent: true,
vibrancy: 'sidebar',
titleBarStyle: 'hiddenInset',
trafficLightPosition: { x: 20, y: 20 },
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
/**
* =====================[ LICENSE NOTICE ]=====================
* This license code is valid only for com.github.Electron test builds.
* It will NOT work in production environments.
* For production use, please obtain a valid commercial license.
*
* Official website: https://bytemyth.com/super-browser-window-kit
* Contact: [email protected]
* ===========================================================
*/
const LICENSE_CODE = "GCAYQ-ASCAG-Q76KA-ELXLU-HN8CV-3ZK8P-STALL-QLSVZ-9FFSX-3S2ZU-4QVSC-LLJ7U-KH6K7-G88HA-4TTDJ-58G9H-GZFY6-DDSDJ-L5ZB9-V7UMB-896CS-P9AVC-GULAB-EEAGQ-T77DP-DRBJN-G829M-ZZF9M-L2VEN-RZM8F-SQ4KW-3JLLB-MUVXP-TS3P8-7ZFZM-4L2P3-S4TTA-Z7EVY-Z5H9J-FYDUS-WQCYW-C92PZ-BB23J-QZEVP-QNQ"
SuperBrowserWindowKit.setLicense(LICENSE_CODE);
SuperBrowserWindowKit.enableWindowCornerCustomization();
SuperBrowserWindowKit.setWindowCornerRadius(mainWindow.getNativeWindowHandle(), 26);
let glassId = SuperBrowserWindowKit.addGlassEffectView(mainWindow.getNativeWindowHandle(), {
cornerRadius: 18,
});
SuperBrowserWindowKit.setGlassVariant(mainWindow.getNativeWindowHandle(), glassId, GlassMaterialVariant.sidebar);
SuperBrowserWindowKit.setWindowBackgroundColor(mainWindow.getNativeWindowHandle(), SystemColor.WindowBackground);
const [winWidth, winHeight] = mainWindow.getSize();
SuperBrowserWindowKit.setViewFrame(mainWindow.getNativeWindowHandle(), glassId, {
width: 207,
x: 9,
y: 9,
height: winHeight - 18,
});
SuperBrowserWindowKit.setViewAutoresizingMask(
mainWindow.getNativeWindowHandle(),
glassId,
AutoresizingMask.FlexibleHeight
);
// and load the index.html of the app.
mainWindow.loadFile('index.html')
// Open the DevTools.
// mainWindow.webContents.openDevTools()
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
Raw
package.json
{
"name": "bashful-toad-injure-8aqr8",
"productName": "bashful-toad-injure-8aqr8",
"description": "My Electron application description",
"keywords": [],
"main": "./main.js",
"version": "1.0.0",
"author": "gaodeng",
"scripts": {
"start": "electron ."
},
"dependencies": {
"super-browser-window-kit": "1.2.0"
},
"devDependencies": {
"electron": "37.3.0"
}
}
Raw
preload.js
/**
* The preload script runs before `index.html` is loaded
* in the renderer. It has access to web APIs as well as
* Electron's renderer process modules and some polyfilled
* Node.js functions.
*
* https://www.electronjs.org/docs/latest/tutorial/sandbox
*/
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const type of ['chrome', 'node', 'electron']) {
replaceText(`${type}-version`, process.versions[type])
}
})
Raw
renderer.js
/**
* This file is loaded via the <script> tag in the index.html file and will
* be executed in the renderer process for that window. No Node.js APIs are
* available in this process because `nodeIntegration` is turned off and
* `contextIsolation` is turned on. Use the contextBridge API in `preload.js`
* to expose Node.js functionality from the main process.
*/
const sideBarList = document.getElementsByClassName('side-bar-list')[0];
const sideBarListItems = sideBarList.getElementsByTagName('li');
const helloMsg = document.getElementById('hello-msg');
console.log(sideBarListItems);
for (let i = 0; i < sideBarListItems.length; i++) {
sideBarListItems[i].addEventListener('click', function() {
const active = document.getElementsByClassName('active')[0];
if (active) {
active.classList.remove('active');
}
this.classList.add('active');
if(i === 0) {
helloMsg.textContent = 'Hello Electron';
} else if (i === 1) {
helloMsg.textContent = 'Bonjour macOS';
} else if (i === 2) {
// japanese
helloMsg.textContent = 'こんにちは Electron';
} else {
// korean
helloMsg.textContent = '안녕하세요 Electron';
}
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment