liquidbrain

[ScreenLike] Update 1: Why make a screen-time browser extension?

0. Preamble

I am currently at the Recurse Center where I am spending twelve weeks becoming a better programmer by doing ... whatever I want! One project I'm working on is a browser extension that I'm calling ScreenLike. In this post (one of a planned series), I'll lay out why I'm making the project, and some of the high level design decisions I'm making. (Other posts in series: 1, 2).

1. What is the problem I'm trying to solve?

Like many people, I dislike spending a lot of time on screens, and use tools to manage my use. I use iOS's built-in settings on my phone, and use LeechBlock on my computer browser. These work fairly well, and if I didn't like them, there are tens of other apps and programs I could use instead.

However, there's a problem. With all of the screen time tools I've tried, I am required to be able to distinguish between "helpful" and "not helpful" a) ahead of time and b) in the grammar of the tool. That's a lot to ask for.

Let me give you an example. Suppose that I don't want to waste hours a day watching youtube videos. I block the domain on LeechBlock and ... blam, I forgot I need to watch a video for class. So that won't work. Next, I try adding a time limit. But that means I can't listen to that obscure symphony whose only recording is on Youtube. So maybe I block based on keywords? That works until my friend sends me a video essay he made on a topic that I've blocked out.

What initially seemed like a simple preference ("less youtube") turned out to be quite complex. I want to be able to access content that I have a good reason to access (class, or because a friend made it, or background music) while blocking things are distracting. Even if you figure out a way to express that in the tool, it's a steep learning curve. And you constantly have to fiddle with your settings.1

Worse, sometimes the solution is impossible to turn into simple rules. Reddit is a very helpful resource when I am searching reviews for a new phone, but NOT when I'm procrastinating by looking at what people thought of the new iPhone 16 or whatever. The very same site can sometimes be helpful, and sometimes hurt you. One might have "work hours" or "non-work hours", but how do you specify "on task" and "off task"?

To sum up: I am trying to build a tool which a) you don't have to specify your screen-time preferences ahead of time and b) which can solve squishy classification problems.

2. My idea

As noted in the previous section, figuring out what websites to visit is a squishy problem, which is hard to pin down with rules. So I want to create a browser extension which can classify the usefulness of a website to you at a specified time. To do so, I would like to create a (statistical or ML) model to make predictions.

This requires three things:

  1. Data

  2. A prediction algorithm

  3. A mechanism for acting on predictions

2.1 Data

The first part of the extension logs your usage and your opinions on it.

It tracks a couple of basic facts about each website you visit: the url, the title, and the timestamp. (I may also add the ability to track keywords in the website content).

More uniquely, the extension will also track whether you think a certain website is "helpful" at the moment you used it. Every time you open a new webpage, there will be a popup asking whether this website is helpful to use, at this moment in time.2 The browser then tracks these responses alongside the basic facts of the website.

2.2 Prediction

I am less certain how to approach this step. Once the first step is implemented, the extension will be creating a dataset for a classification task. My current plan is to custom train an ML model for each user of the browser.

2.2.1 Why an ML model?

  • This seems like a variant of an NLP task, and so seems tractable

  • I want to learn more about ML, and this is an excuse to.

2.2.2 What are the challenges of using an ML model?

  • ML is hard to do in the browser. There is some support for deep learning in javascript, but there's less tooling and you have to keep everything small and lightweight to be able to fit.

  • Training is slow.

  • Ideally, the system would continuously update the model given more usage patterns. However, I'm not quite sure how accomplish this given a trained-model. [One alternative would be to make a "train the model on the data" button, and have the user choose when the model updates]

2.2.3 What are my alternatives?

  • Use a different type of statistical model

  • Use an LLM API and make the usage database a vector database to run RAG on.

I probably won't make this decision from first-principles, but instead by iterating on what seems tractable. Stay tuned for another post where I talk about how I chose to do this.

2.3 Acting on these predictions

Ideally, given a set of (reasonably) accurate predictions, there would be an option to act on them. This is downstream of getting the other two parts of the extension working, and I have not thought deeply about how this would work.

Most likely, I will institute an (optional) delay mechanism for websites which are likely to be distracting, but I have yet to decide the specifics.

3: What's next?

As of today, I have the very basics of data collection down. As it stands, I have three primary things to work on the roadmap. This is a side project for me right now, so I look to accomplish the following tasks over the next two to three weeks.

If you have any suggestions let me know! You can leave a comment here, start a discussion on the GitHub, or eventually send me an email (I'm still setting that up).

Appendix: Details about next steps

A.1 Building a basic UI and adding options

There are some issues that I want to address with data collection.

  • Currently, I am using `browser.confirm` to query the user about helpfulness. This works, but is janky and it's impossible to have more than two responses. I have a couple of options here, including using a `<dialog>` box or the `window.prompt` call.
  • There is a tradeoff between collecting as much data as possible and not being overly intrusive. This will likely require the addition of a settings page. I would like to add a couple of options:
    • Toggle whether a specific domain is queried (through popup)
    • Toggle whether google/bing/duckduckgo searches are queried
    • Set the percentage of times where searches are queried (settings)
  • For testing, I may track which version is being used when the toggle occurs
  • Eventually, I will need to deal with data limits and storage.
  • Finally, I don't know much about html and css, but I would like to do a little bit of nice rendering on the above options, to make things easier to follow

A.2 Packing the extension

In order for the extension to run permanently, I believe that it needs to be packaged and put on the mozilla add-ons. I may be able to distribute a beta version myself, but this is something I need to work on.

3.3 Working on the model

I will write more about this in a later post.


  1. For reference, I don't block youtube, but I do use UBlock origin's eyedropper tool to block suggested videos, shorts, and comments. This means I can listen to music and watch specific videos, but rarely fall down rabbit holes. 

  2. Asking every time may end up being too intrusive, so I will experiment with having it pop up 10% of the time, say. I will also eventually build out the capability to ignore specified websites. I discuss this more below. 

Thoughts? Leave a comment