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.

Learn

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

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Creating a Chrome Extension with Replit Agent

Tags

Tools

Level

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript