如何使用Chrome.process API获取Chrome扩展内存资源占用？解决React调用报错

你遇到的TypeError: Cannot read properties of undefined (reading 'getProcessInfo')是因为**chrome.processes API已被Chrome官方废弃并移除**，所以该API目前无法使用。下面提供两种可行的替代方案：

方案一：用chrome.system.processes API获取进程资源数据 #

这个API可以获取系统所有进程的CPU、内存占用情况，需要先在扩展的manifest.json中声明权限：

{
  "permissions": ["system.processes"]
}

之后通过以下代码筛选出当前扩展的进程数据：

const fetchExtensionProcessData = async () => {
  // 获取当前扩展ID
  const extensionId = chrome.runtime.id;
  // 获取全量进程信息
  const allProcesses = await chrome.system.processes.getAll();
  
  // 筛选属于当前扩展的进程
  const extensionProcesses = allProcesses.filter(process => {
    return process.arguments.includes(`--extension-id=${extensionId}`);
  });

  console.log("当前扩展进程资源数据:", extensionProcesses);
};

fetchExtensionProcessData();

返回的进程对象包含cpu（CPU占用率）、memory（内存使用量，单位字节）等字段，可直接取用。

方案二：用performance.memory获取当前页面内存数据 #

如果仅需当前扩展页面（如popup、配置页）的内存占用，无需额外权限，直接使用Chrome支持的performance.memory即可：

const fetchMemoryData = () => {
  if ('memory' in performance) {
    const memoryInfo = performance.memory;
    console.log("已使用内存:", (memoryInfo.usedJSHeapSize / 1024 / 1024).toFixed(2), "MB");
    console.log("总内存限制:", (memoryInfo.totalJSHeapSize / 1024 / 1024).toFixed(2), "MB");
    console.log("内存峰值:", (memoryInfo.jsHeapSizeLimit / 1024 / 1024).toFixed(2), "MB");
  } else {
    console.log("当前环境不支持performance.memory API");
  }
};

fetchMemoryData();

注意：该API只能获取当前页面的JavaScript堆内存数据，无法获取整个扩展进程的CPU占用。

额外注意事项 #

• 所有Chrome扩展API必须在扩展上下文（背景页、popup、配置页、内容脚本）中调用，普通网页环境无法使用。
• 在React组件中使用时，建议在useEffect钩子中执行异步API调用，避免渲染阶段的问题：

import { useEffect } from 'react';

function ExtensionInfo() {
  useEffect(() => {
    fetchExtensionProcessData();
  }, []);

  return <div>查看控制台获取扩展资源数据</div>;
}

export default ExtensionInfo;

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