Inspiration

All of us have built or used browser extensions, and we rely on a pile of them every day. That pile is the problem. Each extension does one thing, none of them share context, and each has to be set up individually, with out much personalization. Even AI tools that are able to edit pages end up forgetting everything between visits or only work for a specific url, forcing you to repeat the same requests again and again. As we thought more about this problem, we realized the opportunity was much bigger than simply replacing a collection of extensions. We could build something that remembers your preferences, adapts to your workflows, and creates a personalized experience across the entire web. It's something we would use every day ourselves, and we believe it could fundamentally improve how people interact with the web.

What it does

Lens is a Chrome extension that lets you customize websites just by describing what you want. You can select part of a page, ask Lens to change it, and see the result right away. If it looks good, you can save it as a rule that automatically runs the next time you go back to that page. Lens can also bring information across websites, like pulling assignments from Canvas into another page, using sites you're already signed into. Rules can apply to similar websites and be organized into different "lenses," like Study or Research, depending on what you're doing. The goal is to make the web adapt to you, rather than having to adapt to every website.

How we built it

We built Lens in TypeScript, using WXT and React for the Chrome extension, Next.js for the website, and Hono and Supabase for the backend. When you request a change, Lens creates a simplified representation of the page, which an AI model uses to generate a script and tests for whether it worked. We run the script on the actual webpage, check the results, and let the model retry if something fails. Once you save a change, the script is cached and runs locally without another model call. We also built a system that can securely read information from other websites through your existing browser session, then save reusable recipes for retrieving that data again.

Challenges we ran into

One of our biggest challenges was making AI-generated changes actually work reliably. Even small differences between how we represented a page and how the browser interpreted it could cause a script to fail. We ended up building a system that tests changes on the real page and sends failures back to the model. Cross-site functionality was also tricky. We had to figure out how to retrieve information from websites you're signed into without exposing cookies or credentials, while handling tabs closing, pages changing, and incomplete results. Chrome's restrictions on extensions and generated scripts added another layer of complexity.

Accomplishments that we're proud of

We're proud that we got the core experience working end to end. You can describe a change, see it applied to a real website, undo it, or save it so it comes back automatically. We also got cross-site data retrieval working, which was one of the more ambitious parts of the project. Lens can learn how to retrieve information from a website you're signed into, then use that information elsewhere, even after the original tab is closed. We also built a working rule and lens system, so these changes can persist and be organized around different workflows instead of being one-off AI interactions.

What we learned

One of our biggest takeaways was that getting AI to generate code is only part of the problem. Making sure that code works, can be undone, and continues working later is just as important. We also learned how valuable it is to separate what a user wants from how it's implemented. A rule represents the user's intention, while the actual scripts can be different for each website. This lets us reuse generated code instead of calling AI every time a page loads. More broadly, we learned a lot about Chrome extension architecture, working with the DOM, and the challenges of making AI-generated functionality reliable.

What's next for Lens

There's still a lot we want to build. One priority is making cross-site workflows more powerful, so Lens can pull specific information from one site and use it directly in another. We also want to make rules self-healing, so if a website changes and breaks a saved script, Lens can automatically repair it. Beyond that, we're planning to add syncing across browsers, sharing and importing rules, and a marketplace where users can discover lenses made by other people. Longer term, we want Lens to become a persistent personalization layer that makes the entire web work better for each person.