如何向Electron.js应用注入CSS修改？loadURL加载网页后注入CSS方法

有两种可靠的方式可以在Electron加载的网页渲染完成后注入自定义CSS，具体实现如下：

方法一：通过主进程监听页面加载完成事件注入 #

利用Electron的webContents对象的did-finish-load事件，在页面完全加载后调用insertCSS方法直接注入样式：

const { app, BrowserWindow } = require('electron');
let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false, // 禁用Node集成提升安全性
      contextIsolation: true  // 开启上下文隔离，符合Electron安全规范
    }
  });

  // 加载目标网页
  mainWindow.loadURL('https://example.com');

  // 页面加载完成后注入CSS
  mainWindow.webContents.on('did-finish-load', () => {
    const customStyles = `
      /* 自定义样式示例 */
      body {
        background-color: #f5f5f5 !important;
        font-family: 'Arial', sans-serif !important;
      }
      .page-header {
        color: #2d3748;
        border-bottom: 2px solid #e2e8f0;
      }
    `;
    mainWindow.webContents.insertCSS(customStyles);
  });
}

app.whenReady().then(createWindow);

方法二：通过预加载（Preload）脚本注入 #

预加载脚本在渲染进程上下文初始化前运行，可直接操作DOM注入样式，适合需要在页面早期注入但又要保证安全的场景：

1. 主进程配置预加载脚本

const { app, BrowserWindow } = require('electron');
const path = require('path');
let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      preload: path.join(__dirname, 'preload.js') // 指定预加载脚本路径
    }
  });
  mainWindow.loadURL('https://example.com');
}

app.whenReady().then(createWindow);

2. 编写预加载脚本（preload.js）

// preload.js
document.addEventListener('DOMContentLoaded', () => {
  const styleElement = document.createElement('style');
  styleElement.textContent = `
    body {
      background: #edf2f7 !important;
    }
    .content-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }
  `;
  document.head.appendChild(styleElement);
});

注意事项 #

• 使用!important可以强制覆盖网页原有样式，避免被优先级更高的样式覆盖。
• 始终保持nodeIntegration: false和contextIsolation: true的配置，遵循Electron的安全最佳实践。
• 如果需要动态修改样式，可以在注入后通过webContents.executeJavaScript执行DOM操作调整样式。

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