electron的webview拦截网络响应

63 阅读1分钟
{
    "electron": "^30.0.1"
}

electron中通过注入js修改windows属性,虽然官方文档中提供了preload方法来用于webview提前执行,但是并不能成功向子窗口的windows上挂载属性,只能通过contextBridge来进行暴露在webview中,类似于主程序与渲染进程的通讯,但是在需要通过 重写第三方网站方法, 比如在重写 fetch XMLHttpRequest等方面,electron似乎显得乏力,那么在对于加载第三方网站时,通过网络请求的拦截来获取第三方方的数据,,我们通过webview的preload 来注入通过contextBridge来进行暴露的方法似乎并不可行

electron是支持插件的,意思是我们可以通过[Chrome Extensions API] 来实现,通过Chrome Extensions API 的content.js,能轻松的解决在目标window上注入修改属性的功能,首先,阅读文档

image.png

如果不希望加载到所有会话,也可以通过 session.fromPartition创建一个单独的会话示例,然后将他绑定到webview标签,如下

    const webviewSession = session.fromPartition('persist:webview-session')
    const extensionPath = path.join(__dirname, './pdd-plugin')
    webviewSession.loadExtension(extensionPath)
 <webview
    style="width: 100vw;height: 100vh;"
    src="https://www.baidu.com"
    plugins
    partition="persist:webview-session" 
/>

如此一来,便能成功通过Chrome Extensions API来实现修改目标windows属性,也可以解压缩市面插件加载到自己的electron程序中