简单结论
BrowserWindow使用loadURL接口后，如果想要使用JavaScript脚本，且脚本中会调用到electron自身的API，例如ipcRenderer与主进程进行通信或remote版本，则必须通过webContent的preload参数注入脚本，将electron接口暴露给第三方网页的环境中才可以进行调用。以下是简单记录。
需求
我在使用Electron内BrowserWindow的loadURL接口加载第三方网页后，想对网页的原生内容进行一定修改，为网页内特定元素添加不同的右键菜单，例如对img标签元素可以添加下载，查看大图等右键菜单。
解决的思路
第三方网页起始也是属于渲染进程，而右键菜单的生成显示是属于Electron的主进程的内容，因此很容易想到实现是渲染进程与主进程之间的通讯问题，在渲染进程：对不同的DOM元素添加右键事件，右键事件向主进程发送需要显示右键菜单的信息，主进程再通过发来信息中的内容不同，显示不同的右键菜单。
实现中的踩坑
注：已经打开BrowserWindow的webPreferences的Node接口集成：
image
且在
vue.config.js中也打开了Node接口集成：
image
第一次是监听第三方网站成功加载后即监听did-finish-load事件，再直接通过WebContent的executeJavaScript直接执行JavaScript脚本，监听事件代码如下：
//页面加载完成后执行脚本
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() {
//向主进程发送打开右键菜单请求
let reply = ipcRenderer.send('open-select-window-context-menu',title,title_url)
console.log(reply)
}
})`)
})
结果在第三方网页的BrowserWindow的控制台中存在报错：
image
因此尝试在在控制台中输入
require('electron'),结果如下:
image
发现是无法获取到
electron的模块的。但是在本地运行的
Vue项目中的控制台输入require('electron')，则会正常获取到：
image
我查了一下，这是因为开启了vue.config.js中Node接口后，node接口可以使用require接口，且本地的vue项目中是集成了electron的环境，因此在本地的vue项目中可以正常访问node与electron的接口。而加载第三方网页的时候，应该是出于安全的考虑，不会把本地环境的electron接口暴露，需要通过preload来进行JavaScript脚本的注入，把node和electron的接口选择性的暴露给第三方网站。
解决方案
看了一下官方的文档，与preload相关的API：
image
image
可以发现contextIsolation是使得preload中暴露的electron接口更好的被保护，防止远程内容的恶意调用，用户不想暴露出来的API。然后查了下contextIsolation的详细介绍（https://github.com/electron/electron/blob/master/docs/tutorial/context-isolation.md）：
image
在低于12版本的
electron中需要手动开启，12版本以后的electron,由于我使用的是11版本，因此进行了手动开启。
image
可以了解到，
contextIsolation是使用了contextBridge来对接口进行暴露，只有通过contextBridge暴露的接口才可以在网页中进行访问，其他暴露在preload脚本中的接口不会被恶意访问，提高了安全性。
代码编写
了解之后，在加载第三方的BrowserWindow的Webpreferences添加contextIsolation以及preload值如下：
image
注：需要在
background.js（主进程文件）中先引入path
image
app.getAppPath()的值为项目目录下的dist_electron的绝对路径，因此在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的控制台中直接访问：
image
可以看到已经注入到环境中。
再在监听第三方的webContent的did-finish-load事件，在网页加载完成后，为指定的dom元素添加右击事件，再通过暴露出来的myApi.sendIpcMessage方法与主进程通信，从而显示右键菜单
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() {
//与主进程通信
let reply = myApi.sendIpcMessage(title,title_url);
console.log(reply)
}
})`)
})
再在主进程中引入ipcMain，监听open-select-window-context-menu事件，再进行右键菜单的设置显示等逻辑操作即可：
//import 通讯组件
import { ipcMain } from 'electron'
//右键菜单
import { Menu,MenuItem } from 'electron'
ipcMain.on('open-select-window-context-menu',(event,title,title_url) => {
//菜单初始化及显示等逻辑操作
....
})
最后效果菜单是可以正常展示的，不过项目有点敏感，就不做展示了
网友评论