注意:本文基于使用vue add electron-builder搭建的项目(在vue2项目上运行vue add electron-builder命令搭建而成)
并在electron12及13测试过

在webview中开发者可以使用preload预加载并执行js文件 官方文档
官方文档
网上以及官方的很多例子都是传入一个相对路径的String,并没有以file://开头。然而我这里只能传入String字符串并且是file协议的,electron会检测是不是以file://开头,不符合就会报错
如果只能写file协议的话那必须要有一个单独的preload文件在外面,然后用file协议指向它,即

webPreferences: {
	preload: 'file://xxx/xxx/xxx/preload.js'
webPreferences: {
	preload: path.join(__dirname, '../xxx/xxx/preload.js')

下面说说三种引入preload的方案

我们可以把preload放在public下,然后通过区分生成环境和开发环境并配合使用__dirname传入不同的路径到preload属性(__dirname是指当前文件运行的绝对路径,可以通过require(‘path’)拼接点点斜杠…/来获取上层目录)。
但这里有一个很大的隐患:由于放在public下,webpack并不会处理,只是简单的复制到资源目录,用户拿到应用程序后,preload.js是源码存放在磁盘中,即使在打包后的应用程序依然可以找到preload.js文件,并通过修改它来执行恶意代码。

翻了很多教程之后无果,只能自己想办法了。想到了下面两个相对安全的解决方案

使用node的功能创建preload.js文件,然后用file协议指向它,每次执行之前都再创建一次并覆盖之前的preload.js。这样即使用户改了,也会在执行之前还原成我本身的js文件。

这个方案我没有试,感兴趣的可以去试一下,下面重点讲一下我最终使用的方案

1.配置打包preload.js文件

使用electron-builder自带的打包preload方案 Vue CLI Plugin Electron Builder官方文档
官方文档
我一开始使用的是1.4.x的electron-builder+8.1.1的electron,使用上述配置无效。后来升级到2.0.0的electron-builder和8.5.5的electron就没问题。

经过上述配置之后,无论是生产环境还是开发环境preload.js文件都是经过webpack处理的,用户无法直接看到源码,稍微增加了修改preload.js来执行恶意代码的难度

接下来就是引入的问题,如果你在主窗口中使用而非webview标签,那么你可以忽略第2点的内容了

2.引入到webview

这里可以用上面提到的方法引入到渲染进程的webview,即在渲染进程中通过区分生产环境和开发环境并配合使用__dirname传入不同的路径到preload属性。但不推荐这么做,因为渲染进程的.vue文件,与打包后的preload.js文件的目录可能会因为各种原因发生改变,而且如果不给webview开启nodeIntegration的话是无法访问__dirname的,以致于无法得到正确的路径。

这里我想到了一种较好的办法,既然官方教程是在主进程中使用path.join(__dirname, ‘preload.js’)来指向它,那这个指向肯定不会出错,比自己找相对路径要稳妥很多。既然这样那我把path.join(__dirname, ‘preload.js’)返回的路径字符串传到渲染进程中webview的preload不就行了!马上实验一下,果然可以。

主进程传值给渲染进程可以通过ipc实现,在渲染进程的created钩子中,发送消息给主进程,主进程回应preload的路径即可拿到

又或者使用global共享变量:

// 主进程background.js
function createWindow () {
  global.shareObject = {
    preloadPath: path.join(__dirname, 'preload.js')
  // Create the browser window.
  mainWindow = new BrowserWindow(...)
// 渲染进程
<script>
const { remote } = require('electron')
export default {
  data () {
    return {
      preloadPath: ''
  created () {
	this.preloadPath = remote.getGlobal('storage').preloadPath // 或者通过ipcRenderer获取
	// preloadPath赋值到webview的preload中
</script>

最近才开始学electron,感觉坑很多教程也很少。每天学习每天进步一点点,这次解决了preload的安全性问题,特此记录一下,也希望能帮到大家

注意:本文基于electron-vue项目(在vue2项目上运行vue add electron-builder命令搭建而成)并在electron8.5.5及9.0.0测试过在webview中开发者可以使用preload预加载并执行js文件 官方文档网上以及官方的很多例子都是传入一个相对路径的String,并没有以file://开头。然而我这里只能传入String字符串并且是file协议的,electron会检测是不是以file://开头,不符合就会报错(不知道是不是我配置有问题还是啥…反正只要不以
电子,Webpack 4,React和Sass 对于基于ElectronWebpack 4,React和Sass进行热重装的设置的样板,Babel将转换ES6,允许将箭头功能用作类方法,并为异步/等待提供polyfill。 通过使用mini-css-extract-plugin创建一个css文件。 npm install->卸载所有npm模块 npm run web->以测试Web浏览器的应用程序(电子主过程功能不可用) npm运行electronDebug->使用控制台输出打开电子窗口 npm运行电子->在没有控制台输出的情况下打开电子窗口 npm run bin->为Mac创建应用程序(已安装Win和Linux,编辑package.json) 我试图保持简单以激发您的灵感。 随时提出改进建议:)
使用<webview>标签,src引入需要内嵌的web页面路径,可以是本地文件,也可以是远程请求,例如src=“https://www.douyin.com/”,引入抖音官网主页 然后通过<script>引入渲染脚本 2.主窗口主进程入口文件main.js 该文件,创建主窗口,并在创建过程 通过设置webPref. 在主线程 main.js 需要打开权限 nodeIntegrationInSubFrames: true 在页面标签也需要打开权限 nodeintegrationinsubframes main.js async function createWindow() { // Create the browser window. const win = new Browser 2、安装git(不用git管理代码则不必安装) 下载地址: https://git-scm.com/ 安装成功后:系统右键菜单可看到 Git Bash Here,选择即可打开git命令终端 二、创建项目 // 创建git项目 git init // 创建git的忽略提交规则文件 touch .gitignor
Electron为网页注入js预加载准备工作main.jspreload.jspackage.json遇到的问题下一步的方向 首先我下载了一个 electron-quick-start 并安装 node.js 找到一个网页,我选择的是一个快速制作插画的网站 Picrew main.js 在main.js里可以修改弹窗的各种属性,我们需要的是 function createWindow () { const mainWindow = new BrowserWindow({ webPref
Electron基于Chromium所以可以像浏览器一样加载任何第三方网页,并且其可以对网页注入脚本,将JavaScript代码注入到目标网页并执行就像网页开发者自己开发的一样。脚本注入后可以访问该页面内的任何内容,包括网页的样式、服务端接口、Cookie等,并且你注入的脚本还可以通过Node.js访问系统资源,例如可以将网页获取的资源直接保存到本地磁盘。 脚本注入实践 1.通过preload文件注入脚本 首先使用Vue CLI Plugin Electron Builder创建Elec 1. 在Electron的主进程创建一个新的BrowserWindow。 2. 指定BrowserWindow的webPreferences.preload选项,将一个预装载的脚本文件的路径设置为它的值。 3. 在预装载的JavaScript文件,通过require('electron')来获取Electron模块,并使用它的webContents属性操作渲染进程。 4. 在渲染进程的页面上,使用Webview标签创建一个WebView元素,并将其一个属性的值设置为BrowserWindow.webContents.id,这个属性是为了将WebView与主进程的BrowserWindow关联起来。设置WebView载入的HTML文档地址。 5. 通过在主进程执行webContents.executeJavaScript()方法,将预装载的JavaScript文件定义的函数注入到WebView。 当所有这些步骤都完成之后,WebView就可以在Electron使用了。
electron The default of contextIsolation is deprecated and will be changing from false to true Error invoking remote method ‘ELECTRON_GUEST_VIEW_MANAGER_CALL‘: Error: (-3) loading vscode如何开启eslint自动格式化代码