# How to use Chrome's Prompt API in Extensions

## Metadata

- **Published:** 1/2/2025
- **Duration:** 10 minutes
- **YouTube URL:** https://youtube.com/watch?v=HjPQ3hyeXQI
- **Channel:** nerding.io

## Description

Uncover the latest features of Chrome's built-in Prompt API and learn how to harness its capabilities in your own browser extension. In this hands-on tutorial, you'll explore:

What the Chrome Prompt API offers and why it's a game-changer.
- Step-by-step guidance to integrate the API into a custom Chrome extension.
- Practical examples showcasing how to create dynamic, user-friendly prompts.

Whether you're an experienced developer or just diving into Chrome extensions, this video will help you elevate your projects with the power of the Prompt API. 🚀

👉🏻 Text Yourself: https://textyourself.app
📰 Newsletter: https://sendfox.com/nerdingio
📞 Book a Call: https://calendar.app.google/M1iU6X2x18metzDeA

🎥 Chapters
00:00 Introduction
00:37 Docs
01:31 Setup
03:37 Experimental API
04:56 Trial Origin
05:39 Code
07:36 Demo

🔗 Links
https://developer.chrome.com/docs/extensions/ai/prompt-api
https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/ai.gemini-on-device
https://googlechrome.github.io/OriginTrials/developer-guide.html

⤵️ Let's Connect
https://everefficient.ai
https://nerding.io
https://twitter.com/nerding_io
https://www.linkedin.com/in/jdfiscus/
https://www.linkedin.com/company/ever-efficient-ai/

## Key Highlights

### 1. Chrome's Prompt API for Extensions

The video demonstrates how to integrate Chrome's Prompt API into extensions, using Gemini for AI tasks within the browser.

### 2. Setting Up the Extension & Origin Trial

The video details the necessary steps, including downloading an example extension, enabling experimental APIs, and registering for an origin trial to get the API token.

### 3. Code Walkthrough & Functionality

Explanation of the code structure, including setting prompt parameters (temperature, top K) and using the API to create sessions and send prompts.

### 4. Practical Example: AI Joke Generator

The video shows a working example of an extension that uses Gemini to generate jokes based on user input, demonstrating the API's potential.

### 5. Potential Use Cases

Discusses additional applications like extracting calendar events from text and integrating them into Google Calendar using AI-powered prompts.


## Summary

Here's a comprehensive summary document of the video, designed for quick understanding:

**Document Title: Chrome Prompt API for Extensions: A Quick Guide**

**1. Executive Summary:**
This video provides a hands-on tutorial for developers on integrating Chrome's Prompt API into browser extensions. It covers the setup process, code walkthrough, and demonstrates a practical application of using Gemini (via the API) to generate AI-powered jokes.

**2. Main Topics Covered:**

*   **Introduction to the Chrome Prompt API:** Explanation of what the API is, its capabilities, and why it is valuable for extension development.
*   **Setting Up the Extension:** Step-by-step instructions on how to download an example extension from GitHub, enable experimental APIs in Chrome, and manage extensions in the browser.
*   **Origin Trial Registration:** Detailed process on applying for and obtaining an origin trial token, crucial for accessing the Prompt API's functionality.
*   **Code Walkthrough:** Explanation of the extension's code structure, including the manifest file, HTML/JavaScript components, and API calls for creating sessions and sending prompts to Gemini.
*   **Practical Example (AI Joke Generator):** Demonstration of a working extension that takes user input and leverages the Prompt API to generate jokes, highlighting the API's potential.
*   **Potential Use Cases:** Discussion of advanced applications like automated calendar event extraction and integration with Google Calendar using AI-powered prompts.

**3. Key Takeaways:**

*   The Chrome Prompt API enables developers to leverage AI models like Gemini directly within browser extensions.
*   Setting up the extension requires both enabling experimental APIs and registering for an origin trial to get a token.
*   The API allows developers to define system prompts and set parameters like temperature and top K to control the AI's output.
*   The example extension showcased a simple yet powerful use case: generating AI jokes based on user input.
*   Future applications could include automating tasks such as extracting and adding calendar events or performing content extraction.

**4. Notable Quotes or Examples:**

*   "*Last time we specifically looked at some experimental apis for the web now what we're going to do today is we're actually going to take a look at the prompt API and see how you can actually integrate it into Chrome extensions*": Introduces the purpose of the video.
*   "*Tell me a joke about AI in the Chrome browser*": Example prompt used in the joke generator extension.
*   "*Why did choma get fired from pizza delivery job tried to make a recommendations on toping see never put pineapple on Pizza it's terrible*": Example of a generated joke from the extension.
*   "*you can actually develop a Chrome extension that would take calendar events and uh basically copy that that text and actually put it directly into Google Calendar*": Illustrates a potential advanced use case.

**5. Target Audience:**

*   Chrome extension developers
*   Web developers interested in AI integration
*   Individuals exploring the capabilities of the Chrome Prompt API
*   Developers looking for practical examples of AI-powered browser extensions


## Full Transcript

hey everyone welcome to nerding IO I'm JD and today we're going to be continuing our journey on different features that are incorporated into Chrome as far as what we can leverage with AI so last time we specifically looked at some experimental apis for the web now what we're going to do today is we're actually going to take a look at the prompt API and see how you can actually integrate it into Chrome extensions so we're going to run through an example of those and uh with that let's get started all right so the first thing we're going to do is we are actually going to go into the documentation like we did in the previously uh video where we looked at translator language detector and summarizer if you haven't watched that video yet definitely suggest going back goes into uh some detail so just like before we know that this has to have a uh prompt origin trial because the status uh at least the at the time of this video is that for the web you can only use the early preview program and for the example that we're going to look at today we're actually going to look at the web extension and so you can kind of see this uh again it allows you to Define what the uh extension is and so first things first before we actually get uh our extension idea we actually have to load in an extension so we're going to take a look at how to do that the first thing is we're going to look at their Chrome extension examples and if you go down here to functional examples and the one we're going to look at is on device this one specifically uses the prompt uh API so next we actually need to manage our extensions and now that we're in here to manage our extensions once we download this so you can actually either just download it or what I did was just do a get clone so like in cursor I just pulled this repo down and I'm looking at the code specifically is not necessarily the background this is actually just showing that it's going to be a side panel but actually look at what's going to happen in this side panel and so we'll start digging into this code after we get the the extension set up so let's go back now that we know we've downloaded whether that's a get clone or you actually download it through here we're actually going to load that into our extension so first things first we go to unpacked I've already loaded this in previously so it's going to default to where I'm trying to get to but wherever you saved your folder go into your samples functional samples Gemini on device it's the entire package here so we're just going to select everything great it's already on we can go pin it if we want so that way we can easily access it let's take a look well we have an error and why do we have an error well we have an error because we have not signed up for the um the the the prompt API in our uh origin trial so let's go through that again first things we want to make sure we have is the experimental uh API setup so we've got this enabled and then we are going to go ahead and um submit a new origin uh trial so got to follow the instructions right so we know we're going to use a Chrome extension this time so we're going to come in here and we're going to register it and now we need to get our Chrome ID and so we can grab it right here going take that we're going to put it back into our origin we're just going to say I need a token we expect 0 to 10,000 and agree to the terms real quick everyone if you haven't already please remember to like And subscribe helps more than you know it's actually a great segue for today's sponsor text yourself it's an SMS app where all you have to do is text a phone number something that you want to remember and it will schedule an event to text you back to remind you it was actually built with the boiler plate that we just released for Firebase called the Firebase starter kit with that let's get back to nerding so now that we have this token we're going to go back to our project and we're actually going to look at a couple of different things that we need to do so first and foremost we have actually have to go to this manifest and we have to put in our trial token right here our uh there we're going to be using this key just as the default key but this is the the token that we just set up we can see that we are going to be using a side panel and then the rest is just a normal uh Chrome extension config the next thing that we're going to do is we are actually going to go ahead and install any package that we need and we'll take a quick look at the code just to understand a little bit about what it is and uh you can see it's fairly simple we're just taking it a prompt we're taking an input we have some sliders here for the temperature so that we can know what's going on as well as the top K and then in the index file we actually have a couple of different things so we have our initial uh defaults so we're actually seeing do we have the AI origin trial we're actually seeing what our language capabilities are and then we're configuring what our prompt values are right here uh through the slider if we then scroll down and we look at the input this is going to allow us to be able to click and run and all this is is doing is in the Run button it is allowing us to uh send our parameters that we've been picking up so again you have a system prompt that you can Define and then we are going to actually send our prompt so what this is doing is it's looking to see if there's an active session if there's not it's going to take and create a session based on our parameters to this open uh AI again this is just the the trial and and Define what our language model is and then we're actually going to just chain and actually have a prompt based on that session and get a result so in order to see this working in action what we need to do is actually do an npm build uh npm run build and then we're actually just going to go and remove our old manifest uh our old project because we actually want to use that disc folder so we're going to do the same thing we're just going to look in the on Gemini or Gemini on device we're going to click the disc we're going to load this and now what we should be able to do is actually try this out so we're going to pin this and we're going to say tell me uh choke and you can actually see we didn't get any errors right because you would have seen an error that says uh we don't have access to that M but we do so tell me a joke about AI in the Chrome browser go ahead and click run and actually try and see if there's anything happening in the Dom so we can actually see here we've got our readily and cool now we actually have our joke why did choma get fired from pizza delivery job tried to make a recommendations on toping see never put pineapple on Pizza it's terrible uh but this is like a great example of a really awesome simple Chrome extension that you can actually use a prompt going directly to Gemini they have some other use cases and if you watched the uh web AI Summit I thought this one was really cool you can actually develop a Chrome extension that would take calendar events and uh basically copy that that text and actually put it directly into Google Calendar you can think about that because if you have free text uh it it's usually difficult to figure out how to put that into the the calendar apis they're all kind of different but with this you could you could actually just use free Tex tell Gemini to actually take those chromic or take the calendar events and actually directly put it in from different things specifically on web pages or uh actually uh just do it yourself so this is there's also like a different a bunch of different things where you could do like content extraction and again different like Chrome extensions out of the box soon they'll have the uh web version of this you can imagine just having the ability to use a prompt directly in the browser on the web it's going to be hug hugely powerful all right everyone that's it for us today we went through how to actually use the prompt API specifically in a Chrome extension and get all of that set up so that we can actually leverage uh prompting and through the example that they have on their GitHub with that happy nerding

---

*Generated for LLM consumption from nerding.io video library*