Electron中脚本注入实践

前言

Electron基于Chromium所以可以像浏览器一样加载任何第三方网页，并且其可以对网页注入脚本，将JavaScript代码注入到目标网页中并执行就像网页开发者自己开发的一样。脚本注入后可以访问该页面内的任何内容，包括网页的样式、服务端接口、Cookie等，并且你注入的脚本还可以通过Node.js访问系统资源，例如可以将网页中获取的资源直接保存到本地磁盘中。

脚本注入实践

1.通过preload文件注入脚本

首先使用Vue CLI Plugin Electron Builder创建Electron项目。

启动Electron项目

在background.js中修改代码，直接加载'https://www.baidu.com'，并且在new BrowserWindow中添加preload属性。

// background.js
const path = require('path')  
const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
      preload: path.join(__dirname, 'preload.js')
    }
  })
  win.loadURL('https://www.baidu.com')

直接加载百度首页

在src文件夹下创建proload.js文件，再在项目根目录下创建vue.config.js配置文件，并添加配置。

// vue.config.js
module.exports = {
    pluginOptions: {
        electronBuilder: {
            preload: 'src/preload.js'
        }
    }
}

在preload.js文件中添加注入的脚本代码。

// preload.js
document.addEventListener('DOMContentLoaded', (event) => {
    // 页面内容加载之后需要引入的一些操作
    const searchButton = document.getElementById('su') // 获取搜索按钮元素
    searchButton.onclick = function (e) {
        e.preventDefault() // 阻止搜索按钮默认事件
        console.log('移动云 更安全 更智慧')
    };
})

脚本代码获取搜索按钮元素，修改按钮颜色，阻止按钮点击的默认事件，并修改为在控制台打印出“移动云 更安全 更智慧”。

脚本注入成功

以上便实现了通过preload文件的代码注入。

2.通过executeJavaScript方法注入脚本

对于只需要简单地注入一两句代码的情况，可以直接调用webContents的executeJavaScript方法即可。

win.webContents.executeJavaScript('alert("this is a test!");')

通过executeJavaScript方法实现脚本注入

结语

Electron脚本注入的作用非常大，当我们访问一个网页但不能控制从网络中读取到的页面内容，这时使用脚本注入便提供了可能性，使得可以满足一些神奇的需求。

---

来源：

移动云开发者社区https://ecloud.10086.cn/api/query/developer/user/home.html#L2FwaS9xdWVyeS9kZXZlbG9wZXIvYmxvZy9ibG9nZGV0YWlsLmh0bWw/YmxvZ19pZD1mNWQzZTNlM2M3NzA0MGRiOGE4YmU4MDc5ZmU2N2VhZA==