AI Programming: Developed My First Chrome Extension – GPTBLOX

Discover how AI coding led to the launch of my chrome extension offering features like ChatGPT saver & web management. Explore the ChatGPT programming approach.

Introduction

Hello everyone, I’m Yi Tao, a developer with some coding experience but room for improvement. With the help of ChatGPT, I was able to develop and launch a Chrome extension in less than two weeks that I might not have been able to finish on my own in a few months. I’ve also released five updates shortly. The extension now has nearly 1,000 users without much marketing.

Extension Link: GPTBLOX – ChatGPT Save Data/Bard Claude Saver

How Was the Chrome Extension Developed Using ChatGPT Coding?

This is a extension purely written by ChatGPT. I didn’t have to write a single line of code. By simply conversing with ChatGPT, I started from obtaining the HTML content of the current webpage, saving the code to a TXT file, processing and optimizing the obtained HTML content before saving, and saving it as HTML files, PDF files, and PNG images. Finally, I modified it into 18 language versions. During the development of the first version, there were many difficulties and misunderstandings between me and ChatGPT, but we eventually overcame them through my guidance and ChatGPT’s tireless cooperation.

Why Choose AI Programming for GPTBLOX?

I wanted to solve a need for myself and my friends: ChatGPT accounts were being frequently banned, and we hoped to save our ChatGPT chat records in a better way. This extension helps everyone save their ChatGPT conversations on their own computer with a single click. The account is worthless, but your training records and creative inspiration with ChatGPT are priceless.

Version History Created Through AI Coding

Version 1.0.0

Implement functionality to save ChatGPT conversation history in multiple file formats such as HTML, TXT, PNG, and PDF locally on the computer. There’s no need to share or save the conversation online, mitigating concerns about data leaks. Also, integrate a WordPress plugin API with ChatGPT, allowing the Chrome extension to load specified articles or push notifications from remote WordPress sites.

Version 1.1.0

Introduce management features for ChatGPT conversation links, such as grouping, dragging, editing, and deleting. Allow these conversation links to be managed in different ways on the extension’s page and support settings for how the groups are displayed, as well as import/export functionalities for grouped links.

Version 1.2.0

Add functionality to save conversations from Bard, Claude, and HuggingChat in multiple file formats like HTML, TXT, PNG, and PDF, stored locally on the computer.

Version 1.3.0

Enable saving articles from WordPress-based websites in multiple file formats such as HTML, TXT, and PDF, stored locally. This paves the way for aggregating and managing web pages and conversation links in the next version. Customization options should also be available for other websites, specifying domains, titles, and contents for saving in HTML, TXT, and PDF files.

Version 1.4.0

Allow saving the current webpage link or aggregate all page links from the current browser window to a web page management interface. Support functionalities like flexible dragging and moving, adding, editing, deleting, locking, and reopening. Options can also be available to set the display style of the web page management interface, either as top-down and waterfall flow. Additionally, support settings for 1, 2, 3, or 4 columns for managing web page groups and implement import/export functionalities for web page groups and links.

Version 1.5.0

Include features to save conversations from Claude’s official website in multiple file formats like HTML, TXT, PNG, and PDF, stored locally. Additionally, improve the ChatGPT conversation-saving feature to include pre-defined instructions from Custom Instructions in the saved conversation history.

Future Plans for GPTBLOX

• Add the ability to save chat records and webpage content to Notion, Evernote, and WordPress websites.
• Further optimize the features related to collecting and managing webpages, especially in terms of user experience, , we need to further learn from the Onetab extension.
• Consider further processing and optimizing the saved webpage content, including but not limited to summarizing and perfecting the content through OpenAI’s interface.

ChatGPT Programming Strategies

Step-by-Step Output

Let ChatGPT write code in files or modules according to steps. For example, first determine the required files, and then let ChatGPT output the code separately for each file. This can reduce the risk of contextual logic deviation.

Small Entry Point

The entry point for the project should be as small as possible, small enough that ChatGPT can output a complete and useful initial version. If there are issues with the initial version, the limited code and feature scope make it easier for either ChatGPT or humans to correct.

Minimal Modules

Isolate the code that needs to be modified or added, and only provide ChatGPT with the smallest possible chunk of code each time. This minimizes the chances of logical deviations.

Code Confirmation

Before adding new features or logic, start a new conversation window and re-enter the project requirements and relevant code to ChatGPT for confirmation. Once confirmed, proceed with new feature development.

Specify Code

If ChatGPT produces code with inconsistencies due to contextual memory limitations, re-submit the relevant code and have ChatGPT make modifications based on the most recent code.

Deep Guidance

When multiple conversations fail to resolve issues, delve into the specific functional requirements and code. Provide necessary guidance to ChatGPT based on your own experience.

Self-check Issues

If the problem persists after multiple conversations, guide ChatGPT to add console logs for debugging in the code. Provide the program’s runtime results or error messages directly to ChatGPT for checking and correction.

Timely Rollback

If the problem persists after multiple conversations, consider rolling back to a previously stable version of the conversation and allow ChatGPT to redevelop. During redevelopment, offer necessary guidance to ChatGPT based on issues encountered during previous debugging sessions or your own experience.

If you are interested in AI programming or are worried about “chatgpt internal server error”, feel free to try out GPTBLOX and share your experience. If you encounter any issues or have suggestions for future development, we’re all ears. Thank you!