在Electron中最快速預加載腳本

背景

在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，來判斷是否在渲染進程。