Creating Chrome Extension with GPT-3 Integration

The user demonstrates creating a Chrome extension using a single prompt in CLA 3.5, successfully implementing image analysis and URL identification.

### Building a Chrome Extension with GPT-3 Image Analysis
* 🛠 The user wants to create a Chrome extension that takes a screenshot, processes it with **GPT-3's Vision API**, and saves the **URL and title** of the current webpage.
* 📝 The prompt includes step-by-step instructions for setting up the extension, including creating **manifest.json**, **popup HTML**, **popup.js**, and **background.js** files, and **loading the extension in Chrome**.
* 📦 The extension saves the **screenshot information and URL** to a file, which can be viewed in a **popup from the extension menu**.
* 🖼 The extension successfully captures and analyzes screenshots, **saving the URL** and providing a **brief description** of the webpage.
* 🎯 The project demonstrates how to use CLA 3.5 to quickly create a **simple, yet useful, Chrome extension with AI capabilities**.
* 🌐 The user plans to share the prompt on their website for others to try, highlighting the **accessibility and ease** of using CLA 3.5 for creating **custom extensions**.
* 🚀 The user emphasizes the potential of AI tools like CLA 3.5 in **enabling individuals with limited technical skills to build innovative applications**, and expresses **excitement for future projects in this space**.

I thought I could show you how you can actually create a Chrome extension using only one prompt in CLA 3.5. So we are going to use something called project here. So I just started a new project, right, and give it a name Chrome extension. We're going to set our custom instruction here in our project description here. So this is kind of the custom instruction I just like to use for projects. So basically, pretty simple. When I do coding, you're a software de with expertise in the kind of thing I want to build. So today I put down Chrome extensions, JavaScript, etc. Your task is to develop based on the instruction from the user. And I have this when you write code always use very descriptive variable names, extensive use of comments to explain code blocks. Write clean and effective code. And that is basically that I've have been using so far for all my projects, and it's been working pretty good. You can see we have some content here added to our project knowledge. This is for the extension we're going to

build. Today we're going to use GPT for o to analyze images using a simple extension. So here I kind of just went over to OpenAI and I copied from the documentation the kind of information I need. I think I need at least to build our app. So I grabbed some information about GPT-3's Vision capabilities, pasted that into a text file, and just uploaded here in our project knowledge using this upload from device. So that's very easy to set up. So I think I'm just going to go through the prompt we are going to use today to build our Chrome extension. So yeah, I'm also going to leave this prompt on my website so you can go just copy it and try it out for yourself. So let me just read through this. You can of course skip this, but I'm going to read through it so you can kind of get a gist of what we're are going to build today. So hello, I want to create a Chrome extension that uses the load unpacked feature in extensions to create a Custom

Chrome extension. I'm going to show you how to set that up. It's very easy to use. So the first thing is, when the user runs the extension and executes a browser action by clicking on the extension icon, the extension will screenshot the current screen, save the screenshot to a file named image in the current working directory, then process the image with the GBD4O API. Use documentation. Then you can see I reference the OpenAI text. We have uploaded here. So kind of we know that this is the documentation we want to use in this implementation. The second step of my extension is going to be to use GP40 to identify the URL of the web page and a title. So basically, if we find an interesting web page, we can just click on the extension and store that so we can have it saved in our notes or we can make a small note of anything that is on the screen. So I'm going to show you how I think that's going to work. And the third part is the extension should create a small popup.

that shows the gathered information from the screen and save the URL with a title uh or the notes to a file. So, this is the kind of the lookup feature. If you save a lot of notes, this file can be displayed as a popup from the extensions menu so the user can look at the save notes. And that is all I'm going to put in. I'm going to finish this prompt with Can you help me get started building this extension step by step for me, please? That is all I'm going to give it now, and hopefully this is enough to kind of create a one-shot Chrome extension. So, let's just run this now and take a look at the results, okay? So, you can see here now we kind of got our step-by-step instruction. So, step one is going to be set up our manifest.json. We're going to create a popup HTML. We're going to create a popup.js that's going to contain our logic. We're going to implement a background script called background.js, right? So, here we get kind of an implementation how we want to do

this we want to create a new directory. We want to get our opening API key, right? We want to implement the screenshot function, create icon files. So these three files just for our extension, that's going to be some icon. Uh, we're going to load the extension in Chrome, and then we're going to test it. So let me just show you how we can do this now. So I went over to VS Code Studio, just opened a new folder. I added an image folder, background.js, and I have this opening API key here that I have revoked. So I just put that in here. Uh, I created these three icons, right files. We have the manifest.json, we have the popup HTML, and we have the popup .js, right? And all of this, uh, I just found here in the answer from CLA 3.5, right? Pretty simple. Just copy this, go to Cloud, uh, find our file, paste it in, and that is basically all we need for our extension. So now I'm going to show you how we can actually set this up and start testing and see if this

actually works. To do that, you just have to go to this Chrome extensions. You will get to this page here. Then you're going to tick off something called developer mode up in here, right? So tick that off. And we're going to do something called load unpacked here. So I'm going to click on this. Then I'm going to find my folder. So this is the folder where I have all my files. So I'm just going to click select this, right? And there you can see here is our extension now. So this is the AI screenshot analyzer. We can, of course, just reload this. We can, yeah, you can see this is ticked off. We can go up in the corner here and pin this. And now we kind of have our icon up in here. And we can actually start testing this. So remember, this is supposed to analyze the screenshot and save the notes or the URL from the screenshot. So yeah, let's just test it out and see if it works, okay? So here I am on my website. So now we can

just uh find the extension up in here click it, and we can see we have capture and analyze screenshot. So I'm just going to click on that, and this has to process the image we captured, and hopefully we will get some save notes down here, yeah perfect. And now you can see uh we saved the URL on the web page we are on, and we kind of got some information about the page. So you can see it's a personal website overview. The image features some information about me right, uh and if we go back here now and we click back up on this, yeah these are the save notes we have. So that is perfect, we have the URL and we have the information. So let let's load up a different website and see if we can do the same over there, okay. So we are on the verge.com now, let's just click here, uh capture and analyze, and see if we can actually get the same uh response here. So hopefully we will get the URL, yeah that's good, and we got a small uh description of what the page is.

about uh if you go back out now and we go back in, you can see these are saved to our notes here. So yeah, I'm super happy with this. Remember, this was a one-shot prompt, right? So we only use this prompt to create this super simple but quite useful extension. So I think this just shows how easy it is to use claw 3.5. If you kind of prompt it a correct way, you explain in detail what you want, you provide uh kind of the documentation we needed for this. So this was the OpenAI documentation and yeah, super easy to use. Uh, I'm going to share this prompt on my website here. I'm just going to create a small tab here where you can find this. Uh, maybe on the homepage here, you can just find the prompt I use today. You can try it out for yourself. Of course, you could just alter kind of the input text and kind of try to create extension you want. So I think spending five minutes creating your custom uh extensions to whatever you want, I think that's so cool with this new uh.

programming thing and you don't need any technical skills almost to do this. It's a very simple, uh, step-by-step instruction you can just follow, right? So, I think everyone should be able to follow these instructions here if you have some vague technical knowledge. So, yeah, super interesting, super cool to follow this space to see what we can build using these AI tools going forward. So, very excited. Uh, I'm almost back from my holidays so there going to be more videos coming soon. No camera today but yeah, I'll be back soon. Thank you for tuning in, have a great day, and speak soon.

One-shot Prompt Custom AI Chrome Extension Tutorial feat Claude 3.5

Welcome to my channel All About AI =)

Website:
https://www.allabtai.com

How you can start to use Generative AI to help you with creative or other daily tasks.

So I aim to bring Generative AI to everyone.

- AI Engineering
- ChatGPT
- GPT-4
- Midjourney
- Stable Diffusion
- Python
- AI Automation

We will answer all your questions about ai, genereal questions about the future of ai and the ethics of artificial general intelligence.

Follow our channel if you want to get going in this space =)



All About AI

A new project named "Chrome extension" is created to develop a Chrome extension using CLA 3.

The project description includes custom instructions for coding, such as using descriptive variable names and extensive comments.

GPT-3's Vision capabilities are incorporated into the extension using information from OpenAI's documentation.

Creating a Chrome Extension with Screenshot and Note-Taking Features

The extension allows users to take a screenshot of the current screen, process it with the GBD4O API, and save the image to a file.

It also identifies the URL and title of the web page, allowing users to save notes and store them in a popup for later viewing.

The extension setup involves creating a manifest.

js for logic, and implementing a background script (background.

Setting Up the AI Screenshot Analyzer Extension

The process involves obtaining an API key, creating icon files, and implementing the extension in Chrome.

The next step is to enable developer mode in Chrome extensions and load the unpacked folder to test the extension.

Once the extension is loaded, it can be tested by taking a screenshot and using the AI to analyze and save notes or URLs.

Creating a Simple but Useful Web Extension with Claw 3.

The web extension allows users to capture and analyze screenshots, providing saved notes and the URL of the web page.

It can be easily used to gather information from different websites, making it a versatile tool.

5 proves to be user-friendly and easily customizable for creating personalized extensions.

AI programming can be easily learned without advanced technical skills.

The instructions for AI programming are simple and straightforward, making it accessible to a wide range of people.

As AI tools continue to advance, there is growing excitement about the possibilities of what can be created in this space.