如何在同一Electron项目中打包独立屏保EXE并作为SCR安装？

完全可以实现将屏保功能从主应用中拆分出来，打包为独立EXE后转为Windows屏保（SCR文件），同时还能利用Windows系统原生的空闲检测机制解决你遇到的误判问题——Windows系统本身会识别媒体播放、Teams通话、PPT演示等活跃状态，不会错误触发屏保，正好避开powermonitor的局限性。

步骤1：拆分屏保功能为独立模块 #

从主应用代码中剥离屏保相关逻辑，创建独立的入口文件（比如screensaver-main.js）和页面（screensaver.html），核心逻辑只处理：

• 无边框窗口/全屏幻灯片展示
• 响应Windows屏保的命令行参数（/s启动、/c设置、/p预览）
• 鼠标/键盘事件触发屏保退出

示例screensaver-main.js关键代码：

const { app, BrowserWindow } = require('electron');
const path = require('path');

function createScreensaverWindow() {
  const args = process.argv.slice(1);
  const isStart = args.includes('/s');
  const isSettings = args.includes('/c');
  const previewIndex = args.indexOf('/p');
  const isPreview = previewIndex !== -1;

  const windowOpts = {
    frame: false,
    show: false,
    webPreferences: {
      preload: path.join(__dirname, 'screensaver-preload.js')
    }
  };

  // 处理预览模式：嵌入系统预览控件
  if (isPreview) {
    const hwnd = parseInt(args[previewIndex + 1]);
    windowOpts.parent = hwnd;
    windowOpts.modal = true;
    windowOpts.width = 300;
    windowOpts.height = 200;
  } else if (isStart) {
    // 全屏启动屏保
    windowOpts.fullscreen = true;
  }

  const win = new BrowserWindow(windowOpts);
  win.loadFile(path.join(__dirname, 'screensaver.html'));

  win.once('ready-to-show', () => win.show());

  // 鼠标/键盘操作退出屏保
  if (isStart) {
    win.on('mousemove', () => app.quit());
    win.on('keydown', () => app.quit());
  }
}

app.whenReady().then(createScreensaverWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

步骤2：配置打包工具生成独立EXE #

以electron-builder为例，在项目package.json中添加屏保专属的打包配置，生成独立的可执行文件：

1. 在package.json中新增屏保打包脚本和配置：

{
  "scripts": {
    "build:main": "electron-builder",
    "build:screensaver": "electron-builder --config screensaver-build.json"
  }
}

2. 创建单独的screensaver-build.json配置文件：

{
  "appId": "com.yourdomain.yourscreensaver",
  "productName": "YourCustomScreensaver",
  "main": "screensaver-main.js",
  "win": {
    "target": "portable",
    "arch": ["x64"],
    "outputFilename": "screensaver.exe"
  },
  "files": [
    "screensaver-main.js",
    "screensaver.html",
    "screensaver-preload.js",
    "./assets/slides/**/*" // 屏保所需的资源文件
  ]
}

运行npm run build:screensaver即可得到独立的screensaver.exe文件。

步骤3：转换为Windows屏保文件（SCR） #

Windows系统的屏保本质是重命名为.scr的EXE文件，直接将打包生成的screensaver.exe重命名为YourCustomScreensaver.scr即可。

步骤4：通过安装程序部署到系统 #

利用electron-builder的NSIS安装器，在主应用的安装过程中完成屏保的部署：

1. 在主应用的package.json打包配置中，将屏保文件加入额外资源：

"build": {
  "extraResources": [
    {
      "from": "./dist/screensaver.scr",
      "to": "./screensaver.scr"
    }
  ],
  "nsis": {
    "include": "./installer-scripts/screensaver-install.nsh"
  }
}

2. 创建NSIS脚本installer-scripts/screensaver-install.nsh，添加屏保注册逻辑：

; 复制屏保到系统目录
SetOutPath $SYSDIR
File "$INSTDIR\screensaver.scr"

; 注册到系统屏保列表
WriteRegStr HKLM "Software\Microsoft\Windows\CurrentVersion\Screensavers\YourCustomScreensaver" "" "Your Custom Screensaver"
WriteRegStr HKLM "Software\Microsoft\Windows\CurrentVersion\Screensavers\YourCustomScreensaver" "SCRNSAVE.EXE" "$SYSDIR\YourCustomScreensaver.scr"
WriteRegDword HKLM "Software\Microsoft\Windows\CurrentVersion\Screensavers\YourCustomScreensaver" "ScreenSaveActive" 1

关键注意事项 #

• 屏保模块需完全独立于主应用，避免依赖主应用的运行环境或资源。
• 测试时可手动将SCR文件放入C:\Windows\System32目录，右键选择「安装」验证功能。
• Windows系统会自动处理空闲检测，无需再使用powermonitor，从根源解决误判问题。

内容的提问来源于stack exchange，提问作者Gautam Krishnan