苏贝阿姨的每日代码教程又来了。 在这篇文章中html注入，苏贝阿姨介绍了如何在Electron程序加载远程页面时注入js或css代码。 该需求通常用于定制和美化现有的网络服务。 具体大家可以发挥自己的想象。 这里不做过多描述。
Electron程序，如何向主进程的远程页面注入js和css？ （图4-1）
本文的测试环境：mac/electron@5.0.7。 虽然，Electron加载本地html页面时，也可以通过本文的方法注入js或者css。 而且，虽然两者都没有必要，对吧？ 直接和html对话不是更好吗？ 所以，苏贝阿姨这篇文章的案例重点关注的是加载远程页面的案例。
基本前提
代码放置在主进程中，针对某个渲染进程进行设置。 注意：默认情况下，第二个渲染进程窗口不会注入此代码。 因此，请仔细权衡代码注入的时机。
苏贝阿姨认为代码注入的时机应该是在原始页面加载之后。 因此html注入，对于渲染进程窗口mainWindow，监控did-finish-load扰动。 在本文的代码中，mainWindow是正在操作的渲染进程的窗口对象。 这是本文的代码基础。
//const fs = require("fs")
//const path = require("path")
//...
mainWindow.loadURL('https://newsn.net')
mainWindow.webContents.on("did-finish-load", function() {
//...
//这里放注入代码逻辑
//...
});这里涉及到路径的部分使用了path.join，这是因为打包前后会有所不同。 如果不使用path.join会报错，找不到对应的文件。
Electron程序，如何向主进程的远程页面注入js和css？ （图4-2）
注入CSS
注入一小段css代码：
mainWindow.webContents.insertCSS("h3 a{background:red !important;}")
注入大块 css 代码：
//const css = require("fs").readFileSync('./insert/css.css').toString();
const css = fs.readFileSync(path.join(__dirname, './insert/css.css')).toString();
mainWindow.webContents.insertCSS(css);Electron程序，如何向主进程的远程页面注入js和css？ （图4-3）
注入js
注入一小段js代码：
mainWindow.webContents.executeJavaScript('alert("this is a test!");');注入一大段js代码：
//const js = require("fs").readFileSync('./insert/js.js').toString();
const js = fs.readFileSync(path.join(__dirname, './insert/js.js')).toString();
mainWindow.webContents.executeJavaScript(js);Electron程序，如何向主进程的远程页面注入js和css？ （图4-4）
在焦点位置输入文字
尽管 insertText() 操作相当模糊。 这个insertText()函数并没有像js或者css那样在页面代码中插入文本，并不是想象中的那样。
真实的效果是：在渲染过程的焦点位置，输入文字。 那是：
也就是说，比如手动聚焦输入的输入框，就满足这个条件。 在实际应用中，上述情况导致：这个函数insertText()可能没有用。 条件比较严格，疗效也比较差。
mainWindow.webContents.insertText("'test')")总结
在本文的案例中，有一个小细节值得注意：从代码层面来说，css的注入是在注入js的动作之上的，但是从性能层面来说，js的效果先出现，而效果则先出现。的 css 出现在之后。 真的有案例吗？
在Electron程序中，需要注入js或者css就是这样解决的。 更多电子相关经验文章请参考苏贝阿姨的博文：
【源码】本文代码片段及相关软件，请点击此处查看更多
【绝密】秘籍入口，只教给有缘人
电子
