I thought of this idea when I started to play around with javascript build files that are transpiled with babel and bundled with Webpack. I wanted to build a project to reduce the number of heavy javascript files on a webpage at any given time. The more javascript files you have, the more computing power you need to execute those and the more battery you need to use. I wanted to build a more sustainable way of accessing websites with the goal of lowering your battery consumption.

What it does

blackhole can:

  • Reduce webpage size after load
  • Cache Javascript
  • Webpage Color Reduction

blackhole takes a webpage and removes javascript files that are put into the browser's javascript job queue engine. blackhole uses a clever technique to reuse cached javascript files that are already loaded into memory. blackhole, is not a script blocker. This is what makes blackhole unique. Unlike a script blocker, blackhole allows the client to run frameworks such as React and Vue without running into errors.

How I built it

blackhole was build using javascript and the chrome extension engine. It uses an injected content script that every webpage receives and it uses the chrome local storage engine to store caches of any webpages.

Challenges I ran into

The biggest challenge I ran into was perfecting the javascript caching engine. It took a while to perfect this as I wanted applications such as React and Vue to work with my extension.

Also, this was my first time building a legitimate chrome extension ( not just a hello world :) ), and so learning how to use chrome's extension API was another learning curve.

Accomplishments that I'm proud of

I am proud of how fast blackhole works. I was aware that the extension would be useless if it took longer than the actual page load time. This is why I optimized a lot of things and made sure my execution time was less than 0.01s.

What I learned

I learn a lot about how javascript is interpreted and executed on the browser. I had to do a lot of research into how chrome's V8 engine worked and how I could manipulate it to cut down on the number of javascript files.

What's next for blackhole

I would definitely like to push blackhole to its limits. Although it works, it is definitely not a finished product as there are still tons of optimizations I can think of and more ways to cut down the overall page size.

Share this project: