![](https://i.imgur.com/9UQ54uc.gif"){kind=small}
Friends, today I wanted to explain how to create an extension with ChatGPT. Let's continue below:
First, we go to ChatGPT and then we need to enter a prompt. I entered the following prompt:
Now, it provided me with these codes as a response:
Currently, ChatGPT has provided us with the codes, and now we need to put all these codes in a folder and add an icon. Thanks to ChatGPT's analysis feature, both Plus and Free subscribers can ask ChatGPT to 'add icons to all the codes you wrote for me and convert them into a ZIP file.' After extracting the ZIP file, your extension is ready. But since I have reached the analysis limit, I will organize it into a 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 come to our desktop and create a text document (that's how I do it),
Now that we have created the text document on our desktop, we rename it to manifest.json (after removing the TXT format, you need to write the JSON format),
Right-click on it, then choose to open together, open with either Notepad or Visual Studio Code, then copy and paste the code we received from ChatGPT here, and save it. (As not everyone may have Visual Studio, I will show it in Notepad.)
Repeat all these steps for each code. Pay attention to file formats and add codes like popup, background to our desktop.
After completing all these steps, right-click on our desktop, then select new ? folder,
Next, we move the necessary codes we placed on the desktop into our folder. Then, click on that folder and open another folder inside, naming it 'icons.'
After that, we need to go to https://www.flaticon.com/ to set our icon image (ChatGPT only includes single-colored Icons when converted to ZIP). Since I am currently making an extension that adjusts the volume, I will search for 'voice' on the site to download the necessary icons.
The icon I selected is this one. Now, I will download them in 16x16 and 128x128 sizes. (The code also contains 48x48 size, but this site does not have that size, so I removed it from the code.)
Now, download the 16x16 and 128x128 sizes in PNG format from here. Once downloaded, move the icons to the desktop from the downloads. Click on the created folder, then click on the 'icons' folder and place the downloaded icons in the 'icons' folder. However, when adding them, we need to rename them according to their sizes, so name the 16x16 Icon as icon16.png and the 128x128 Icon as icon128.png. Once these steps are completed, go to Chrome, click on the three dots on the right, go to Extensions, and click on 'Manage extensions.' From there, turn on Developer mode, press the 'Load unpacked' button on the left, select the folder where you saved the code, then upload it to the web store. Now, it's ready for use.
First, we go to ChatGPT and then we need to enter a prompt. I entered the following prompt:
Now, it provided me with these codes as a response:
Currently, ChatGPT has provided us with the codes, and now we need to put all these codes in a folder and add an icon. Thanks to ChatGPT's analysis feature, both Plus and Free subscribers can ask ChatGPT to 'add icons to all the codes you wrote for me and convert them into a ZIP file.' After extracting the ZIP file, your extension is ready. But since I have reached the analysis limit, I will organize it into a 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 come to our desktop and create a text document (that's how I do it),
Now that we have created the text document on our desktop, we rename it to manifest.json (after removing the TXT format, you need to write the JSON format),
Right-click on it, then choose to open together, open with either Notepad or Visual Studio Code, then copy and paste the code we received from ChatGPT here, and save it. (As not everyone may have Visual Studio, I will show it in Notepad.)
Repeat all these steps for each code. Pay attention to file formats and add codes like popup, background to our desktop.
After completing all these steps, right-click on our desktop, then select new ? folder,
Next, we move the necessary codes we placed on the desktop into our folder. Then, click on that folder and open another folder inside, naming it 'icons.'
After that, we need to go to https://www.flaticon.com/ to set our icon image (ChatGPT only includes single-colored Icons when converted to ZIP). Since I am currently making an extension that adjusts the volume, I will search for 'voice' on the site to download the necessary icons.
The icon I selected is this one. Now, I will download them in 16x16 and 128x128 sizes. (The code also contains 48x48 size, but this site does not have that size, so I removed it from the code.)
Now, download the 16x16 and 128x128 sizes in PNG format from here. Once downloaded, move the icons to the desktop from the downloads. Click on the created folder, then click on the 'icons' folder and place the downloaded icons in the 'icons' folder. However, when adding them, we need to rename them according to their sizes, so name the 16x16 Icon as icon16.png and the 128x128 Icon as icon128.png. Once these steps are completed, go to Chrome, click on the three dots on the right, go to Extensions, and click on 'Manage extensions.' From there, turn on Developer mode, press the 'Load unpacked' button on the left, select the folder where you saved the code, then upload it to the web store. Now, it's ready for use.