electron 拦截下载,启动浏览器下载

一,说明

electron 不像浏览器会带下载管理,electron 页面调用下载的话,无法感知下载进度,我这里偷懒,直接丢给默认浏览器下载。

二,代码

    one_plugin_ui.webContents.session.on("will-download", (event, item, webContents)=>{
      let url = item.getURL()
      item.cancel()
      shell.openExternal(url);
      webContents.loadFile("download.html")
    })
  • one_plugin:electron的 windows
  • win-download:触发下载事件
  • item.cancel():取消electron默认下载逻辑
  • shell.openExternal:调用默认程序(浏览器)打开url
  • webContents.loadFile:加载自己定义下载界面【因为点击文件下载,会弹出新的窗口,默认是空白的,为了体验好一点,我增加一个提示下载的页面】
  • item: 对应的electron的对象 downloaditem

三,文档

downloaditem的介绍

electron 加载第三方页面,无法jquery问题

如题,这个官方问题里面已经写了解决方案,我只是记录一下方便整理

我在 Electron 中无法使用 jQuery、RequireJS、Meteor、AngularJS。

因为 Electron 在运行环境中引入了 Node.js,所以在 DOM 中有一些额外的变量,比如 moduleexports 和 require。 这导致 了许多库不能正常运行,因为它们也需要将同名的变量加入运行环境中。

我们可以通过禁用 Node.js 来解决这个问题,在Electron里用如下的方式:

// 在主进程中.
const { BrowserWindow } = require('electron')
const win = new BrowserWindow(format@@
  webPreferences: {
    nodeIntegration: false
  }
})
win.show()

假如你依然需要使用 Node.js 和 Electron 提供的 API,你需要在引入那些库之前将这些变量重命名,比如:

<head>
<script>
window.nodeRequire = require;
delete window.require;
delete window.exports;
delete window.module;
</script>
<script type="text/javascript" src="jquery.js"></script>
</head>

electron 打包 与 inno setup使用

背景

自己之前用electron-builder 在windows打包,默认安装到user local 目录,自己也对elecron-builder不熟悉,对inno setup打包比较熟悉,同时inno setup 可以任意目录,各种高级功能

过程

  • electron-builer 在windows打包
  • 找到生成目录里面的win-unpacked文件夹
  • inno setup 直接打包即可(直接可视化操作,你也可以修改脚本)

总结

这里用electron-builder 主要打包成asar而已,其实也可以完全用asar打包成asar。再用inno 打包即可

electron 安全问题思考

背景

新手使用electron 会遇遇到自己的html页面加载的Js无法使用node js功能,Preload加载干什么,上下文隔离的问题,这个对于我使用electron确实造成困扰。

关键词

  • nodeIntegration
  • preload
  • contextIsolation

详解

nodeIntegration

控制渲染进程加载页面是否能够调用node js功能,高版本默认关闭,意思就是加载的html是无法使用node js代码,如果你想用就必须设置 nodeIntegration 为 true。

preload

可以设置加载js,这个页面没有加载前就可以被调用,感觉可以用拦截器来用,具备nodejs 能力,不管nodeIntegration是否打开

contextIsolation

上下文隔离,具体是值proload 加载JS与加载普通的浏览器的dom的隔离,如果不隔离,普通页面和Preload js共享 window对象,你可以在preload js 设置 window.test = 1 ,那么普通页面页可以访问这个。在electron 12后就默认隔离上下文

为什么要这么多限制,对我们新手太不友好了?

如果你只是加载本地文件,那么全部打开都没有关系,防止你加载第三方页面导致安全问题,比喻你electron加载一个https://www.xxx.com 结果这个页面加一段electron 检测代码,然后执行恶意代码,由于你开启了nodeIntegration ,那么代码就可以跑起来。这么多限制防你引用第三方的页面,而不是开发者。但对于新手来说,可能就会带来一点门槛。

总结

按照官方的意思:preload + nodeIntegration【关闭】 + contextIsolation【开启】+普通页面开发,这样子比较安全。我感觉这样子开发有另外的好处,前端页面通用,跟node 弱关系,前端没有node js,通过proload导出函数或者对象即可。

electron 打包后路径使用问题

背景

今天自己给快速打开增加自动启动,但发现开机启动后 无法正常运行。

排查

通过开发者模式发现路径到C盘系统的目录,我原来用的process.cwd(),返回进程的当前工作目录。后面我换成process.execPath 然后通过path 模块获取文件夹路径,这样子获取一定是安装目录执行的exe。同时不要__dirname 这个代表源码目录,因为打包了,所以目录对不上。

function getexecDir(){
    var p = process.execPath;
    return path.dirname(p)
}