![](https://i.imgur.com/9UQ54uc.gif"){kind=small}
Friends, today I wanted to explain how to create an extension with ChatGPT. Let me continue below:
First of all, we enter ChatGPT and then we need to enter a prompt. I entered the following prompt:
And in response, it provided me with this code:
Right now, ChatGPT has given us the code and we now need to place all the codes here in a folder and add an icon. Thanks to ChatGPT's analyze feature, both Plus and Free subscribers can ask ChatGPT to 'add an icon to all the codes you wrote and turn it into a ZIP,' and after extracting, your extension is ready. However, since I have reached the analyze limit, I will create the folder and add the icon myself. I am including those steps, but users can skip the part of converting to ZIP and proceed to adding the extension to Chrome.
Adding an icon and creating a folder for the extension:
First, we now copy the codes from ChatGPT,
Then we go to our desktop and create a text document. (That's how I do it.)
Now that we have created our text document on the desktop, we rename it to manifest.JSON (after deleting the TXT format, you must write the JSON format).
Now right-click on it and choose 'Open with' option, then open it with either notepad or Visual Studio Code, and then paste the code we got from ChatGPT here and save it. (Since not everyone may have Visual Studio, I will show the steps in Notepad.)
We repeat all these steps for each code. Paying attention to file formats, we add codes like popup, background to our desktop.
Once we have finished all these steps, we right-click on our desktop, then choose new ? folder.
Then we place the necessary codes we have placed on the desktop into our folder. Then we click on that folder and open another folder, naming it 'icons.'
After that, we need to go to https://www.flaticon.com/ to set our icon image. (When ChatGPT turns into a ZIP, it only includes single-color icons.) I am currently creating an extension that lowers and increases volume so I will search for 'voice' on the site to download the necessary icons.
This was the icon I chose. Now I will download these in 16x16 and 128x128 sizes. (Although the code includes 48x48 size, this site does not have 48x48 size, so I removed it from the code.)
Now, we download the 16x16 and 128x128 sizes in PNG format. After downloading, we place the icons on our desktop. Then, we click on the folder we created and then 'icons' folder and put the downloaded icons there. But when we place them, we need to rename them according to their size. So, we need to name the 16x16 icon as icon16.PNG and the 128x128 icon as icon128.PNG. Once these tasks are complete, go to Chrome, click on the three dots on the right, then go to 'Extensions' and enable developer mode.
After that, click on the 'Load unpacked' button on the left, select where you saved the code, and then upload it to the Web Store. You can now start using it.
First of all, we enter ChatGPT and then we need to enter a prompt. I entered the following prompt:
And in response, it provided me with this code:
Right now, ChatGPT has given us the code and we now need to place all the codes here in a folder and add an icon. Thanks to ChatGPT's analyze feature, both Plus and Free subscribers can ask ChatGPT to 'add an icon to all the codes you wrote and turn it into a ZIP,' and after extracting, your extension is ready. However, since I have reached the analyze limit, I will create the folder and add the icon myself. I am including those steps, but users can skip the part of converting to ZIP and proceed to adding the extension to Chrome.
Adding an icon and creating a folder for the extension:
First, we now copy the codes from ChatGPT,
Then we go to our desktop and create a text document. (That's how I do it.)
Now that we have created our text document on the desktop, we rename it to manifest.JSON (after deleting the TXT format, you must write the JSON format).
Now right-click on it and choose 'Open with' option, then open it with either notepad or Visual Studio Code, and then paste the code we got from ChatGPT here and save it. (Since not everyone may have Visual Studio, I will show the steps in Notepad.)
We repeat all these steps for each code. Paying attention to file formats, we add codes like popup, background to our desktop.
Once we have finished all these steps, we right-click on our desktop, then choose new ? folder.
Then we place the necessary codes we have placed on the desktop into our folder. Then we click on that folder and open another folder, naming it 'icons.'
After that, we need to go to https://www.flaticon.com/ to set our icon image. (When ChatGPT turns into a ZIP, it only includes single-color icons.) I am currently creating an extension that lowers and increases volume so I will search for 'voice' on the site to download the necessary icons.
This was the icon I chose. Now I will download these in 16x16 and 128x128 sizes. (Although the code includes 48x48 size, this site does not have 48x48 size, so I removed it from the code.)
Now, we download the 16x16 and 128x128 sizes in PNG format. After downloading, we place the icons on our desktop. Then, we click on the folder we created and then 'icons' folder and put the downloaded icons there. But when we place them, we need to rename them according to their size. So, we need to name the 16x16 icon as icon16.PNG and the 128x128 icon as icon128.PNG. Once these tasks are complete, go to Chrome, click on the three dots on the right, then go to 'Extensions' and enable developer mode.
After that, click on the 'Load unpacked' button on the left, select where you saved the code, and then upload it to the Web Store. You can now start using it.