electron程序，如何在主进程远程页面中注入js及css？

我们相信：世界是美好的，你是我也是。平行空间的世界里面， 不同版本的生活 也在继续...

每日一篇的苏南大叔写代码教程，又来了。在本文中，苏南大叔描述的是，在 electron 程序加载远程页面的时候，如何注入 js 或者 css 代码。这个需求，一般用于定制美化已有的某项网络服务。具体的嘛，您自己发挥您自己的想象力吧。这里不做过多描述。

本文测试环境： mac / [email protected] 。其实， electron 加载本地 html 页面的时候，也是可以通过本文的方法注入 js 或者 css 的。但是，似乎没有那个必要了，对吧？直接写到 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() {
  //...
  //这里放注入代码逻辑