-
-
The BoilerBlock settings page
Inspiration
Browsing the web today means constantly clicking out of advertisements and other unwanted redirects, and our team has decided to try tackling this issue by creating a browser extension that will automatically block them.
What it does
The browser extension uses listeners to detect when a given website is redirecting you to a new address. It then will either block it or allow it to go through depending on the rules that the user has created. The user can use the settings page to create, delete, and edit these rules. Permanent chrome storage is used to have the data persist between sessions.
How we built it
We built this extension with CSS, Javascript, and HTML using chrome's webrequest api.
Challenges we ran into
We quickly discovered that our original idea to block redirects mostly did not work, so we had to think of a new way to do this during the hackathon. Other than that, we did have some bugs that took a long time to resolve, especially with the list of blocking rules on the settings page.
Accomplishments that we're proud of
We are proud that the blocker can detect both new windows and new tabs and automatically shut them down before the page is loaded, done by using the onBeforeRequest event with blocking set to true. This is especially important for malicious sites that you don't want to load at all. We are also proud that Mikaela, our UX design major, made an apple-style slide bar to turn the extension on and off.
What we learned
We learned a lot about how extensions work, as this is all of our first time creating a browser extension. We also learned how to use chrome's APIs and what limitations they have. One such limitation is that our app was built in manifest.json version 2 because it allows for persistent scripts to be loaded in the background of a browser window, however, in manifest.json version 3, this is no longer supported. I for one learned how to use chrome's storage quite well, which before this hackathon I didn't even know you could do that.
What's next for BoilerBlock
I mentioned that our app is built in manifest.json version 2, which disappointingly means that we cannot publish it to the chrome web store. In the future, I would like to research about any alternative ways to block redirects like what we are doing now but in manifest version 3. For new features, our team would like to add support for blocking and redirecting incoming requests as well as outgoing requests. We also plan on allowing the user to add a list of whitelisted urls rather than just one. One way to continue using manifest version 2 is to use it on firefox, where it can still be uploaded to the firefox browser add-ons page.
Log in or sign up for Devpost to join the conversation.