How come I can't load system information from a node.js file into my electron html page?

Question

I am working on a project which is a client mod for a popular crypto miner. I got permission from the owners and everything. I am having an issue with loading system information from my node,js script systeminfo.js and putting it into the electron index.html file.

When I view the electron page it simply just shows the placeholder text that was already in the html. Does anyone know how I can resolve this issue? Do I need to mention the index.html in the node.js code?

This is my node.js code:

const si = require('systeminformation');

async function getSystemInfo() {
    try {
        const gpuData = await si.graphics();
        const cpuData = await si.cpuTemperature();
        const cpuUsage = await si.currentLoad();

        const gpuName = gpuData.controllers[0].model;
        const gpuTemp = gpuData.controllers[0].temperatureGpu;
        const gpuUsage = gpuData.controllers[0].loadGpu;

        const cpuName = cpuData.main;

        // Access the DOM elements using Electron's API
        const gpuNameElement = document.getElementById('gpuName');
        const gpuTempElement = document.getElementById('gpuTemp');
        const gpuUsageElement = document.getElementById('gpuUsage');
        const cpuNameElement = document.getElementById('cpuName');
        const cpuTempElement = document.getElementById('cpuTemp');

        // Populate GPU information in HTML
        gpuNameElement.innerText = `GPU Name: ${gpuName}`;
        gpuTempElement.innerText = `GPU Temp: ${gpuTemp} °C`;
        gpuUsageElement.innerText = `GPU Usage: ${gpuUsage}%`;

        // Populate CPU information in HTML
        cpuNameElement.innerText = `CPU Name: ${cpuName}`;
        cpuTempElement.innerText = `CPU Temp: ${cpuData.main} °C`;

    } catch (error) {
        console.error('Error:', error);
    }
}

document.addEventListener('DOMContentLoaded', () => {
    getSystemInfo();
});

Then this is the snippet of my html where I am trying to load the information into:

<div class="tab-pane fade" id="systemPanel" role="tabpanel">
                        <script src="systeminfo.js"></script>
                        <br>
                        <h1 style="color: white;">System Info</h1>
                        <p style="color: white;">This is a list of information about your system.</p>
                        <br>
                        <div style="display: flex; align-items: center;">
                            <h3 style="margin-right: 10px; color: white;">GPU Information</h3>
                            <img src="resources/gpu.png" width="30px" height="30px" style="filter: brightness(100%) grayscale(100%) invert(100%); vertical-align: middle;">
                        </div>
                        <p id="gpuName" style="color: white;">GPU Name: </p>
                        <p id="gpuTemp" style="color: white;">GPU Temp: </p>
                        <p id="gpuUsage" style="color: white;">GPU Usage: </p>
                        <div style="display: flex; align-items: center;">
                            <h3 style="margin-right: 10px; color: white;">CPU Information</h3>
                            <img src="resources/cpu.png" width="30px" height="30px" style="filter: brightness(100%) grayscale(100%) invert(100%); vertical-align: middle;">
                        </div>
                        <p id="cpuName" style="color: white;">CPU Name: </p>
                        <p id="cpuTemp" style="color: white;">CPU Temp: </p>
                    </div>

Does anyone have any idea what's wrong?

Answer 1

For security reasons, by default you can't use Node.js in your renderer process. If you need to get data from a Node.js code, you can use IPC and a preload file. For example:

Main

ipcMain.handle("getSystemInfo", () => {
  // Get the data you need and return them...
});

Preload

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

contextBridge.exposeInMainWorld('electronAPI', {
  getSystemInfo: () => ipcRenderer.invoke("getSystemInfo")
});

Renderer

const systemInfo = await window.electronAPI.getSystemInfo();

---

Also be aware that, by default, processes are isolated and sandboxed.