Electron
最近想给上次鼓捣出的 搜索 App 加个搜索当前页面文字的功能。
开工前，觉得这应该是个有现成解的问题，很快找到了一个 Electron 组件 electron-in-page-search。看了一遍项目的 READEME，觉得是个认真的项目，文档也算丰富，提供了示例代码，心想应该不用花太多时间便能收工了。
但开始动手后，便很快发现了问题。因为对 Electron 不够熟悉，不知道示例代码该“贴”到哪里！
急切地看了下 Electron 的入门文档，了解到可以利用 BrowserWindow 的 preload 属性，注入一个脚本文件。又看了下之前由 Nativefier 生成的代码，它已经写好了一个 preload.js 实现，其中预留了一个扩展点，../../inject/inject.js，如果这个文件存在，preload.js 就会加载它。
var needToInject = _fs2.default.existsSync(INJECT_JS_PATH);
if (needToInject)
require(INJECT_JS_PATH);
Nativefier 真是贴心，不要辜负它，在 ../../inject/ 目录下创建出 inject.js，填入 electron-in-page-search 的示例代码
Paste_Image.png
const searchInPage = require("electron-in-page-search").default;
const remote = require("electron").remote;
const searchInWindow = searchInPage(remote.getCurrentWebContents());
searchInWindow.openSearchWindow();
重新打开 App，可以看到页面右上角，出现了预期的搜素框。
示例效果
接下来，为了更符合平时的软件使用习惯，想在 App 的菜单栏中，添加一个菜单项，Find In Page，并绑定一个快捷键，⌘F。页面显示时，不显示搜索框，菜单项被触发时才显示出来。
在 main.js 中找到定义菜单的地方，仿照其他已存在的菜单项，添加新菜单项的配置
function createMenu(_ref) {
...
var template = [{...
},{
label: 'Find In Page',
accelerator: 'CmdOrCtrl+F',
click: function click() {
// showSearchInWindow();
}
}, ...];
var menu = _electron.Menu.buildFromTemplate(template);
_electron.Menu.setApplicationMenu(menu);
}
运行程序，看下效果
添加菜单
这里预留了一个未实现的 showSearchInWindow 方法 ，作用是显示搜索框。那么问题来了，在 main.js 中如何执行 searchInWindow.openSearchWindow() 这行代码呢？
这里要补充下前文跳过的 Electron 中主进程和渲染进程两个概念。
main.js 运行在主进程中，而 preload 引入的脚本文件，运行在渲染进程中。
另外一方面，一个浏览器实例，可以有多个浏览窗口，但只会有一个菜单栏, 共享给所有浏览窗口。菜单栏定义在主进程，每个浏览窗口都是一个独立的渲染进程，而像搜索框这样的与浏览窗口相关的对象，也需要是产生和运行在对应的渲染进程上，这也是前面将示例代码放在 inject.js 中的原因。
搞明白这些，就能想到，并不能将 searchInWindow 对象定义在主进程上，来让菜单被点击时，调用该对象的方法。可行的方式是，当菜单被点击时，让主进程通知渲染进程，间接地达到目的。
于是我们需要了解，在 Electron 中，主进程如何和渲染进程通信
In Electron, we have several ways to communicate between the main process and renderer processes. Like ipcRenderer
and ipcMain
modules for sending messages, and the remote module for RPC style communication.
这里提到了两种方式，第一种方式提到了 ipcMain 和 ipcRenderer。IPC，有些读者看到这个词应该不陌生，Inter-Process Communication，进程间通信，看名字就觉得，这种方式就够用了。再参考下链接中的示例代码，编写如下实现
在 main.js 中
var showSearchInWindow = function () {
mainWindow.webContents.send('find-in-page');
};
在 inject.js 中
ipcRenderer.on('find-in-page', (event, arg) => {
console.log(' ipcRenderer find-in-page');
search.openSearchWindow();
});
可以看到，主进程发出了 find-in-page 这个事件，在渲染进程中我们监听着这个事件，当事件发生时，执行相应的操作。
回顾一下，主进程和渲染进程，是 Electron 中最基础的两个概念，并不复杂，但要明确区分。preload 是 Electron 为浏览窗口预置的一个扩展点，执行时机是在页面的其他脚本执行之前。
此次分享，实际上省略了一些爬坑的过程，比如调试，比如 nodeIntegration，后面希望有机会再作些探索，写一些这些方面的内容。
网友评论