Context-Aware Creator

Inspiration

Our inspiration was the universal friction we all face in online communication. We constantly rewrite text—making a quick note professional for an email, simplifying a complex article for a chat message, or summarizing a long document. This endless cycle of copying, pasting, and reformatting is tedious. We saw the new Chrome Built-in AI APIs as a historic opportunity to solve this. What if we could build a tool that was instant, completely private, and lived right in the browser? The vision was to create a seamless extension of the user's mind, making text transformation as simple and intuitive as highlighting a word.

What it does

Context-Aware Creator is a smart AI assistant that makes you a faster and more effective writer and reader on the web. The workflow is magical in its simplicity:

1. Highlight any text on any webpage.
2. Right-click the highlighted text.
3. Choose a smart, contextual action.

Instantly, the selected text is transformed right on the page. You can:

• Expand Ideas: Turn a short sentence into a detailed, professional paragraph.
• Simplify Jargon: Convert complex, technical language into simple, easy-to-understand English.
• Find Action Items: Analyze long emails or documents and extract the single most important task.
• Generate a Tweet: Create a concise, engaging social media post from any piece of content.

All of this happens 100% on your device. It's infinitely fast, works offline, and is completely private—your data never leaves your machine.

How we built it

We built Context-Aware Creator as a modern Chrome Extension using Manifest V3. The architecture is lean and robust, designed to work with the latest Chrome AI capabilities.

The core of our extension is a three-part system:

1. Background Service Worker (background.js): This script creates the right-click context menus and acts as the central controller.

2. Offscreen Document (offscreen.html & offscreen.js): This was our key technical solution. Since the modern window.ai API is only available to webpages, we use an invisible offscreen document to create a secure bridge that allows our service worker to communicate with the on-device Gemini Nano model.

3. Content Script Injection: Once the AI generates the transformed text, the service worker uses the chrome.scripting.executeScript API to inject the result directly back into the active webpage, replacing the user's original selection for a seamless "in-place" transformation.

The real "magic" comes from crafting high-quality, specific prompts that we send to the window.ai Prompt API, allowing us to use a single, powerful AI model to perform a variety of distinct and useful tasks.

Challenges we ran into

Our biggest challenge was navigating the cutting-edge (and rapidly evolving) nature of on-device web AI. Our initial research pointed towards an older API model (self.ai) that was inaccessible from the background service worker. This forced a critical pivot.

We discovered that the correct, modern window.ai API was only available in a page's DOM context. This presented a major architectural puzzle: how could our background script talk to a page-level API?

The solution was to dive deep into modern Chrome Extension architecture. We learned about and implemented an Offscreen Document, creating a lightweight, invisible HTML page solely to act as a bridge to the window.ai API. Engineering this messaging system was challenging but incredibly rewarding, as it allowed us to build our extension the "correct" and modern way.

Accomplishments that we're proud of

First and foremost, we are incredibly proud of pivoting from a flawed, confusing idea to the dead-simple and elegant workflow of "Context-Aware Creator." Recognizing a user experience dead-end and redesigning the core concept was our biggest accomplishment.

Technically, we are proud of successfully engineering the Offscreen Document solution. It was a complex challenge that required a deep understanding of the Manifest V3 architecture, and it's the robust engine that powers our entire extension.

Finally, we're proud of creating an application that truly embodies the promise of on-device AI. It's not just a demo; it's a fast, private, and genuinely useful tool that we now can't imagine browsing the web without.

What we learned

This hackathon was a phenomenal learning experience. The most important lesson was that user experience is everything. A simple idea with a flawless, intuitive workflow will always be more powerful than a complex idea that's difficult to use.

Technically, we learned the critical architectural patterns for modern Chrome extensions, especially the nuances of service worker limitations and the power of Offscreen Documents to solve them.

Most profoundly, we learned how to think with on-device AI. The focus shifts from just getting a result to creating an experience that is instant, context-aware, and respects user privacy by design. It's a new paradigm for web development, and this project was a fantastic deep-dive into its potential.

What's next for Context-Aware Creator

The future of Context-Aware Creator is even smarter context. We envision an extension that intelligently changes its available actions based on the website you're on.

• On GitHub: It could offer "Explain this code" or "Generate documentation."
• On Gmail: It could offer "Write a polite decline" or "Summarize this email thread."
• On a research site: It could offer "Format this citation (APA)" or "Find related papers."

We also plan to allow users to create and save their own custom prompts, turning the extension into a personalized AI toolkit that adapts to any workflow. The ultimate goal is to make the browser truly feel like an extension of your own mind.

Built With

• api
• chrome-built-in-ai
• chrome-extension-manifest-v3
• css3
• gemini-nano
• html5
• javascript
• offscreen-api
• prompt-api
• scripting