Zeno

How I Built a Context-Aware AI & Media Assistant to Fix My Fragmented Developer Workflow

Try Extension

We’ve all been there. You’re deep in the zone, debugging a stubborn piece of code, or analyzing a massive documentation page. Suddenly, you need a quick summary, or you just want to skip to the next track on your playlist.

What happens next? You change tabs. You open your AI assistant. You switch windows to find your music player. Your focus is shattered, and your momentum is gone.

As a developer, this constant context-switching was driving me crazy. I didn’t want to keep leaves-turning through browser tabs just to borrow a bit of machine intelligence or adjust my audio background. I wanted an assistant that lived exactly where my eyes already were: inside my active webpage.

So, I built Zeno (V2.1 Pro).

Zeno is a Chromium browser extension that functions as a powerful, context-aware AI and media companion packed inside a single sleek popup. It bridges the gap between my active browsing experience and my full-stack Python Django platform, Hero AI, without demanding that I switch focus.

Here is the story of how I engineered my way out of workflow fragmentation, tackled strict browser boundaries, and built a unified sidekick.

(Title: Zeno V2.1 Pro — Dual-View AI and Media Dashboard)

Breaking Down the Browser Walls

Building an extension that acts as both an AI data processor and a hardware-level media controller meant fighting Chromium’s strict runtime constraints every step of the way.

1. The Battle with CORS and Session States

Modern browser security blocks standard popups from hitting external APIs directly due to Cross-Origin Resource Sharing (CORS) protections. Even trickier, keeping track of who is logged in across different domains often fails when third-party cookies get blocked.

To fix this, I completely cut out direct API calls from the user interface layer. Instead, when a user types a prompt, the popup passes the data across an internal secure message bus to a persistent background service worker. Because this service worker runs out-of-process, it can act as an isolated proxy. It catches the message, cleanly appends the backend security headers and session identifiers, and makes the secure fetch request to my production server on Alwaysdata.

The result? Absolute data privacy and a seamless session that keeps you logged in without frustrating login loops.

2. The Single-Tab Media Hijack

One of my core goals was giving Zeno the ability to play music on command via an embedded assistant tab called Zuno. But early testing revealed a messy problem: every time I asked for a new song, the application would spawn a brand new browser tab. Ask for five songs over an hour, and your workspace is buried under an avalanche of muted YouTube tabs.

I solved this by writing an identity-locking window tracking engine inside the background script.

Now, when a song request is triggered, the extension runs a quick sweep across the browser to see if a YouTube tab is already active. If it finds one, it dynamically hijacks it—updating the URL to the new track and bringing it to focus instantly. If no player tab exists, it opens exactly one player window, locks onto its unique tab ID, and forces all future songs to reuse that exact same slot.

(Title: Zuno Companion Mode — Controlling Active Media Playback Centrally)

The Feature Grid: AI Meets Audio

By combining background worker proxying with targeted DOM script injection, the final build brought together a massive suite of features right into the side panel:

Zeno Plus (Context Menu Integration): You can highlight any snippet of complex code or text on a webpage, right-click, and hit "Ask Zeno Plus". The extension immediately routes that exact context to a heavy, multi-billion parameter reasoning model to explain or debug it on the fly.
Shadow Mode (Full Page Summarization): When landing on massive technical readmes or repositories, hitting the eye icon triggers a silent page content script. It extracts the raw visible text layouts (up to 40,000 characters), runs it through an ultra-fast Groq engine layer, and returns a dense summary of core takeaways instantly.
Hands-Free Voice Interruption: Using the browser's native speech recognition APIs, you can talk to Zeno continuously. It includes built-in echo protection: if Zeno is reading an answer aloud and you start speaking to correct it, it instantly cuts off its own audio synthesis loop to listen to your new command.
Direct Media Controls: Through the Zuno tab, you have full button and voice access to Play, Pause, Skip, Rewind, and even a targeted Skip Ad macro that instantly clears YouTube advertisements without requiring a manual mouse click.

Final Thoughts: Designing Around Constraints

Building Zeno taught me that when you develop inside the browser ecosystem, you don't own the workspace—you are a guest sharing resources with the user's focus.

By offloading network operations to independent service workers, keeping UI footprints lightweight, and injecting logic surgically only when an event fires, you can build remarkably powerful developer tools that feel integrated, blazing-fast, and incredibly respectful of system resources.