Eye Care

Inspiration

Usually, our eyes would feel fatigued after looking at the screen for a long period of time, and require a break. There is this rule, "20 20 20", which means to look 20m for 20 seconds every 20 min, recommended by opticians to protect our eyes. In addition, devices emit harmful blue light which is more damaging to our eyes. As most people use their web browsers a lot everyday to consume content, we decided to create a Web Extension to filter websites, so that users can be protected. It also helps in the portability of the software, as it can run wherever there is a browser, even on Firefox Nightly on Android, where loading of arbitrary add-ons are allowed.

What it does

It uses the WebExtensions API (tabs, alarms, etc), to display an overlay over the current page to remind the user to take a break. It also draws another translucent overlay which blocks blue light.

How we built it

We used the WebExtensions API, which is supported by major browsers. We initially used ReactJS, but we found that it does not work well with extensions, hence we wrote our extension in vanilla HTML/CSS/JS. As Chrome does not support the browser namespace with promises, which is proposed by the W3 Browser Extensions group, we could not support Chrome and Chromium-based browsers. Firefox and Safari (Gecko & WebKit) are supported.

Challenges we ran into

We initially tried to develop the project in ReactJS, but it did not play well with the extension tools, background and content scripts, and Live Reload did not work, which meant we had to wait for the project to build each time we want to see a change. With a vanilla project, we can use web-ext to run and build the project, with Live Reload which brought much convenience. We also spent a long time getting the background scripts to communicate with the content scripts, and this was further exacerbated by the lack of examples and complicated documentation.