Building a Gemini Powered Chrome Extension with Live Voice Assistant

A Quick Guide to build live app in Chrome Extension using Gemini Live API

Jun 23, 2025

∙ Paid

Google's Gemini Live API has opened up great ways to create truly interactive AI assistants. We've seen demos in Google AI Studio and even built web apps that allow users to share their screens and interact with AI via natural speech, which is a powerful setup for tutoring or on-the-job assistance. The Gemini Live API is the key part here that lets us stream both voice audio and screen captures in real-time and get a natural, spoken response from the model.

But, there's a big challenge when developing a normal website for this. These apps use the browser's built-in screen-sharing tools, which creates a problem. A user is either using their target website and can't see the assistant's interface (like the transcript or connection status), or they are on the assistant's web app, looking at a non-interactive preview of the site they want to use. It's also hard to control where this powerful tool can be used. For example, limiting the assistant to only work on educational websites is very difficult with a standard web app. For example, in the screenshot below, when you are in the AI Studio, you cannot operate your target website.

Solution

The solution is an app that can inject itself into the page, running alongside the user's active website. This allows us to display our assistant's interface without requiring the user to leave their current work. A Google Chrome Extension is the perfect tool for this job. It allows us to add our real-time chat interface and processing logic directly into the browsing experience. The serverless nature of Chrome Extension is also a solid reason for spending time on this project's development. Here is the demo video:

In this guide, we will walk through building this kind of extension from scratch. You will learn how to create a side-panel interface, manage live voice communication using a native WebSocket connection for the Gemini Live API, and capture the user's screen to give full context to the AI. This guide will give you the complete technical plan, so you can build this powerful assistant for yourself or use it as a starting point for a bigger product.

Chrome Extension 101: A "Hello World" Starter

Before we get into our complex assistant, let's look at the basics of a Chrome extension. If you've never built one, this will get you started in five minutes.

An extension is just a group of files (HTML, CSS, JavaScript) put together. The most important file is manifest.json, which tells Chrome what the extension is, what permissions it needs, and where to find its other files.

Let's create the simplest possible extension that shows "Hello, World!" when you click its icon.

1. Create a new folder: Name it hello-extension.

2. Create manifest.json:
This file is the blueprint of your extension.

{
  "manifest_version": 3,
  "name": "Hello World Extension",
  "version": "1.0",
  "description": "A simple hello world extension.",
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  }
}

(You'll need a 16x16 icon.png file, or you can remove that line for now.)

3. Create popup.html:
This is the small window that shows up when you click the extension icon.

<!DOCTYPE html>
<html>
<style>
body { width: 150px; text-align: center; }

</style>

</head>

<body>

    <h1>Hello, World!</h1>

</body>
</html>

That's it! You now have a complete, simple Chrome extension.

How to Load Your Extension into Chrome

Open Chrome and go to chrome://extensions.
In the top-right corner, turn on "Developer mode".
Three new buttons will appear. Click on "Load unpacked".
A file dialog will open. Select the hello-extension folder you just created.

Your extension will now show up in the list, and you should see its icon in your Chrome toolbar (you might need to click the puzzle piece icon to pin it). Click the icon to see your "Hello, World!" popup.

Now that you understand the basic structure, let's move on to our much more advanced Gemini Live assistant.

Keep reading with a 7-day free trial

Subscribe to Lab For AI to keep reading this post and get 7 days of free access to the full post archives.