本博客不歡迎：各種鏡像采集行為，請尊重知識產權法律法規。大家都是程序員，不要鬧得不開心。

每日一篇的蘇南大叔寫代碼教程，又來了。在本文中，蘇南大叔描述的是，在electron程序加載遠程頁面的時候，如何注入js或者css代碼。這個需求，一般用于定制美化已有的某項網絡服務。具體的嘛，您自己發揮您自己的想象力吧。這里不做過多描述。

electron程序，如何在主進程遠程頁面中注入js及css？(圖4-1)

本文測試環境：mac/electron@5.0.7。其實，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() {

//...

//這里放注入代碼邏輯

//...

});

這里涉及到路徑的部分，使用了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一樣，在頁面代碼中插入文本，并不是想象中的那樣的。

真實的效果是：在渲染進程的聚焦位置，輸入文本。就是說：頁面上有個自動聚焦的對象。

這個自動聚焦對象，要可以輸入。

也就是說比如自動聚焦的input輸入框之類的，就符合這個條件。在實際的應用中，上述條件導致：這個函數insertText()似乎也沒有什么卵用。條件比較苛刻，效果比較的不明顯。mainWindow.webContents.insertText("'test')")

總結

在本文中的例子中，有個值得注意的小細節：在代碼層面上看的話，注入css在注入js的動作前面，然而在表現層面上來看，反而js的效果最新出現，而css的效果后出現。也許是個個案？

在electron程序中，注入js或者css的需求，就是這么解決的。更多electron相關經驗文章，請參考蘇南大叔的博客文章：

如果本文對您有幫助，或者節約了您的時間，歡迎打賞瓶飲料，建立下友誼關系。

本博客不歡迎：各種鏡像采集行為。請尊重原創文章內容，轉載請保留作者鏈接。

超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生

總結

以上是生活随笔為你收集整理的css 注入,electron程序，如何在主进程远程页面中注入js及css？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。