Electron：如何将npm包中的预加载脚本注入webview组件？

你的需求完全可行，但需要注意Electron对webview预加载脚本的路径要求——它需要本地文件的绝对URL（file://协议开头），而npm包中的文件路径需要先转换为符合要求的格式。下面是具体的实现方案：

步骤1：获取预加载脚本的绝对路径 #

Node.js提供了require.resolve()方法，可以直接获取npm包中文件的完整绝对路径，不用手动拼接node_modules的路径。比如对于你的包npmPackage/lib/preloadScript.js，可以这样获取：

const preloadPath = require.resolve('npmPackage/lib/preloadScript.js');

步骤2：转换为Electron支持的file URL #

Electron的webview预加载属性需要file://开头的URL，所以我们可以用Node.js的url.pathToFileURL()方法把绝对路径转成符合要求的格式：

const { pathToFileURL } = require('url');
const preloadUrl = pathToFileURL(preloadPath).href;

步骤3：在React组件中使用 #

把上面的逻辑整合到你的React组件里，推荐用useMemo来缓存路径，避免每次渲染都重复计算：

import { useMemo } from 'react';
const { pathToFileURL } = require('url');

function MyWebviewComponent() {
  const preloadUrl = useMemo(() => {
    const preloadPath = require.resolve('npmPackage/lib/preloadScript.js');
    return pathToFileURL(preloadPath).href;
  }, []);

  return (
    <webview
      nodeintegration="true"
      preload={preloadUrl}
      src="some_website"
    />
  );
}

重要安全提醒 #

• 开启nodeintegration="true"会让加载的网页直接访问Node.js API，存在严重的安全风险，仅当你完全信任some_website的内容时才使用。
• 更安全的做法是保持默认的contextIsolation=true（Electron 12+默认开启），然后在你的预加载脚本中通过contextBridge向网页暴露必要的API，而不是直接开启node集成。

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