启用上下文隔离时，如何在Electron中用预加载脚本添加Web Components

核心思路是绕开预加载脚本的上下文隔离限制，在**渲染进程的主世界（页面全局上下文）**中执行Web Components的注册逻辑，同时保留contextBridge的IPC安全通信机制。以下是具体实现方案：

1. 基础方案：通过预加载脚本注入注册代码 #

预加载脚本无法直接访问渲染进程的customElements，但可以借助webFrame.executeJavaScript将注册代码注入到页面的全局上下文（主世界）中，这里不受上下文隔离限制。

预加载脚本示例（preload.js） #

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

// 保留你的contextBridge IPC通信逻辑
contextBridge.exposeInMainWorld('electronAPI', {
  // 你的IPC方法，比如：
  sendMessage: (data) => ipcRenderer.send('message', data),
  onMessage: (callback) => ipcRenderer.on('reply', (_, data) => callback(data))
});

// 页面DOM加载完成后注入Web Components注册代码
document.addEventListener('DOMContentLoaded', () => {
  webFrame.executeJavaScript(`
    // 注册自定义Web Component
    class MyCustomElement extends HTMLElement {
      constructor() {
        super();
        // 组件内部逻辑
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = \`
          <style>
            .container { padding: 16px; background: #f0f0f0; }
          </style>
          <div class="container">我的自定义组件</div>
        \`;
      }
    }
    customElements.define('my-custom-element', MyCustomElement);
  `);
});

2. Vue Web Components适配方案 #

若你需要使用Vue封装的Web Components，需解决ssrContext.modules报错问题——本质是因为默认打包配置包含SSR逻辑，而Electron是纯客户端环境，需调整Vue打包配置：

Vue + Vite配置示例（vite.config.js） #

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [
    vue({
      customElement: true // 启用自定义元素模式，禁用SSR相关逻辑
    })
  ],
  build: {
    lib: {
      entry: 'src/components/MyVueComponent.vue', // 你的组件入口
      formats: ['es'] // 输出ES模块，方便页面加载
    },
    rollupOptions: {
      external: ['vue'], // 避免打包Vue核心代码
      output: {
        globals: { vue: 'Vue' } // 全局引用Vue
      }
    }
  }
});

注入Vue组件到页面 #

打包后得到ES模块文件，在预加载脚本中注入加载逻辑：

// preload.js
document.addEventListener('DOMContentLoaded', async () => {
  // 加载打包后的Vue组件（注意路径需为Electron可访问的绝对路径）
  const componentPath = require('path').resolve(__dirname, '../dist/my-vue-component.es.js');
  await webFrame.executeJavaScript(`
    import('${componentPath}');
  `);
});

3. 第三方网站DOM修改方案 #

若需向第三方网站添加已注册的Web Components，可通过contextBridge暴露操作方法，让页面全局上下文调用：

预加载脚本添加暴露方法 #

// preload.js
contextBridge.exposeInMainWorld('componentAPI', {
  addCustomElement: (parentSelector) => {
    webFrame.executeJavaScript(`
      const parentEl = document.querySelector('${parentSelector}');
      if (parentEl) {
        const customEl = document.createElement('my-custom-element');
        parentEl.appendChild(customEl);
      }
    `);
  }
});

页面中调用（第三方网站环境） #

// 可在页面控制台或第三方网站脚本中执行
window.componentAPI.addCustomElement('#target-container');

额外注意事项 #

• 若第三方网站加载缓慢，可监听Electron主进程的dom-ready事件，确保页面完全加载后再注入代码：

  // main.js
  mainWindow.webContents.on('dom-ready', () => {
    mainWindow.webContents.executeJavaScript(`
      // 注册或添加组件的代码
    `);
  });
  

• 确保Web Components代码符合规范（如继承HTMLElement、正确使用Shadow DOM等）。

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