Electron基于proc文件系统实现任务管理器的步骤指南

2023-10-08 13:05:15

概述

任务管理器是一个计算机程序，允许用户查看和管理正在运行的进程。它通常显示有关每个进程的信息，例如其名称、进程 ID (PID)、内存使用情况和 CPU 使用率。任务管理器还允许用户终止进程或更改其优先级。

步骤

1. 安装 Electron

如果您还没有安装 Electron，请按照官方文档进行安装。

npm install electron --save-dev

2. 创建一个新的 Electron 项目

使用 Electron CLI 创建一个新的项目：

npx create-electron-app my-task-manager
cd my-task-manager

3. 安装必要的 Node.js 模块

我们需要安装一些 Node.js 模块来帮助我们访问和解析 /proc 文件系统。

npm install fs-extra child_process

4. 创建主进程文件

在您的项目目录中，创建一个名为 main.js 的文件。这个文件将包含您的应用程序的主进程逻辑。

const { app, BrowserWindow, Menu, Tray } = require('electron');
const path = require('path');
const fs = require('fs-extra');
const child_process = require('child_process');

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  win.loadFile('index.html');

  const menu = Menu.buildFromTemplate([
    {
      label: '文件',
      submenu: [
        {
          label: '退出',
          click: () => {
            app.quit();
          }
        }
      ]
    }
  ]);
  Menu.setApplicationMenu(menu);

  const tray = new Tray('icon.png');
  tray.setToolTip('任务管理器');
  tray.on('click', () => {
    win.show();
  });
}

app.whenReady().then(() => {
  createWindow();

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

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

5. 创建渲染进程文件

在您的项目目录中，创建一个名为 index.html 的文件。这个文件将包含您的应用程序的用户界面。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>任务管理器</h1>
    <ul id="process-list"></ul>
  </body>
</html>

6. 编写 JavaScript 代码来访问 /proc 文件系统

在您的 index.html 文件中，添加以下脚本：

const fs = require('fs');

function getProcessList() {
  const processes = fs.readdirSync('/proc');

  const numericProcesses = processes.filter((process) => {
    return /^\d+$/.test(process);
  });

  const processList = [];
  numericProcesses.forEach((process) => {
    const processInfo = {
      pid: process,
      name: fs.readFileSync(`/proc/${process}/comm`, 'utf8').trim()
    };
    processList.push(processInfo);
  });

  return processList;
}

function displayProcessList(processList) {
  const processListElement = document.getElementById('process-list');

  processList.forEach((process) => {
    const listItem = document.createElement('li');
    listItem.textContent = `${process.pid} ${process.name}`;
    processListElement.appendChild(listItem);
  });
}

window.onload = () => {
  const processList = getProcessList();
  displayProcessList(processList);
};