vue+electron加载第三方网站调用node与electron接口的踩坑记录

简单结论

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

可以发现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) => {
  //菜单初始化及显示等逻辑操作
  ....
})

最后效果菜单是可以正常展示的，不过项目有点敏感，就不做展示了

vue+electron加载第三方网站调用node与electron接口的踩坑记录