Setting up Custom Proxy for Electron Webview

Image for post
Image for post

So lately I have been working on an app, a Browser on Electron and one of the requirements was to change the proxy of the browser and every instance should originate from a single IP, in short, they wanted me to set up a custom IP for the webview.

After hours of research over google, I was able to solve the problem and was successfully changed the proxy of the browser. It was quite easy to solve but since I am a newbie at electron and there was no relevant help on the internet I decided to write a medium article so the people in the future will be able to do what I did and took me hours of research, easily.

So I was using react-electron, and I had to inject the webview tag via javascript on the mount of the app, anyways I did that, and now I needed to set up a proxy for the web view, I found this.

The solution guy proposed work perfectly as he used persist webviewSession and he set up proxy rules for the persisted webview session.

Since I was using a javascript injected webview added the partition.

webview.setAttribute("partition", "persist:webviewsession");

and on main, I wait for the window read-to-show even and then I inject the proxy to the webview since I was injecting the webview on did mount method or react.js, I did the following on main.js

mainWindow.on("ready-to-show", function () {
var proxyIp = " 83.97.23.90";
var port = "18080";
if (proxyIp.trim() == "noproxy") {
var my_proxy = "direct://";
session
.fromPartition("persist:webviewsession")
.setProxy({ proxyRules: my_proxy }, function () {
console.log("using the proxy " + proxyIp);
});
} else {
var my_proxy = "http://" + proxyIp + ":" + port;
session
.fromPartition("persist:webviewsession")
.setProxy({ proxyRules: my_proxy }, function () {
console.log("using the proxy " + proxyIp);
});
}
});
Indicating the difference between the computer’s IP and the proxy IP

Written by

A Resident of the Javascript Rockstar world. I like to write about problems and their solution that I face in my life. I code because is I am good at it.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store