utools内部实现探秘

gy2022-08-062025-05-21

前言：

utools

utools是基于electron和react构建的快捷工具箱，我也推荐大家使用这款软件来提一提使用电脑的效率和体验。
本着学习的目的，我想研究一下这款软件的运行机制，特别是插件加载相关内容。

修改main.js的几个字符

由于是商业软件，utools并不开源，我只能拿到被构建工具压缩后的版本。但是通过asar解包和代码格式化，修改main.js的几个字符即可让utools认为自己处于开发模式，让我们能够随时打开devtools一探它的奥秘。

一、模版插件的运行

需要借助的内容：

1.plugin由一个子窗口单独显示：

electron官网对创建子窗口部分的api描述如下：

Parent and child windows

By using parent option, you can create child windows:

const { BrowserWindow } = require('electron')

const top = new BrowserWindow()
const child = new BrowserWindow({ parent: top })
child.show()
top.show()

The child window will always show on top of the top window.

2.preload
为了预加载preload.js，utools利用了broswerWindow的preload属性。

另外，还有另一条不使用子窗口的技术路线：

1.webview tag webview与iframe有些类似，但是electron在webview的实现中提供了独立进程来确保安全性和独立性。

一个坑点：

如果你想在webview里边使用remote，必须在主进程里面enable相应的BrowserWindow实例，这就涉及到获取WebContentsId了。

然而dom-ready事件之后才能拿到webview webcontents的instance，在这之前貌似会返回null。

let webview = document.querySelector('webview');
// 巨坑，dom-ready之后才能拿到webcontents实例
webview.addEventListener('dom-ready', () => {
    ipcRenderer.send("utools_get_webview_webcontents_instance", webview.getWebContentsId());
});

2.contextBridge
根据electron官方文档，preload结束后全局对象window会被清理。若要在preload里往window对象上挂载自定义内容，供页面使用，需要使用electron提供的contextBridge API。它为isolated content暴露接口，提供底层调用机会。官网的具体实现例子：

// Preload (Isolated World)
const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld(
  'electron',
  {
    doThing: () => ipcRenderer.send('do-a-thing')
  }
)