Create a Chrome Extension (Manifest V3) for ChatGPT
7,751 views
0

 Published On Mar 26, 2023

In this step-by-step tutorial, you'll learn how to build a Chrome extension for ChatGPT using Manifest v3 and JavaScript. Chrome extensions are powerful tools that can enhance your browsing experience by adding custom features and functionality to the browser. By the end of this tutorial, you'll have a fully functional ChatGPT extension that you can use to send prompts to ChatGPT from a single button.

👉 Boilerplate link: https://github.com/alejandro-ao/chrom...

We'll start by setting up the development environment and installing the necessary tools. Then, we'll dive into the core concepts of Chrome extensions, including background scripts, content scripts, and popup views. We'll also cover the changes introduced by Manifest v3 and how to work with them.

Throughout the tutorial, you'll follow along with a project-based approach, building the ChatGPT extension from scratch. You'll learn how to use JavaScript to interact with the ChatGPT API, display notifications, and customize the user interface. You'll also learn how to debug and test your extension.

------------------------------------------------------------------------------------------------------------------------------------------------------------
Timestamps:
0:00 Intro
1:30 Extension Boilerplate
4:53 Run it on your local browser
7:28 Manifest.json
16:47 Popup: HTML & CSS
28:45 Popup: Javascript
35:00 Send messages
45:35 Catch the messages
55:35 Send a prompt to ChatGPT
1:03:00 Send a custom prompt

show more

Share/Embed