Display cpu info in electron

Question

So I started learning electron and I made a cool app. I wanted to add more things, but I'm kinda stuck. I tried to add cpu name using manufacturer(); in systeminformation. I have no idea what have I done wrong. I'll remind you last time that I'm a complete beginner, so expect me to be kinda dumb.

This is how my div I want to make looks like

            <div class="cpu_name">
                CPU name: <span id="cpu-name">-</span>
            </div>
            <div class="cpu_cores">
                CPU cores: <span id="cpu-cores">-</span>
            </div>
            <div class="cpu_temperature">
                CPU temperature: <span id="cpu-temperature">-</span>
            </div>
        </div>

Also, I didn't forget to use script

<script src="./renderer.js" defer type="module"></script>
<script src="./js/window.js" defer type="module"></script>

Next thing I've done was adding it into the renderer.js I created var linked to the #cpu-name

const CPU_NAME = document.getElementById("cpu-name");

Then I created getCpuName() function

async function getCpuName(){
    const name = await app.cpuName();
    const cpu_name = name.manufacturer;

    updateCpuName(cpu_name);
}

Since I called a updateCpuName() method, I created one

function updateCpuName(cpu__name){
    CPU_NAME.innerText = cpu__name;
    console.log(cpu__name);
}

Next thing I've done was adding it into the preload.js. I've done the preload.js by tutorial, because I don't really uderstand everything there yet... This is my whole preload.js script

const os = require("os");
const { ipcRenderer, contextBridge } = require("electron");

const API = {

    window:{
        close: () => ipcRenderer.send("app/close"),
        minimize: () => ipcRenderer.send("app/minimize"),
    },

    cpuUsage: (data) => ipcRenderer.invoke("cpu/get", data),
    cpuName: (data)  => ipcRenderer.invoke("cpu/name", data),
}

contextBridge.exposeInMainWorld("app", API);

But this cpuName: (data) => ipcRenderer.invoke("cpu/name", data), is the only important thing here. Last thing I did was adding it into the index.js. So I basically created const with systeminformation

const {currentLoad, manufacturer,  cpu } = require("systeminformation");

and then made a ipcMain.handle();

ipcMain.handle("cpu/name", async (_, data) => {

    const name = await manufacturer();
    return name;


});

I know for sure I've done something wrong, but I'm not able to figure out what. It's just fun project I'm working on to get better in it. Thank you for even just reading this ^-^

Answer 1

There is an npm module called systeminformation (https://www.npmjs.com/package/systeminformation) that will help you with this. I have never accessed the CPU using electron or this module, but the module seems very easy to use and is very well documented.

Please also look at the "Known Issues" section of the module readme. Some additional dependencies are required for checking CPU temperature, so you might want to look at that too!