super-browser-window-kit

高保真 macOS Tahoe 工具包，专为 Electron BrowserWindow 设计。

🏠 官网: https://bytemyth.com/super-browser-window-kit

项目简介

为 Electron 应用带来现代的原生 macOS 窗口视觉效果。

截图

窗口圆角和侧边栏

体验美观的圆角窗口和侧边栏集成，享受无缝的原生 macOS 美学设计。

液态玻璃效果

利用原生 NSGlassEffectView 的强大功能实现真正的 macOS 液态玻璃效果 - 无需 CSS 技巧，纯粹的原生性能。

安装

npm install super-browser-window-kit

快速使用

窗口圆角效果

轻松为 Electron BrowserWindow 启用美观、原生风格的圆角效果，让您的应用在 macOS 上更贴合系统美学，提升整体质感。只需在窗口创建后调用相关 API，即可自定义圆角半径。

const { app, BrowserWindow } = require('electron')
const path = require('node:path')
const {
  default: SuperBrowserWindowKit,
  AutoresizingMask,
  GlassMaterialVariant,
  SystemColor
} = require("super-browser-window-kit");


/**
 * =====================[ 许可证声明 ]=====================
 * 此许可证码仅在 com.github.Electron 测试环境有效，正式环境下无效。
 * 正式发布请获取商业授权。
 *
 * 官网: https://bytemyth.com/super-browser-window-kit
 * 联系方式: [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";
app.whenReady().then(() => {
  const win = new BrowserWindow({
    width: 1000,
    height: 700,
    titleBarStyle: 'hiddenInset',
    trafficLightPosition: { x: 20, y: 20 },
    show: false,
  });
  win.loadFile("index.html");
  SuperBrowserWindowKit.setLicense(LICENSE_CODE);
  SuperBrowserWindowKit.enableWindowCornerCustomization();
  SuperBrowserWindowKit.setWindowCornerRadius(win.getNativeWindowHandle(), 26);
  win.show();
});

主要 API

// 窗口圆角
enableWindowCornerCustomization(): boolean;
setWindowCornerRadius(handle: Buffer, radius?: number): boolean;
disableWindowCornerCustomization(): boolean;

// 背景视图
addBackgroundView(handle: Buffer, options?: BackgroundOptions): number;
setBackgroundCornerRadius(handle: Buffer, id: number, cornerRadius: number): void;
setBackgroundColor(handle: Buffer, id: number, color: string | SystemColor | { light: string | SystemColor; dark: string | SystemColor }): void;

// 玻璃视图
addGlassEffectView(handle: Buffer, options?: EffectViewOptions): number;
getEffectViewType(handle: Buffer, id: number): EffectViewType | -1;
setGlassCornerRadius(handle: Buffer, id: number, cornerRadius: number, masksToBounds?: boolean): void;
setGlassColor(handle: Buffer, id: number, color: string | SystemColor | { light: string | SystemColor; dark: string | SystemColor }): void;
setGlassVariant(handle: Buffer, id: number, variant: GlassMaterialVariant): void;

// 视图通用
removeView(handle: Buffer, id: number): boolean;
setViewAutoresizingMask(handle: Buffer, id: number, mask: AutoresizingMask | number): boolean;
getViewFrame(handle: Buffer, id: number): ViewFrame | null;
setViewFrame(handle: Buffer, id: number, options: { x?: number; y?: number; width?: number; height?: number }): boolean;

// 窗口背景
setWindowBackgroundColor(handle: Buffer, color: string | SystemColor | { light: string | SystemColor; dark: string | SystemColor }): void;

// 全屏通知
setFullScreenNotificationListener(handle: Buffer, callback: FullScreenNotificationCallback): boolean;
removeFullScreenNotificationListener(handle: Buffer): boolean;

// 许可证
setLicense(license: string): boolean;
getBundleId(): string;

示例

完整的工作示例请查看演示仓库： https://github.com/gaodeng/super-browser-window-kit-example

或在 Electron Fiddle 中尝试： https://gist.github.com/gaodeng/4ca07e70b32701b99fbe0063efb9cdb9

作者

bytemyth 团队

许可证

Copyright (c) 2025 bytemyth 团队. All rights reserved.

这是专有软件。您可以将其用于评估和测试目的。

如需在生产环境中商业使用，请访问 https://bytemyth.com/super-browser-window-kit 或携带公司/团队信息联系 [email protected] 获取商业许可。