One night over a week ago, I had this sudden, random urge to try making a Chrome extension. I have no idea why, and I didn’t even know what to make. And then I remembered my colleagues at work complaining about how it was such a hassle to have to add the port number to access our internal website on their personal computers.

Of course, at that time, we searched and found there are many (too many) chrome extensions that changes parts of a URL. But then I thought, why not? It seems easy enough and I can satisfy this weird urge and it doesn’t have to have many features. It can just be simple. As simple as taking a URL and changing it to another.

And so, I started working on this small chrome extension. I read the introduction and a few other parts of the documentation page, made a separate folder for this mini project, and started making the necessary files. The icon was a simple solid green-colored square just because green is my favorite color.




I made a simple Options page so I can enter the URLs I want to change and to what URL I should change it into. I kept the HTML page simple because it doesn’t really matter. As for the code, I’ve never really used JavaScript even if I have read JS code before. But well, it was mostly reading and updating values on the UI and binding commands to the buttons so it wasn’t too complicated. I did look through some examples on saving the options to storage though and using the API. I also wasted quite some time rewriting my code because it wasn’t working, only to find out I just forgot to add the storage permission in the manifest.json file.


Anyway, after all that was done. I moved on to actually redirecting the URL. I needed to add a listener to chrome.webRequest.onBeforeRequest so that I could get any entered URL and redirect it to some other URL. I looked around and there are other ways to achieve what I’m trying to do. But I ended up using this one, anyway. If I do decide to improve this mini project, I will have to do more in-depth reading on the documentation and the differences between similar APIs in order to use the appropriate one. For now, as long as it works, I guess.

Simplified, the code is something like this:

 function(details) {
//newUrl is based on details.url as well as the options the user set
 return {redirectUrl: newUrl};
 {urls: ["<all_urls>"]},

What took a lot of my time, though, was forgetting that the code runs asynchronously. I got so irked because I couldn’t understand why the redirection wasn’t using options I had added. I made sure they were saved properly and I made sure they were loaded “first” in the background script. So why? And when I finally figured out it was async and I just had to make callbacks, I got even more annoyed that something like this took so long to discover. *sigh* I need more patience.

Anyway, after it worked. I added a very small “additional feature” where instead of exact URL matches, the user can add an asterisk at the end of the URL they enter in the options page to indicate that it will match as long as the base URL is correct.

By this time, I was satisfied and was no longer in the mood to continue so I doubt there will be improvements to this, especially because there are already existing extensions that do the same (better) job. But who knows? I might want to learn how to properly do this in the future because obviously something I made in 5 hours from scratch (including reading the chrome extension documentation and learning basic JavaScript) is not secure, and there is most likely a better way to do things.

I’m not even sure if a chrome extension is the best thing for this job….

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Blog at

Up ↑

%d bloggers like this: