GPT-4 for personal productivity: online distraction blocker

There are many apps for blocking distracting websites: freedom.to, leechblock, selfcontrol, coldturkey, just to name a few. They are useful for maintaining focus, avoiding procrastination, and curbing addictive web surfing.

They work well for blocking a list of a few distracting websites. For me, this is not enough, because I’m spending a large portion of my time on a large number of websites, which I check out for a minute or two and then never visit again. It’s just impossible to maintain a blocklist for this long tail. Also, the web has grown so much that there are just too many easily found alternatives for any blocked distraction.

Well, GPT-4 to the rescue! With an LLM it’s possible to block websites based on the content, checking each page — if it’s distracting or useful/productive.

To test the idea I have implemented a prototype of a distraction filtering browser extension. This way, GPT-4 is turning into a personal productivity assistant!

Implementation

I just reused code from my previous similar project, which was a prototype of a parental control extension.

The extension sends the content of each loaded page to OpenAI API, and asks GPT if the page should be blocked. The prompt can be edited in the config window; the following prompt is used by default:

You are a smart web filter, a distraction blocker with goal of improving user's productivity.
Following types of pages are distracting and should be blocked:
entertainment, shopping, online stores, social networking, news, magazines, lists of links, blogs without technical/educational content.
Following types of pages are useful for work and should not be blocked:
software development, technical information, general reference, manuals, answers to technical questions
Should a web page with following content be blocked? Answer only YES or NO, followed with a newline and a brief explanation.
===
{text}

There is no backend yet, requests are sent directly from the browser. This requires using dangerouslyAllowBrowser option of the OpenAI API, and the user has to specify their own API key. Requests are cached in localStorage of the extension.

The code is on github.

Sensitive content, whitelist & blacklist.

While the extension is active, it sends a sample of each visited page’s content to OpenAI API. This might be a problem for pages with sensitive information.

You can add any domains which you do not want to expose to OpenAI to the whitelist or the blacklist. Pages that are matched are allowed or blocked without sending anything to OpenAI.

OpenAI is claiming to handle user data securely, and to not use data submitted via API for model training. Still, if you have any concerns about the privacy and security of the pages that you visit, and if you do not want to risk leaking your browsing history, avoid using this extension.

Installation and testing

To try it out, download the extension (github.com/coolvision/awf/releases/download/0.1/awf-0.1.zip), or build with npm:

npm install
npm run build

install it (instructions), and enter your API key in the extension’s config page.

Then, navigate to any page, it might get blocked:

Does it work?

I have been using it for a few days, and it does work quite well, with correct decisions in most cases.

One problem is that GPT-4 is expensive, and my usage has been up to ~$1/day. It would probably cost $10-30/month, which is not too much, but still a thing to improve.

Another issue is that OpenAI API is quite slow, it takes several seconds (up to 50-10s) to validate each page. I haven’t decided yet if it’s a feature or a problem — on one hand, it does make web browsing more mindful which is good, but then it does kill the flow/momentum when I want to quickly research something.

There should be simple ways to speed it up — It's probably not necessary to check each page, checking just a few pages per domain should be enough, but this needs more experimentation and testing.