簡(jiǎn)單結(jié)論
BrowserWindow使用loadURL接口后，如果想要使用JavaScript腳本，且腳本中會(huì)調(diào)用到electron自身的API，例如ipcRenderer與主進(jìn)程進(jìn)行通信或remote版本，則必須通過webContent的preload參數(shù)注入腳本，將electron接口暴露給第三方網(wǎng)頁的環(huán)境中才可以進(jìn)行調(diào)用。以下是簡(jiǎn)單記錄。
需求
我在使用Electron內(nèi)BrowserWindow的loadURL接口加載第三方網(wǎng)頁后，想對(duì)網(wǎng)頁的原生內(nèi)容進(jìn)行一定修改，為網(wǎng)頁內(nèi)特定元素添加不同的右鍵菜單，例如對(duì)img標(biāo)簽元素可以添加下載，查看大圖等右鍵菜單。
解決的思路
第三方網(wǎng)頁起始也是屬于渲染進(jìn)程，而右鍵菜單的生成顯示是屬于Electron的主進(jìn)程的內(nèi)容，因此很容易想到實(shí)現(xiàn)是渲染進(jìn)程與主進(jìn)程之間的通訊問題，在渲染進(jìn)程：對(duì)不同的DOM元素添加右鍵事件，右鍵事件向主進(jìn)程發(fā)送需要顯示右鍵菜單的信息，主進(jìn)程再通過發(fā)來信息中的內(nèi)容不同，顯示不同的右鍵菜單。
實(shí)現(xiàn)中的踩坑
注：已經(jīng)打開BrowserWindow的webPreferences的Node接口集成：
且在
vue.config.js中也打開了Node接口集成：
第一次是監(jiān)聽第三方網(wǎng)站成功加載后即監(jiān)聽did-finish-load事件，再直接通過WebContent的executeJavaScript直接執(zhí)行JavaScript腳本，監(jiān)聽事件代碼如下：
//頁面加載完成后執(zhí)行腳本
contents.on('did-finish-load',() => {
contents.executeJavaScript(`
const { ipcRenderer } = require('electron')
let offers = document.querySelectorAll('CSS選擇器')
offers.forEach( offer => {
let titleElement = offer.querySelector('.title-link')
let title = titleElement.textContent
let title_url = titleElement.getAttribute('href')
offer.oncontextmenu = function() {
//向主進(jìn)程發(fā)送打開右鍵菜單請(qǐng)求
let reply = ipcRenderer.send('open-select-window-context-menu',title,title_url)
console.log(reply)
}
})`)
})
結(jié)果在第三方網(wǎng)頁的BrowserWindow的控制臺(tái)中存在報(bào)錯(cuò)：
因此嘗試在在控制臺(tái)中輸入
require('electron'),結(jié)果如下:
發(fā)現(xiàn)是無法獲取到
electron的模塊的。但是在本地運(yùn)行的
Vue項(xiàng)目中的控制臺(tái)輸入require('electron')，則會(huì)正常獲取到：
我查了一下，這是因?yàn)殚_啟了vue.config.js中Node接口后，node接口可以使用require接口，且本地的vue項(xiàng)目中是集成了electron的環(huán)境，因此在本地的vue項(xiàng)目中可以正常訪問node與electron的接口。而加載第三方網(wǎng)頁的時(shí)候，應(yīng)該是出于安全的考慮，不會(huì)把本地環(huán)境的electron接口暴露，需要通過preload來進(jìn)行JavaScript腳本的注入，把node和electron的接口選擇性的暴露給第三方網(wǎng)站。
解決方案
看了一下官方的文檔，與preload相關(guān)的API：
可以發(fā)現(xiàn)contextIsolation是使得preload中暴露的electron接口更好的被保護(hù)，防止遠(yuǎn)程內(nèi)容的惡意調(diào)用，用戶不想暴露出來的API。然后查了下contextIsolation的詳細(xì)介紹（https://github.com/electron/electron/blob/master/docs/tutorial/context-isolation.md）：
在低于12版本的
electron中需要手動(dòng)開啟，12版本以后的electron,由于我使用的是11版本，因此進(jìn)行了手動(dòng)開啟。
可以了解到，
contextIsolation是使用了contextBridge來對(duì)接口進(jìn)行暴露，只有通過contextBridge暴露的接口才可以在網(wǎng)頁中進(jìn)行訪問，其他暴露在preload腳本中的接口不會(huì)被惡意訪問，提高了安全性。
代碼編寫
了解之后，在加載第三方的BrowserWindow的Webpreferences添加contextIsolation以及preload值如下：
注：需要在
background.js（主進(jìn)程文件）中先引入path
app.getAppPath()的值為項(xiàng)目目錄下的dist_electron的絕對(duì)路徑，因此在dist_electron中新建preload.js文件，并編寫如下代碼：
const { contextBridge } = require('electron')
const { ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('myApi',{
sendIpcMessage:(title,title_url) => ipcRenderer.send('open-select-window-context-menu',title,title_url),
})
暴露出來的接口，可以在第三方webContent的控制臺(tái)中直接訪問：
可以看到已經(jīng)注入到環(huán)境中。
再在監(jiān)聽第三方的webContent的did-finish-load事件，在網(wǎng)頁加載完成后，為指定的dom元素添加右擊事件，再通過暴露出來的myApi.sendIpcMessage方法與主進(jìn)程通信，從而顯示右鍵菜單
contents.on('did-finish-load',() => {
contents.executeJavaScript(`
let offers = document.querySelectorAll('CSS選擇器')
offers.forEach( offer => {
let titleElement = offer.querySelector('.title-link')
let title = titleElement.textContent
let title_url = titleElement.getAttribute('href')
offer.oncontextmenu = function() {
//與主進(jìn)程通信
let reply = myApi.sendIpcMessage(title,title_url);
console.log(reply)
}
})`)
})
再在主進(jìn)程中引入ipcMain，監(jiān)聽open-select-window-context-menu事件，再進(jìn)行右鍵菜單的設(shè)置顯示等邏輯操作即可：
//import 通訊組件
import { ipcMain } from 'electron'
//右鍵菜單
import { Menu,MenuItem } from 'electron'
ipcMain.on('open-select-window-context-menu',(event,title,title_url) => {
//菜單初始化及顯示等邏輯操作
....
})
最后效果菜單是可以正常展示的，不過項(xiàng)目有點(diǎn)敏感，就不做展示了
