DEV Community

0 seconds of 0 secondsVolume 90%
Press shift question mark to access a list of keyboard shortcuts
00:00
00:00
00:00
 
Hasan
Hasan

Posted on

1

Build an Ai Assistant Chrome Extension | Javascript | GPT | Gemini | Grok

In this tutorial, I’ll walk you through a Chrome extension that I’ve built. This is a code explanation video. The source code is attached below. This extension allows you to select any text from any webpage and instantly leverage GPT, Gemini, and Grok APIs to perform a variety of tasks like summarizing, code review, or generating responses, all with just a few clicks!

But that’s not all. Along the way, I’ll dive into the core fundamental concepts you need to know to build your own Chrome extension. Whether you’re a beginner or looking to enhance your skills, this video will help you learn how to:

Create and structure a Chrome extension.
Integrate APIs like GPT, Gemini, and Grok.
All with JavaScript

Breakdown:

Intro: 0:00
First project preview: 00:01:41
Second project preview: 00:02:34
Basic Chrome extension dev flow: 00:05:13
First project start: 00:11:20
Second project start: 00:29:00
Popup Explanation: 00:42:58
Background script explanation: 01:01:02
Content script explanation: 01:25:15

Source code? It's free! Check out on the discord ⬇️⬇️⬇️
👥 Join the community: https://discord.com/invite/WD4HATYP

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series