Replit

Creating a Chrome Extension with Replit Agent

Learn how to create your first Chrome extension with Replit Agent, an advanced AI-coding agent. This step-by-step guide teaches you how to go from an initial idea to a fully functional Chrome extension in minutes, regardless of skill level.

Ad-blockers. Password managers. Browser extensions have made user interactions with websites more pleasant and productive. Sometimes, however, you come across a problem that can be solved with a browser extension, but none of the browser extension marketplaces (e.g., Chrome Web Store or Mozilla Add-Ons) has exactly what you are looking for. In such cases, creating your own browser extension might be the perfect solution. With Replit Agent, building a browser extension from scratch has become more accessible than ever.

From a single prompt, Replit Agent automatically generates all required files and configurations for a functioning browser extension. This single-handedly simplifies the development process by eliminating manual setup tasks (no more wrestling with boilerplate code!). Additionally, as Replit Agent generates these files and writes code, Replit Agent explains its entire thought process, helping you understand the ins-and-outs of the browser extension as its being built. Replit Agent lets you focus on fleshing out the unique features and finer design details that ultimately make your browser extension stand out in browser extension marketplaces. 

This comprehensive guide will demonstrate how you can create a Chrome extension from scratch using Replit's AI-powered platform. Specifically, you will be building a Chrome extension that lets users see the Urban Dictionary definition of a slang term that they highlight on a webpage. As you progress through this guide, you will learn how to leverage Replit Agent’s intelligent code suggestions and automated workflows to build, test, and package your extension. Whether you're an experienced developer or just starting your coding journey, you'll discover how Replit Agent can help you bring your custom browser solution to life with minimal setup and boilerplate code.

How do you prompt Replit Agent to create a Chrome extension?

I. Give a concise, one-sentence description of the Chrome extension.

In the prompt that’s provided to Replit Agent, the first sentence should explicitly state that you want to create a Chrome extension. Additionally, it should describe the Chrome extension’s purpose and core functionality.

For example, for a Chrome extension that displays the Urban Dictionary definition of a highlighted term:

Create a Chrome extension that lets users highlight any text on a webpage to instantly view it Urban Dictionary definition in a popup overlay, similar to how dictionary extensions work.


If you have trouble coming up with a concise, one-sentence description, then you can prompt Claude AI or ChatGPT with the following:

Give a concise description for the following task:

"<DESCRIPTION>"

 with the task you want to describe concisely, and copy and paste the description into Replit Agent’s chat interface.

II. Provide a list of features the Chrome extension should support.

After adding a one-sentence description of the Chrome extension to the prompt, add a detailed list of any features that the Chrome extension should support. The more items that describe how the Chrome extension should behave, the more likely that Replit Agent will generate exactly what you’re looking for. Being specific about functionality, user interactions, and expected behaviors helps Replit Agent understand your vision and translate it into functional code.

Create a Chrome extension that lets users highlight any text on a webpage to instantly view its Urban Dictionary definition in a popup overlay, similar to how dictionary extensions work.

The Chrome extension should support the following functionality:**

1. When a user highlights text on a webpage, the Chrome extension applies a Medium-style tooltip to the highlighted text with a single button that’s labeled with a capitalized, Times New Roman, letter “E.” When the user hovers over this button, the label “Englishify” should appear.

2. When the user presses the “E” button, the Chrome extension will look up the highlighted text on Urban Dictionary and display the definition from the highest upvoted result.

3. When the user presses on the Chrome extension, the Chrome extension will display the user’s last ten most recent look ups from Urban Dictionary. Each entry is comprised of the text and its definition.

III. Specify technologies (e.g., languages, libraries, frameworks, tools, and APIs) to use and design principles to follow.

After adding a detailed list of features that the Chrome extension should support to the prompt, enrich the prompt by mentioning any specific technologies that should be used and the design principles to follow. This ensures that Replit Agent understands not just what to build, but how to build it according to your technical and design preferences. 

For example, for a Chrome extension that displays the Urban Dictionary definition of a highlighted term: 

Create a Chrome extension that lets users highlight any text on a webpage to instantly view its Urban Dictionary definition in a popup overlay, similar to how dictionary extensions work.

The Chrome extension should support the following functionality:

1. When a user highlights text on a webpage, the Chrome extension applies a Medium-style tooltip to the highlighted text with a single button that’s labeled with a capitalized, Times New Roman, letter "E." When the user hovers over this button, the label "Englishify" should appear via the HTML `title` attribute.

2. When the user presses the “E” button, the Chrome extension will look up the highlighted text on Urban Dictionary and display the definition from the highest upvoted result.

3. When the user presses on the Chrome extension, the Chrome extension will display the user’s last ten most recent look ups from Urban Dictionary. Each entry is comprised of the text and its definition. These entries are stored via the `chrome.storage` API.

4. Ensure the Chrome extension is fully accessible by implementing the following ARIA attributes and keyboard interactions:

   * Add `aria-label="Look up slang definition."` to the tooltip button.
   * Include `role="tooltip"` and appropriate `aria-describedby` attributes for the tooltip's container.
   * Make the tooltip button keyboard-focusable and operable via Enter/Space keys.
   * Ensure the definition popup has `role="dialog"` with `aria-labelledby` pointing to its title.
   * Add `aria-live="polite"` to the definition display region so screen readers announce new results.
   * Make the history view navigable via keyboard with appropriate focus management.
   * Prioritize the usage of semantic HTML elements.
   * Provide a skip link or keyboard shortcut to quickly access the history panel.

Style the Chrome extension using a monochromatic, grayscale color palette.

IV. Enter the final prompt into Replit Agent and build the initial prototype of the Chrome extension.

Once the prompt has been finalized, enter the prompt into Replit Agent. It will analyze your prompt and propose additional features that you might want to add to the Chrome extension. If you think any these features should be supported by the Chrome extension, then feel free to check the relevant features. Once the requirements have been clarified, click the “Approve plan & start” button, and Replit Agent will start building the initial prototype of the Chrome extension.  

Unlike for web applications, Replit does not yet support live previewing for a Chrome extension. And so, Replit Agent shows you a screenshot of a directory index listing that lists all of the generated files and directories.

What files and directories are generated by Replit Agent for a Chrome extension?

A Chrome extension is a zipped bundle of files and directories that forms a self-contained software package designed to extend the functionality of the Chrome browser. This bundle consists of: 

For the initial prototype of the Chrome extension, Replit agent generated the following files:

How do you test and debug a Chrome extension that’s created by Replit Agent?

To test the Chrome extension, open your Chrome browser and visit 

. In the top-right corner of the page, toggle on “Developer mode.”

Back in Replit Agent, download a zip file of the Chrome extension by clicking the file explorer button (with the folder icon), followed by clicking on the file explorer’s menu button (with the vertical, triple ellipsis icon), and lastly, clicking on the “Download as zip” button in the opened dropdown.

On the “Extensions” page, click on “Load unpacked” and select the directory that contains all of the Chrome extension’s files. The Chrome extension will appear under your listed extensions, like so:

Click on the Chrome extension’s “Details” button and toggle on “Pin to tollbar” to have the Chrome extension appear in your Chrome browser’s toolbar.

Let’s test the Chrome extension for the first time. Visit this 

You will notice that the Chrome extension doesn’t work properly. The tooltip container is circular and lacks a tip that points to the highlighted text. Additionally, the “Englishify” button is only visible if you hover over it in the tooltip container. If you click on the “Englisify” button, then you will notice that nothing happens. Yikes!

It may seem like Chrome extension is far from being usable, but with just a few prompts, you can completely transform it into a functional product. The good news is that the foundational architecture is solid. The right files are already in place, and there is a clear separation of concerns between the background script, content script, and UI components.

Let’s tackle each problem, one-by-one, each with a targeted prompt. First, let’s correct the appearance of the tooltip. Visit any Medium article, highlight some text in the article, and take a snapshot of the tooltip that appears above the highlighted text.

Back in Replit, in the Replit Agent chat interface, upload this snapshot and enter the following prompt:

The tooltip should look like this. As you can see, there's a tip that points to the highlighted text, and tooltip buttons are contained within a rounded-corner rectangle.

By providing a snapshot of how the tooltip should appear, Replit Agent will know exactly how the tooltip should be designed.

After Replit Agent makes the necessary changes, test the Chrome extension again. Download the newly updated Chrome extension files and install the Chrome extension in your Chrome browser. Under the details of the Chrome extension, make sure to toggle on “Pin to tollbar.”

Under the “Inspect views” section, if you see “service worker (Inactive),” then click it to activate the service worker. This will also open a devtools console window that displays logs from the 

, reload the page, and highlight the term “no cap.”

The tooltip looks much better, despite a centering issue with the tooltip’s contents. When you click on the “Englishify” button, you will notice that the tooltip disappears before a definition appears. Let’s address this issue.

Back in Replit, in the Replit Agent chat interface, enter the following prompt:

When the tooltip button is clicked, the tooltip closes before the definition of the highlighted text is shown.

When you describe a problem to Replit Agent, Replit Agent automatically knows that the intent should be to resolve the problem.

After Replit Agent makes the necessary changes, test the Chrome extension again. Download the newly updated Chrome extension files and install the Chrome extension in your Chrome browser. Under the details of the Chrome extension, make sure to toggle on “Pin to tollbar” and activate the service worker, if inactive.

When you click on the “Englishify” button, a definition appears. Since the definition appears, you will also notice that the definition gets added to the Chrome extension’s popup. However, the definition appears outside of the tooltip, away from the highlighted text. Let’s address this issue.

When the tooltip button is clicked, and the definition of the highlighted text is successfully fetched from Urban Dictionary, the definition of the highlighted text should replace the tooltip content. This way, the definition of the highlighted text is adjacent to the highlighted text and not shown in a modal. Additionally, the text color should contrast with the background color of the tooltip container so that the definition of the highlighted text is easy to read.

Notice how the prompt mentions “the text color should contrast with the background color of the tooltip container so that the definition of the highlighted text is easy to read.” If this was sentence was left out of the prompt, then the text color would have remained black, which would not be visible in the black tooltip.

Luckily, Replit Agent seems to have resolved the centering issue around the contents of the tooltip. Not only that, but when you click on the “Englishify” button, the definition now appears within the tooltip. Great! However, the tooltip’s positioning is slightly incorrect. The tooltip (and its tip) should be positioned above the highlighted text, such that the tooltip remains stationary above the highlighted text even when the definition appears. Let’s address this issue.

First, right-click on the tooltip and select, from the context menu, “Inspect Menu.” Under “Elements,” select the 

 value until the tooltip is positioned above highlighted text. Then, take a snapshot of the tooltip above the text. Additionally, take a snapshot of the tooltip just after the text is highlighted. You should end up with snapshots that look like the following:

Back in Replit, in the Replit Agent chat interface, upload these snapshots and enter the following prompt:

As shown in the attached screenshots, adjust the tooltip positioning so that the tip and the container always stay above the highlighted text.

By providing snapshots of how the tooltip should be positioned, Replit Agent will know exactly how the tooltip should be positioned.

The tooltip appears to be positioned correctly now. Great! However, the close button in the tooltip needs to have its margining removed. Let’s address this issue.

Remove the extra margining around the tooltip's close button.

The close button in the tooltip looks perfectly aligned with the definition. However, if you open the Chrome extension’s popup, then you will notice that the popup became narrower, even though previously, the width was correct. Replit Agent must have hallucinated recently. Let’s address this issue.

First, take a snapshot of the narrow popup.

AUTHOR

Ken Chan

Learn about Replit Agent, an advanced AI-coding agent that’s capable of building apps from scratch. Through natural language interactions and real-time assistance, Replit Agent sets up environments, writes code, and deploys apps, all done within minutes.

Have you ever put aside a side project for months and completely forgotten about it? Have you ever needed to quickly create a fully functional MVP to validate a SaaS product idea? With so many steps involved in developing and sharing an application, from coding the application logic to provisioning cloud infrastructure, there is a lot of work that developers need to tackle before getting their ideas in front of prospective users. Thankfully, the recent rise of AI-powered tools is upending the traditional process of creating an application by streamlining and automating many of these tedious steps. This lets you focus on what truly matters - bringing your unique vision to life and solving users’ problems.

 (e.g., Continue) that augment existing IDEs with intelligent code autocompletion and ChatGPT-like capabilities. These tools allow developers to describe the code they want via a written prompt, and the underlying LLM instantly generates code that matches the developer’s intent. While such tools help developers save time on writing code, developers still need to set up and configure an array of cloud infrastructure resources, from containers to databases, in order to deploy their applications.  

Enter agentic AI-powered tools. Unlike most copilot coding assistants, 

 automate the entire development workflow. From a single prompt, and access to a variety of tools, an AI coding agent can come up with a sequence of actions that it must perform to fulfill the prompt. For each action, the AI coding agent can choose the appropriate tools to successfully carry out the action. For example, if the underlying LLM of an AI agent determines that the prompt requires an image generation step, then to fulfill that step, the LLM will select and invoke a tool that’s responsible for calling OpenAI’s DALL·E to create images.

Let's explore how one such agent, Replit Agent, that’s capable of building and deploying entire applications from a single prompt.

 is an AI coding agent that’s integrated into Replit’s development environment. Simply describe what you want built, and Replit Agent leverage Replit's extensive feature set (e.g., its package manager, database integration tools, and deployment pipeline) to build and deploy a full-stack web application in minutes. 

All of this happens from the convenience of your browser or Replit’s mobile app (available on iOS and Android). Due to its relative ease of use and integration with Replit's robust development toolkit, Replit Agent makes application development accessible to everyone, regardless of skill level. The agent can even leverage Replit's educational features, providing inline documentation and explanations of the code that’s generated, making Replit Agent an excellent learning tool for developers.

Replit Agent understands and can handle all phases of the software development lifecycle. After receiving a prompt, Replit Agent:

The effectiveness of Replit Agent's output depends on how clearly you can communicate your technical requirements. The more specific you can be about programming concepts, tools, and terminology, the better it can understand and implement your idea. For example, suppose you have a specific UI design in mind for your application. You tell Replit Agent that you want a “minimalist, modern design” for your application. While this gives a general direction, being more specific, like requesting “a clean interface with a monochromatic color scheme, subtle shadows, ample white space, and components from the Tailwind UI library,” helps Replit Agent generate code that more closely matches your vision and reduces the need for subsequent revisions.

Try to leave nothing open for interpretation. For example, you tell Replit Agent that you want your bookmarking application to “store data.” However, where should it store data? In a PostgreSQL database? In 

Every pricing plan offers free Replit Agent access. However, the level of access varies depending on the pricing plan that you choose. Replit offers four pricing plans:

The level of access to Replit Agent is tied to:

For an in-depth chart that compares plans, please visit 

To get access to Replit Agent, you will need a Replit account. If you don’t already have a Replit account, then sign up for a Replit account, answer several questions from the onboarding wizard, and verify your e-mail address. If you are new to Replit, then you should select the 

 plan (free tier plan). If you have available funds, and you plan on building more sophisticated applications, then you should select the 

Once your e-mail address has been verified, you will have access to the prompt textarea field and start building with Replit Agent. Additionally, at the bottom of the left navigation sidebar of the Replit dashboard, you will notice a small section that displays your account’s plan and quota information. For the Starter plan, this includes the number of free, public applications that you have created and the number of Replit Agent checkpoints already consumed. If you happen to consume all 10 free checkpoints, then you will no longer be able to use Replit Agent unless you either:

How do you create an application with Replit Agent?

Log in to your Replit account. If you don’t have an account yet, then you can create one for free at 

. Replit offers multiple sign-in options, including Google, GitHub, and email-based authentication.

II. Visit the home page (replit.com), or click the “+ Create App” button in the left navigation sidebar (replit.com/new).

. In the Replit dashboard, at the center of the home view’s main content area, there is a large textarea field that lets you enter a description of the application that you want to create. Below the large textarea are several buttons that, when clicked, will prefill the textarea field with a curated prompt. For example, clicking on the “AI chat” button will prefill the textarea field with the prompt “Make an AI chat application using OpenAI. Let the user enter their username when they join for the first time.”  

 button in the left navigation sidebar, which will redirect you to the 

. This page also features a large textarea field that lets you enter a description of the application that you want to create. However, there are many more buttons with prompt suggestions to help you get started with Replit Agent. You can hover over each button to preview the prompt that it will insert into the textarea field. Along with buttons with prompt suggestions, there are also buttons with integration suggestions. Clicking any one of these buttons will insert extra text that describes the integration you want added to your application into the textarea field. For example, clicking on the button “Firebase login” will add the text “Add authentication for users using Firebase.” Ideally, you should add these texts after the initial prompt that describes what you want built.

III. Type and enter a prompt that describes the application and its features.

To start building an application with Replit Agent, simply enter a clear and concise prompt describing what you want to create. This step is crucial because the quality of the prompt directly affects the output generated by the AI. A well-structured prompt should include details about the application's purpose, key features, and any specific technologies or frameworks you want to use.

For example, if you want to develop a RAG application that allows you to ask questions about the contents of a YouTube video, then you might input:

This level of detail helps Replit Agent know which libraries and frameworks it should use to create the application. The more details you provide about the application, the more accurate and functional the initial version of the application will be. Remember, if the prompt is too vague, then Replit Agent may produce an incomplete or generic web application that requires extensive manual adjustments.

However, if you don’t specify any libraries, frameworks or tools, then Replit Agent will decide which technology stack best suits your project.

If you want to view or modify the code that’s generated by Replit Agent, then open the file explorer by clicking on the button (with the folder icon) below the home button in the left sidebar. From the file explorer, you can download the project’s source code by clicking on the menu button (with the vertical, triple ellipsis icon), followed by clicking on the “Download as zip” button in the opened dropdown.  

IV. Iteratively improve the application by giving detailed feedback to Replit Agent.

Once the initial version of the application is generated, you can refine it by providing feedback. Iterative development is one of Replit Agent’s strongest capabilities, allowing users to tweak their applications without having to directly interact with any project code. By giving precise, structured feedback, you can guide the AI to make specific improvements and enhancements.

For example, if you want the RAG application to provide timestamp references to its responses, then you can specify:

Replit Agent will adjust the application accordingly, ensuring that the final version aligns more closely with your vision. This process can be repeated as many times as needed until the desired result is achieved.

Moreover, this iterative approach is beneficial for debugging and optimization. If an application has performance issues, then you can instruct Replit Agent to optimize for performance (e.g., algorithmic improvements, faster page loading times, etc.) or fix specific errors.

Try creating your first web application with Replit Agent. Feel free to share it in the comments section of this post!

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Tutorials on Ai Agents

Creating a Chrome Extension with Replit Agent

Replit Agent - An Introductory Guide

This has been a really good investment!

Advance your career with newline Pro.

Email Newsletter

Popular Topics

Masterclasses

Tutorials

Fullstack React with TypeScript