Writing a Simplest VPN Chromium Extension Ever.

👋, Imagine you have a proxy server, and you have been asked to create a VPN Extension, how would you do it? 😎I had to a similar task and I was asked to create a simple VPN server that will be used by our office staff, and after a bit of research I was able to create, what I hate the most is the very lack of supporting help guides for the beginners over the internet, this is the reason why I decided to write my own guide on how you can make a simple chromium-based browser’s extension.

Let’s get started 🏃‍♀️, first you need to set up an extension boilerplate, you can even create one, all you need is an HTML, js, and a manifest file. You can clone this repo https://github.com/MahbbRah/chrome_extension_boilerplate 📃

Edit Your manifest file, you will need permission to change the proxy settings so just add this. 💻

All of the chromium-based browsers have a chrome API running, and chrome API provides the solution for modifying the proxy of the browser, you learn more about it from here https://developer.chrome.com/extensions/proxy

Anyways you can set up a proxy by Proxy auto-config script, 🤓A Proxy Auto-Configuration (PAC) file is a JavaScript function that determines whether web browser requests (HTTP, HTTPS, and FTP) go directly to the destination or are forwarded to a web proxy server. It more like an instruction

In the above 👆 script, we are instructing to re-route every single request through Proxy, you can also change it to bypass proxy on some of the websites or use the proxy on a selective host like this. 👇

Anyways to set up the proxy you can just give the PAC script 👇

To Reset the proxy, write this. 👇

Simply you can just add two buttons on your HTML page to connect and disconnect like this. 👇

and You js file can look this this 👇

That’s it.🤘