Colorado

Main Menu
Some Present Themes
Theme Customization Tab
Accessibility Options
An Example Website - Before Colorado
An Example Website - After Colorado Dark Theme
An Example Website - After Colorado Lavender Theme
Colorado Content Script Injected Into DOM
Web Page With Large Font Size Enabled

Inspiration

We decided to make Colorado because we wanted to find the easiest solution to recoloring a webpage before it even loads. Many websites on the web aren't 100% accessible to all people. Some are too bright, while others are too dark. With Colorado, a user can decide what color they want to see from the webpage. Flip between present themes or create your own!

What it does

Colorado manipulates the DOM as it loads into the client's view. By using the Chrome API, Colorado is able to inject custom Javascript code directly into the DOM. This allows Colorado to override all preceding code and recolor the webpage through query selectors.

How we built it

We built Colorado using Typescript and React + Typescript, Chrome Extensions, and the Chrome browser API. There are two main files that run to make Colorado work: popup.js and content.js. Popup.js is what the client sees in the popup menu when they click the Colorado extension icon. Content.js is a file that gets injected into the DOM before webpages load and performs all of the DOM manipulations.

Usually, these two scripts cannot communicate with each other, however, using the Chrome API, we can make this happen through event broadcasting and local storage.

Challenges we ran into

The biggest challenge we ran into was perfecting the DOM manipulations. Sometimes, they were too much, and sometimes they were not enough to make a difference to the client. To solve this, we visited multiple websites and sampled several HTML tags that were used the most in the body. Although this technique still doesn't help solve DOM manipulations for websites that use their own structure, it certainly covers a large majority.

Accomplishments that we're proud of

We are proud of getting the Chrome Extension working and being able to directly communicate with the DOM.

We are also very proud of the UI and we think it turned out very well.

What we learned

We learned that making Chrome Extensions are very fun and they have a lot of potential to change the way we perceive information on the web. If done correctly, we can help solve a lot of problems without investing so much money.

What's next for Colorado

We would like to finish up some of the ideas we had for Colorado that we couldn't finish during the Hackathon because of time constraints. This includes fully finishing the accessibility options. We also would like to have the present themes connected to a web server so that anyone in the world can share their presents with other people.