如何在Electron中加载外部网站并正确修改、持久化CSS？

核心问题分析 #

你的问题集中在两点：

1. nodeIntegrationInWorker: true 会干扰Google OAuth的Worker进程，导致未登录时页面空白，必须移除该配置。
2. 原preload.js用setTimeout执行DOM操作不可靠，且没有结合Electron的上下文隔离机制正确处理DOM交互。

步骤1：修正主进程配置（index.js） #

移除nodeIntegrationInWorker，保留contextIsolation: true（Electron官方推荐的安全配置）：

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

const createWindow = () => {
  const mainWindow = new BrowserWindow({
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true
    },
  });

  mainWindow.loadURL("https://gmail.com");
  mainWindow.webContents.openDevTools();
};

app.on('ready', createWindow);

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

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

步骤2：优化preload.js实现可靠的CSS修改 #

放弃setTimeout，改用两种更可靠的方式：

方案A：注入全局样式表（推荐）

直接在页面插入自定义CSS，所有匹配元素都会生效，不受元素加载时机影响，且元素重渲染后依然有效：

// preload.js
document.addEventListener('DOMContentLoaded', () => {
  const style = document.createElement('style');
  style.textContent = `
    /* 替换为你的目标元素选择器 */
    456-some large class list > div > div.flex.h-full.flex-1.flex-col.md\\:pl-\\),
    789-some large class list > div > div.flex.h-full.flex-1.flex-col.md\\:pl-\\),
    .your-ele4-selector {
      display: none !important;
    }
  `;
  document.head.appendChild(style);
  console.log("自定义CSS已注入");
});

方案B：用MutationObserver监听元素加载（适合精准DOM操作）

如果必须直接修改元素style，用MutationObserver监听目标元素的出现，避免因元素未加载导致操作失败：

// preload.js
function setupElementObserver() {
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(() => {
      const ele2 = document.querySelector('456-some large class list > div > div.flex.h-full.flex-1.flex-col.md\\:pl-\\)');
      const ele3 = document.querySelector('789-some large class list > div > div.flex.h-full.flex-1.flex-col.md\\:pl-\\)');
      const ele4 = document.querySelector('your-ele4-selector'); // 替换为ele4的真实选择器

      if (ele2 && ele3 && ele4) {
        ele2.style.display = "none";
        ele3.style.display = "none";
        ele4.style.display = "none";
        console.log("DOM元素已修改");
        observer.disconnect(); // 找到元素后停止监听
      }
    });
  });

  observer.observe(document.body, { childList: true, subtree: true });
}

document.addEventListener('DOMContentLoaded', setupElementObserver);

关键说明 #

1. 移除nodeIntegrationInWorker的原因
   Google OAuth流程依赖浏览器的Worker隔离机制，开启该配置会打破隔离，导致认证页面的Worker进程崩溃，出现空白。
2. 放弃setTimeout的原因
   第三方网站加载时间不稳定（登录页与已登录页差异明显），固定延迟的setTimeout经常会在元素未加载时执行，导致操作失效。
3. 持久化保障
   上述方案都会在应用启动时自动执行CSS注入或DOM修改，打包后每次运行都会生效，无需额外存储修改内容。

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