Coding with Cursor AI – I built a Chrome Extension from Scratch

Building a Chrome Extension with Cursor AI

In the rapidly evolving world of web development, the integration of artificial intelligence (AI) has become a game-changer. Specifically, tools like Cursor AI are revolutionizing the way developers build and enhance browser functionalities. This article will guide you through the process of creating a Chrome extension using Cursor AI, one of the best AI coding tools available today.

Whether you’re an experienced developer or just starting out, leveraging AI coders can significantly streamline your workflow and improve the efficiency of your projects. By the end of this tutorial, you’ll have a solid understanding of how to harness the power of AI to build a Chrome extension that not only meets but exceeds user expectations.

In this blog post, we delve into the process of constructing a Chrome extension with the aid of Cursor, an AI-powered code assistant. Although AI-based code assistants may not be flawless in generating code from scratch, they are instrumental in offering a foundational starting point and expediting the development process. We will demonstrate this workflow by creating a straightforward screenshot enhancer extension, which empowers users to personalize background colors and gradients.

Two Approaches for Building a Chrome Extension

Using AI-Based Code Assistants

One approach involves using AI-based code assistants such as Cursor or Zed. By providing these tools with a description of the extension’s desired functionality, they can generate basic boilerplate code. This method is particularly beneficial for those new to Chrome extension development, as it saves considerable time and effort.

Using Existing Repositories

Another approach is to explore existing Chrome extension repositories on platforms like GitHub. This can serve as an excellent starting point for those seeking a robust and well-tested foundation for their extension. It is essential to verify the license and ensure compatibility with the latest versions of Chrome.

Screenshot of a GitHub repository for a Chrome extension — GitHub offers a wide range of Chrome extension repositories for various functionalities.

Setting Up the Project Environment

Before diving into coding, it’s essential to establish a dedicated folder for your Chrome extension project. This folder will contain all the necessary files, such as manifest.json, background.js, popup.html, and popup.js, ensuring organized development with the aid of advanced AI coding tools like Cursor AI.

Creating the Chrome Extension Files

Within our project folder, we’ll create several key files using a text editor to structure our Chrome extension. These files include:

manifest.json: This file is essential as it outlines the extension’s metadata, including its name, version, required permissions, and the scripts it utilizes.
background.js: Containing the background logic, this script runs continuously, even when the extension’s user interface is not active.
popup.html: This file is responsible for the user interface of the extension’s popup, which is the primary interaction point for users.
popup.js: This JavaScript file handles the interactions between the user interface elements defined in popup.html and the underlying logic.

Loading the Unpacked Extension

After creating the necessary files, the next step is to load the extension into Chrome or Brave. This involves enabling Developer Mode in the browser’s extensions settings. Once Developer Mode is active, you can load the unpacked extension by selecting the project folder. This method allows for running and testing the extension without the need to package it into a .crx file.

Screenshot of the code assistant generating code for a Chrome extension — Cursor, an AI coder, provides a solid starting point by generating boilerplate code for a Chrome extension, making it one of the best AI coding tools available.

Enhancing Functionality with Cursor AI

In this section, we will utilize Cursor AI to augment our screenshot extension by incorporating features such as background color customization and gradient options. To begin, we’ll navigate to popup.js and engage with Cursor’s chat interface. By articulating the desired enhancements, Cursor AI will offer insightful suggestions and generate the necessary code. This interactive process encourages iterative refinement, enabling us to progressively enhance the extension’s capabilities.

Troubleshooting and Debugging

While Cursor is an incredibly helpful tool, it’s common to encounter bugs and errors during the development process. These issues can stem from various sources, including code inconsistencies, missing dependencies, or unexpected browser behavior.

To resolve these problems, it’s essential to analyze error messages and thoroughly examine your code to identify the root cause. Utilizing browser debugging tools, such as the console and debugger, can help you inspect your code and step through its execution. Cursor, as an AI coder, can also assist by analyzing errors and suggesting potential solutions, making it one of the best AI coding tools available.

Testing the Extension

After resolving any bugs, it’s essential to thoroughly test our extension. This process includes various interactions with the extension, taking screenshots, adjusting settings, and looking out for any unexpected behavior. Utilizing the browser’s developer tools can be beneficial for monitoring network requests, inspecting the DOM, and analyzing performance. It’s also crucial to test the extension across different browsers and environments to ensure compatibility and a seamless user experience.

Conclusion

Developing a Chrome extension using Cursor AI is both powerful and efficient. Although these tools do not fully automate the development process, they significantly accelerate the workflow, particularly for beginners. It is crucial to remember that debugging and testing are essential components of the development cycle, and patience is key when resolving any issues. By leveraging AI code assistants like Cursor AI and adhering to best practices, you can create functional and user-friendly Chrome extensions that enhance your web browsing experience.

Multi-File Edits with AIDR

The speaker introduces AIDR, a free and open-source AI coding assistant, highlighting its capability to edit multiple files simultaneously. He demonstrates this by relocating resource functions from one file to another, showcasing the efficiency of this feature.

This functionality is particularly beneficial for large projects with interconnected files. AIDR’s user-friendly interface simplifies navigation and code modification, enhancing productivity.

Additionally, the speaker emphasizes AIDR’s ability to incorporate new files into the project context, making it an effective tool for managing extensive projects.

Productivity Gains and The Future of AI Coding

The speaker explores the potential of AI coding assistants, discussing how they can be used to write tests, modularize code, and add new functionalities. He emphasizes the concept of “agentic engineering,” where AI tools automate tasks, allowing engineers to focus on higher-level goals.

Cursor’s Next Action Prediction

The speaker delves into the concept of next action prediction, where AI coding assistants, such as Cursor, anticipate the next steps a developer is likely to take. He demonstrates how Cursor predicts the next method call based on previous edits, significantly reducing the time required to complete tasks.

This feature exemplifies the power of AI coding assistants, enabling engineers to achieve a state of flow where their mental energy is not wasted on mundane tasks.

Cursor’s Focus on Perfect Edits

The speaker then highlights Cursor’s focus on “perfect edits.” This refers to the AI’s ability to make precise and accurate modifications to the code, considering the context of the surrounding code. This feature is crucial for maintaining code quality and reducing the risk of introducing new errors.

Cursor's Perfect Edits feature — Cursor’s Perfect Edits feature

The speaker acknowledges the challenges involved in achieving perfect edits, highlighting the need for sophisticated AI models that can understand the nuances of code and make context-aware adjustments.

AIDR’s Bug Detection

The speaker shifts his focus to AIDR, discussing its potential for automatic bug detection. He explores various scenarios for triggering this functionality, including during code writing, commit processes, and pull requests.

The speaker emphasizes that AIDR’s capabilities are made possible by its deep integration with the IDE, giving it access to a wealth of code context and allowing it to effectively identify potential bugs.

AIDR’s Interactive, Not Agentic Approach

The speaker contrasts AIDR’s approach to AI coding with Cursor’s, highlighting AIDR’s focus on interaction and its aversion to making assumptions about the best agentic workflows.

AIDR's interactive approach — AIDR’s interactive approach

He argues that this lightweight approach, relying primarily on prompt-driven interactions with the code base, offers flexibility and allows for better customization of the coding process.

AIDR’s Self-Written Code

Finally, the speaker concludes by discussing the remarkable feat of AIDR writing 7% of its own code. This, he believes, is a glimpse into the future of engineering, where AI tools become increasingly autonomous, taking on more complex tasks and allowing engineers to focus on higher-level design and problem-solving.

The speaker’s enthusiasm for this development underscores his belief that AI coding assistants will play a crucial role in shaping the future of engineering, enabling engineers to achieve greater productivity and innovation.