标签： electron

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 中有一些额外的变量，比如 module、exports 和 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)
}