簡單結(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)用灯谣。以下是簡單記錄潜秋。
需求
我在使用Electron
內(nèi)BrowserWindow
的loadURL
接口加載第三方網(wǎng)頁后,想對網(wǎng)頁的原生內(nèi)容進(jìn)行一定修改胎许,為網(wǎng)頁內(nèi)特定元素添加不同的右鍵菜單峻呛,例如對img
標(biāo)簽元素可以添加下載,查看大圖等右鍵菜單呐萨。
解決的思路
第三方網(wǎng)頁起始也是屬于渲染進(jìn)程
杀饵,而右鍵菜單
的生成顯示是屬于Electron
的主進(jìn)程
的內(nèi)容,因此很容易想到實(shí)現(xiàn)是渲染進(jìn)程
與主進(jìn)程
之間的通訊問題谬擦,在渲染進(jìn)程
:對不同的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ā)送打開右鍵菜單請求
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
來對接口進(jìn)行暴露,只有通過contextBridge
暴露的接口才可以在網(wǎng)頁中進(jìn)行訪問羔飞,其他暴露在preload
腳本中的接口不會(huì)被惡意訪問肺樟,提高了安全性。
代碼編寫
了解之后逻淌,在加載第三方的BrowserWindow
的Webpreferences
添加contextIsolation
以及preload
值如下:
注:需要在
background.js
(主進(jìn)程文件)中先引入path
app.getAppPath()
的值為項(xiàng)目目錄下的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
的控制臺(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)敏感,就不做展示了