在Electron中最快速预加载脚本

Posted 2022-03-31 lovesong

背景

在Electron打开新窗口的时候，提前加载一段javascript脚本，以此内置一些属性或接口给被打开的页面。之所以要以注入方式，而不是页面自己引用，原因是不想麻烦页面自行引用，不想修改旧有的业务逻辑。

方法一

一开始是想在打开BrowserWindow后，执行executeJavaScript方法来给相应的窗口注入脚本。

不过这个方法虽然可以在相应的窗口注入脚本，但是它的执行的顺序太后，无法在页面加载时加载到，就导致了如果页面的在加载时使用了注入接口，就会有调用不到问题。

所以这个方法不可行。

PS：executeJavaScript方法，https://electronjs.org/docs/api/web-contents

方法二

后来我在new BrowserWindow([options])方法，也就是新建窗口的方法找到了一个preload参数。

const  BrowserWindow  = require(‘electron‘)
const path = require(‘path‘)
const renderProcessApi = path.join(__dirname, ‘./inject.js‘)
 
let win = new BrowserWindow(
   webPreferences: 
       preload: renderProcessApi
   
)

这个脚本文件，会在页面加载资源前就加载执行，保证了页面无论是在什么地方、什么时候调用注入接口都能调用到。

特别注意

如果窗口是在主进程创建的，估计有人就会发现注入的脚本文件会在主进程和对应的渲染进程各执行了一遍（我也不清楚为什么会有这样的效果）。

这时有可能会导致打开窗口失败，因为注入脚本中使用的对象或方法是主进程没有的，例如window对象。

解决办法是得判断脚本是在渲染进程时，才执行脚本内容。

inject.js文件：

if (require(‘electron‘).remote) 
   window.hello = function()
       console.log(‘world‘)
   

可以通过require(‘electron‘).remote，来判断是否在渲染进程。