Contextual Lookup

Inspiration

Navigating new fields often feels daunting due to overwhelming jargon, acronyms, and domain-specific language. Whether reading code, analyzing financial reports, or exploring complex topics, I frequently encounter terms or syntax I don’t understand or have forgotten. Searching for every term individually is time-consuming, and asking others could mean posing an endless stream of questions.

The problem lies in context—traditional lookup workflows (such as the macOS system look up feature and simple Google searches) don’t adapt to the specific situation in which a term is used. This gap inspired me to create Contextual Lookup, a Chrome extension designed to make contextual understanding seamless and efficient.

What It Does

Contextual Lookup enhances the lookup experience by integrating relevant contextual information, such as surrounding text, page URL, and tab title, into the context of language models. Here’s how it works:

• Selecting and Hovering: Users can select text or code and hover over the thin bar that appears below the selection. The bar will gradually expand into the definition popover in a short time span.
• Tailored Responses Based on Selection
  • For words or phrases, the definition popover displays the meaning in context and includes one relevant example sentence.
  • For acronyms, it shows the expanded form and a concise, Wikipedia-style definition.
  • For code, it explains the effect of the selection in context and provides one illustrative code snippet.
• Model Options: Users can choose between Chrome's built-in AI model (browser support required) or server-side models like Gemini 1.5 Pro and Gemini 1.5 Flash-8B (OpenRouter API key required).
• Contextual Search: If the contextual definition isn’t satisfactory, users can click the search button in the popover. The extension generates a context-aware search query and opens a Google search page.
• Acronym Detection: Acronyms are automatically highlighted on web pages if the feature is enabled. Hovering over them activates the lookup function, streamlining understanding of domain-specific abbreviations.

Check out the video demo to see these features in action!

How I Built It

The extension was based on Jonghakseo’s Chrome Extension Boilerplate, which provided a robust starting point and some convenient utilities. Key technologies and techniques include:

• UI: The interface leverages React, Shadow DOM, the new native popover API, CSS anchor positioning, and shadcn/ui. Animations and transitions are powered by Framer Motion and CSS transitions.
• Context Extraction: DOM APIs and Chrome APIs were used to gather contextual data.
• AI Integration: Chrome's Prompt API enabled the use of built-in AI models. Server-side model support was added via OpenRouter API, allowing users to balance cost-effectiveness, privacy, and model precision.
• Acronym Detection: The Prioritized Task Scheduling API kept the page responsive despite intensive DOM manipulations.

Challenges I ran into

Building Contextual Lookup was an enriching yet challenging experience. Key obstacles included:

• Chrome Extension Development: This was my first attempt at creating a Chrome extension. Thankfully, the boilerplate provided an excellent foundation.
• Typing Experimental APIs: Adding TypeScript typings to experimental APIs was tricky, but extending global types solved the issue without cluttering the codebase.
• Shadow DOM: Understanding style inheritance across Shadow DOM boundaries required a significant mindset shift and adjustments to my designs.
• Popover API Integration: The native popover API’s behavior differed from existing solutions, making it difficult to integrate with Radix UI (shadcn/ui).
• Framer Motion Animations: Achieving smooth animations demanded unconventional approaches but resulted in satisfying transitions.
• AI Limitations: The built-in language model sometimes struggled with contextual understanding. This limitation drove the design of the search feature, empowering users to verify the information themselves.

Accomplishments

Despite the challenges, I’m proud of what I achieved:

• Developed a fully functional product that I use regularly and find invaluable.
• Created smooth, visually appealing animations, particularly in the bar expansion effect.
• Designed an practical search function that addresses limitations in AI-generated definitions.
• Built a unified abstraction layer, seamlessly supporting both Chrome's built-in AI and server-side models available on OpenRouter.

What I Learned

This project taught me:

• Chrome Extension Development: Gaining hands-on experience with the ecosystem and its APIs was invaluable.
• Advanced Animations: Studying the inner workings of Framer Motion deepened my understanding of UI animations.
• RPC Architecture: Writing a truly type-safe isomorphic RPC utility for communication between content scripts and service workers furthered my understanding of RPC framework design.
• Practical AI Design: I learned to work around limitations in AI capabilities and design practical solutions to address real problems.

What's Next for Contextual Lookup

The potential for Contextual Lookup extends far beyond its current features. Future improvements may include:

• Taking advantage of the extremely low cost (if any) of the built-in language models by:
  • initiating AI lookups as soon as text is selected for an even more seamless experience;
  • automatically displaying expanded terms or a helpful hint phrase inline without requiring user interaction for detected acronyms.
• Providing more context for the model, such as the web page’s outline, or even visual snapshots of the page.
• Adding translations and chat features to further broaden the extension’s utility.

Since Chrome’s built-in language models operate entirely on the client side, there’s no need to maintain a server, making it easy to scale and reach more users. I look forward to sharing Contextual Lookup with a wider audience.

Built With

• javascript
• react