Electron加载外部URL时如何为mainWindow添加自定义侧边栏

当然可以实现！不用替换掉Gmail的URL加载目标，我们可以通过注入自定义样式和脚本的方式在已加载的Gmail页面上插入侧边栏，或者用Electron的webview组件嵌套Gmail并搭配独立的自定义UI。下面是两种最实用的方案：

方案1：向Gmail页面注入侧边栏（推荐） #

这种方法直接在Gmail的原生页面中插入自定义UI，既能保留Gmail的完整体验，又能添加专属功能。核心是利用Electron的webContents API注入CSS和JavaScript，同时遵循安全最佳实践使用预加载脚本。

步骤1：编写预加载脚本（Preload Script） #

创建preload.js文件，通过上下文桥暴露添加侧边栏的方法，避免直接在渲染进程中使用Node.js API：

// preload.js
const { contextBridge } = require('electron');

contextBridge.exposeInMainWorld('customSidebarAPI', {
  renderSidebar: () => {
    // 创建侧边栏DOM元素
    const sidebar = document.createElement('div');
    sidebar.id = 'electron-custom-sidebar';
    sidebar.innerHTML = `
      <h3>我的Gmail助手</h3>
      <div class="sidebar-item">
        <button onclick="alert('快速归档已触发！')">一键归档</button>
      </div>
      <div class="sidebar-item">
        <p>未读邮件数：<span id="unread-count">0</span></p>
      </div>
    `;

    // 插入到页面最外层
    document.body.prepend(sidebar);

    // 注入样式，调整Gmail布局给侧边栏腾位置
    const style = document.createElement('style');
    style.textContent = `
      #electron-custom-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        width: 260px;
        height: 100vh;
        background: #f8f9fa;
        border-right: 1px solid #e1e5e9;
        padding: 24px;
        z-index: 99999;
        font-family: system-ui, sans-serif;
      }
      .sidebar-item { margin: 16px 0; }
      /* 调整Gmail主内容区，避免被侧边栏遮挡 */
      .nH { margin-left: 260px !important; }
    `;
    document.head.appendChild(style);

    // 可选：监听Gmail未读邮件变化（示例）
    const observer = new MutationObserver(() => {
      const unreadBadge = document.querySelector('.bsU');
      document.getElementById('unread-count').textContent = unreadBadge?.textContent || '0';
    });
    observer.observe(document.body, { childList: true, subtree: true });
  }
});

步骤2：主进程中触发侧边栏渲染 #

在你的主进程文件（比如main.js）中，等待Gmail页面加载完成后，调用预加载脚本中的方法：

// main.js
const { app, BrowserWindow } = require('electron');
const path = require('path');

function createMainWindow() {
  const mainWindow = new BrowserWindow({
    width: 1300,
    height: 850,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true, // 开启上下文隔离，安全最佳实践
      nodeIntegration: false
    }
  });

  // 加载Gmail
  mainWindow.loadURL('https://gmail.com');

  // 页面完全加载后渲染侧边栏
  mainWindow.webContents.on('did-finish-load', () => {
    mainWindow.webContents.executeJavaScript('window.customSidebarAPI.renderSidebar()');
  });
}

app.whenReady().then(createMainWindow);

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

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

这个方案的优势是完全贴合原生Gmail体验，自定义功能和原页面深度融合。

方案2：用webview组件嵌套Gmail #

如果你希望侧边栏和Gmail页面完全隔离，便于独立维护，可以让主窗口加载自定义HTML，在其中同时放置侧边栏和webview标签（用来加载Gmail）。

主窗口HTML（index.html） #

<!DOCTYPE html>
<html>
<head>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { display: flex; height: 100vh; overflow: hidden; }
    #custom-sidebar {
      width: 260px;
      background: #f8f9fa;
      border-right: 1px solid #e1e5e9;
      padding: 24px;
      font-family: system-ui, sans-serif;
    }
    webview { flex: 1; border: none; }
  </style>
</head>
<body>
  <div id="custom-sidebar">
    <h3>我的Gmail工具</h3>
    <button onclick="alert('自定义功能触发')">测试按钮</button>
    <p>这里可以添加任何独立功能</p>
  </div>
  <!-- 用webview加载Gmail，persist分区保存登录状态 -->
  <webview src="https://gmail.com" partition="persist:gmail-session"></webview>
</body>
</html>

主进程配置 #

修改main.js加载自定义HTML，并开启webview标签支持：

// main.js
function createMainWindow() {
  const mainWindow = new BrowserWindow({
    width: 1300,
    height: 850,
    webPreferences: {
      webviewTag: true, // 开启webview标签支持
      contextIsolation: true
    }
  });

  mainWindow.loadFile('index.html');
}

这个方案的优点是侧边栏逻辑和Gmail完全隔离，开发维护更简单，但需要处理webview的权限、缓存等细节。

关键注意事项 #

• 样式冲突：Gmail的CSS类名可能会随版本更新变化，需要定期调整注入的CSS选择器，确保侧边栏样式稳定。
• 安全性：始终开启contextIsolation，避免渲染进程直接访问Node.js API，防止XSS攻击风险。
• 加载时机：必须在did-finish-load事件触发后再注入脚本，确保Gmail的DOM结构完全加载完成。

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