Building a Chrome Extension using ChatGPT

Can ChatGPT be used to build a Chrome Extension? I decided to find out in this weekend project.

One of the Chrome Extension's cover photos.

As technology advances, AI's role in software development is becoming increasingly tangible. A recent project of mine involved building a Chrome extension using ChatGPT, an AI developed by OpenAI. For this endeavor, ChatGPT contributed a substantial 95% of the code, underscoring its potential in transforming our approach to software development.

The project was a time-based website-blocking productivity tool, a seemingly straightforward idea that had been previously abandoned due to a lack of adequate documentation and resources. With ChatGPT, many of these issues were addressed, but it wasn't without its challenges.

Having ChatGPT use Chain of Thought reasoning was helpful to prime the output.

One of the first steps in this journey was to create a system design with ChatGPT. This stage was crucial in determining the core elements of the project, such as the choice of TailwindCSS over vanilla CSS, or the decision to use the more modern Manifest V3 APIs in place of the soon-to-be-deprecated V2. This collaborative planning phase ensured that ChatGPT and I were aligned before the coding began.

However, the coding phase wasn't without its hurdles. One of the main issues was ensuring that ChatGPT adhered to the use of Manifest V3 APIs. Despite initially proposing its usage, ChatGPT occasionally attempted to revert to V2 APIs when faced with difficulties. This behavior required intervention and reinforced that AI tools, while powerful, still need human guidance.

We had many instances in which ChatGPT reverted to using Manifest v2 APIs.

ChatGPT also proved to be a highly effective debugging assistant. Its familiarity with the codebase and its problems provided an edge over traditional resources like StackOverflow. That being said, it wasn't perfect. It often required multiple iterations to correctly identify the root cause of an issue.

An important realization during the project was the need to continually provide context to ChatGPT. Due to its limited long-term memory, ChatGPT can "forget" the specifics of a project. As a workaround, passing the current state of the code and reminding it of the system design proved to be helpful. However, this method became cumbersome when dealing with extensive context.

The design of chrome extension fell short of expectations.

Regarding UI design, ChatGPT's capabilities fell short. Its attempts to replicate the design styles of companies like Stripe or Robinhood were off the mark. Moreover, design updates often led to broken code, indicating a disconnect between design and development within the AI.

In conclusion, while ChatGPT has its limitations and requires a degree of human oversight, its potential for accelerating development cycles is evident. The competitive edge in software development is no longer solely in the software itself but increasingly in the data and hardware infrastructure supporting it. As we continue to refine AI tools like ChatGPT, the landscape of software engineering will inevitably evolve.

Github