Electron加载外部网站时，preload.js能否读取本地文件？

这个需求完全可行，核心思路是利用Electron主进程的文件访问权限，将本地图片转换为base64格式后，注入到外部网站的页面样式中。以下是两种具体实现方式：

方式一：通过Preload桥接主进程读取图片 #

这种方式适合需要在渲染进程中动态控制背景的场景：

1. 配置Preload脚本
   在preload.js中暴露安全的API，供渲染进程调用：

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

contextBridge.exposeInMainWorld('electronAPI', {
  getLocalBackground: () => ipcRenderer.invoke('get-local-background')
});

2. 主进程处理图片读取
   在main.js中监听IPC请求，读取本地图片并转换为base64：

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

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true,
      nodeIntegration: false
    }
  });

  mainWindow.loadURL('https://www.google.com');

  // 响应渲染进程的图片读取请求
  ipcMain.handle('get-local-background', () => {
    const imagePath = path.join(__dirname, 'background.jpg');
    try {
      const buffer = fs.readFileSync(imagePath);
      return `data:image/jpeg;base64,${buffer.toString('base64')}`;
    } catch (err) {
      console.error('读取背景图失败:', err);
      return null;
    }
  });

  // 页面加载完成后注入脚本设置背景
  mainWindow.webContents.on('did-finish-load', () => {
    mainWindow.webContents.executeJavaScript(`
      async function setBackground() {
        const bgUrl = await window.electronAPI.getLocalBackground();
        if (bgUrl) {
          const style = document.createElement('style');
          style.textContent = \`body { background: url(\${bgUrl}) cover no-repeat !important; }\`;
          document.head.appendChild(style);
        }
      }
      setBackground();
    `);
  });
}

app.whenReady().then(createWindow);

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

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

方式二：主进程直接注入CSS（更简洁） #

如果不需要动态控制，直接在主进程读取图片后注入样式即可：

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

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      contextIsolation: true,
      nodeIntegration: false
    }
  });

  mainWindow.loadURL('https://www.google.com');

  mainWindow.webContents.on('did-finish-load', () => {
    // 读取本地图片转base64
    const imagePath = path.join(__dirname, 'background.jpg');
    const buffer = fs.readFileSync(imagePath);
    const base64Url = `data:image/jpeg;base64,${buffer.toString('base64')}`;
    
    // 注入CSS样式
    const css = `
      body {
        background-image: url(${base64Url}) !important;
        background-size: cover;
        background-repeat: no-repeat;
      }
    `;
    mainWindow.webContents.insertCSS(css);
  });
}

app.whenReady().then(createWindow);

// 窗口生命周期处理同方式一
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

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

注意事项 #

• 确保本地图片路径正确，使用path.join处理跨平台路径，避免路径错误
• 外部网站的原有body样式可能会覆盖自定义样式，需添加!important强制优先级
• 处理图片读取异常，比如文件不存在、权限不足等情况
• 保持contextIsolation开启、nodeIntegration关闭，这是Electron的默认安全配置，不要随意修改

内容的提问来源于stack exchange，提问作者くり豆腐