Devlog #3: Extension UI

I finally got to the css styling. I decided on a pretty simple and minimal UI design. I also added a dark mode and a light mode to my extension. It works by toggling a button in the top right. UI is all done!

I also improved my URL handling, so now I don’t have to type in https:// every time. Almost done.

Devlog #2: iFrame + Redirect

I was working on the redirect js and i realized redirect is kinda slow for a new tab page. I did a little research and decided to pivot towards using iFrames. Once I finished this, i realized that  some sites like github don’t load inside an iframe. They send an X-Frame-Options or CSP frame-ancestors header and then the browser blocks the embed. However, I found iFrame to be way faster for the websites that it worked on so i decided to implement both.

Detecting blocked sites in iframe

With a little testing, i found that blocked iframes load almost instantly (and throw this in the console: Framing 'https://github.com/' violates the following Content Security Policy directive: "frame-ancestors 'none'". The request has been blocked.). Normal (unblocked) iframes take way longer because they actually have to load the page. I decided to choose which feature to implement based on time. If the site’s loaded under 125 ms, i treat it as a fail and redirect instead of using iframe. If it goes past 800 ms, i also redirect. iFrame works between 125 ms and 800 ms.

Blocked Sites Storage

Once a site fails, I save the url to a blocked list in localStorage and sync it to chrome.storage.local. On the next visit, this list is checked. If the url is already known to fail, i just skip the iFrame attempt completely and just go straight for the redirect

ui looks the same so code ss today

other ss is blocked iframe example

Devlog #1: Setup

I haven’t built a chrome extension since last summer so I’m a bit rusty. Set up all of my html stuff with the popup and the actual redirect part. Coming back to styling at another later time. I also started my redirect js