Lock-in Chrome Extension

Inspiration

Developers use many resources on the internet to reference, utilize, and learn from to inform their decisions. However, having the internet so easily accessible can also prove to be a huge distraction and time sink. Sometimes, when faced with these distractions, developers could use a gentle reminder to stay on task and remain productive.

What it does

Our project is a Lock-in Chrome extension. When using this extension, users can enable "Focus Mode." During focus mode, users can submit the topic of the project or assignment they're working on. The extension will take this topic and send a request to a locally hosted LLM server, generating a list of 20+ relevant subtopics.

Later, when the user visits different web pages, the extension scrapes its contents. These contents are passed, along with the list of subtopics and a custom prompt, to an LLM server to determine if the user is on task or not. If the user veers off course, then the extension sends a notification telling them to focus. The focus level setting allows users to adjust how noticeable or subtle these reminders are. "Easy Mode" results in a small popup on the bottom of your screen, while "Hard Mode" results in a larger window.

Once focus mode is disabled, users receive a session summary detailing the number of sites visited and a focus score based on their browsing behavior. Additionally, the extension includes a built-in timer for users who want to work within a set time frame. When this timer expires, then focus mode is automatically disabled.

How we built it

We built the extension using JavaScript, HTML, and CSS to create the front-end popup interface. The extension logic is powered by Chrome’s Extension API, which allows us to track active tabs and analyze browsing behavior.

For generating relevant subtopics, and assessing if the user is on topic or not, we integrated a large language model (LLM). To avoid costs associated with external APIs, we used LM Studio and llama.cpp to set up a locally hosted LLM server. This server has exposed endpoints for text generation, which we sent requests to in our extension.

Challenges we ran into

Deciding on how to classify browser activity as on-task or off-task. We initially considered downloading a model from HuggingFace Transformers and adding a binary classification head; however, this would require fine-tuning on a small dataset and might take too long. Instead, we opted for using an LLM with structured output.
Prompt engineering. When trying our extension on common forum sites like StackOverflow, we ran into an issue where the LLM would answer the question on the forum instead of giving a yes or no answer. With a combination of system and user prompts, as well as structured output, we were able to enforce the behavior we wanted.
Background workers & state management. Maintaining persistent state, such as timers, focus mode status, and list of subtopics meant we had to use chrome's local storage. At the same time, we had to ensure that the local storage was cleaned whenever necessary, to avoid reusing old context.
Frontend development. Designing our UI/UX to be intuitive to use and integrating features like timers, custom topics, and browsing statistics.

Accomplishments that we're proud of

Successfully integrating LLM generated topic lists to help analyze site content.
Creating various levels of notifications based on "relevance" of site.
Designing a clean and user-friendly interface that makes it easy to enable and customize Focus Mode.
Implementing a session summary feature to give users valuable insights into their focus patterns.

What we learned

How to effectively use Chrome’s Extension APIs for tab management, notifications, and timers.
How to best integrate LLMs into future projects.
The importance of user experience design in ensuring productivity tools are effective yet non disruptive.
How to better use JavaScript, HTML, and CSS.