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.๐Ÿค˜

I Describe Myself as a Polyglot ~ Tech Agnostic ~ Rockstar Software Engineer. I Specialise in Javascript-based tech stack to create fascinating applications.