如何通过React JS检测Windows桌面应用是否处于运行状态

纯浏览器环境运行的React Web应用受同源策略和沙箱安全机制限制，无法直接读取Windows系统层面的进程列表，不存在无依赖直接实现检测的方案，以下是不同部署场景下的可落地实现路径：

场景1：React代码被打包为Electron桌面应用 #

这是最常见的React跨端桌面开发场景，可直接通过Electron提供的Node.js能力实现检测，不需要额外依赖：

• 原生命令实现方案
  在Electron主进程中通过child_process模块调用Windows自带的tasklist命令查询进程列表，解析结果后通过IPC通信将状态传给渲染层的React代码即可，参考实现：

  // Electron主进程代码
  const { exec } = require('child_process');
  const { ipcMain } = require('electron');
  
  // 注册检测进程的IPC处理函数
  ipcMain.handle('check-app-running', async (_, targetExeName) => {
    return new Promise((resolve) => {
      // 执行tasklist命令输出无表头的csv格式进程列表
      exec('tasklist /fo csv /nh', (error, stdout) => {
        if (error) return resolve(false);
        // 解析提取所有运行中的exe文件名
        const runningProcesses = stdout.split('\r\n')
          .map(line => line.split(',')[0]?.replaceAll('"', ''))
          .filter(Boolean);
        resolve(runningProcesses.includes(targetExeName));
      });
    });
  });
  

  渲染层React代码调用示例：

  import { useEffect, useState } from 'react';
  const { ipcRenderer } = window.require('electron');
  
  function App() {
    const [notepadRunning, setNotepadRunning] = useState(false);
  
    useEffect(() => {
      // 每2秒检测一次记事本运行状态
      const timer = setInterval(async () => {
        const status = await ipcRenderer.invoke('check-app-running', 'notepad.exe');
        setNotepadRunning(status);
      }, 2000);
      return () => clearInterval(timer);
    }, []);
  
    return <div>记事本当前运行状态：{notepadRunning ? '运行中' : '未启动'}</div>
  }
  

  注意：正式环境建议通过contextBridge做API隔离，不要直接在渲染进程开启nodeIntegration，避免XSS风险。

• 第三方库简化实现
  可以引入systeminformation这类封装好的系统信息库，不需要自己解析命令输出，跨平台兼容性更好，安装依赖后直接调用进程查询接口即可：

  // 安装依赖：npm install systeminformation
  const si = require('systeminformation');
  async function checkAppRunning(targetExe) {
    const processData = await si.processes();
    return processData.list.some(item => item.name === targetExe);
  }
  

场景2：React应用为纯浏览器端运行的Web应用 #

这种场景下必须搭配本地运行的辅助组件才能突破浏览器沙箱限制，常见实现方式有两种：

• 本地轻量服务方案：开发一个极小的本地后台程序（可以用Node.js、Go、Rust编写，打包后体积通常几MB），开机静默在后台运行，监听127.0.0.1的本地端口，提供进程查询的HTTP接口，React应用直接请求该本地接口即可拿到指定应用的运行状态，注意需要给接口配置CORS规则允许你的站点域名访问。
• 浏览器扩展方案：开发对应浏览器的扩展程序，通过Chrome/Edge提供的Native Messaging能力对接本地原生消息宿主程序查询进程状态，扩展再将状态传递给页面内的React代码，这种方案不需要占用本地端口，但是需要用户额外安装浏览器扩展和本地宿主组件，部署流程更复杂。

所有涉及查询用户本地进程的方案，都需要明确告知用户当前操作的权限用途，符合个人信息保护相关的合规要求，禁止未经用户许可私自采集进程信息。

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