Build an AI Chrome Extension in 30 Minutes (No Experience Required)

Dear Readers,

Today, I'm excited to walk you through building with Cursor and show you just how powerful this tool really is. We'll see how it's reshaping software engineering, and even if you're not a developer yet, you'll want to see what Cursor can do.

If you haven't heard of Cursor before, let me break it down.

For this tutorial, we're focusing on something concrete: building an AI Chrome extension using Cursor. Not only will you see the tool in action, but you'll also get hands-on experience with OpenAI's API.

This won't be just another generic tutorial - we're building something real that you can use and potentially monetize. Let's dive in.

Setting Up Your Environment

First, let's get your workspace ready. This will take less than 3 minutes.

1. Download Cursor from cursor.com.

2. Create a new folder on your desktop called "summarize-extension."

3. Open the folder in Cursor.

Now, let’s build something cool. 👩🏻‍💻

What Are We Building?

Our Chrome extension is going to be super simple but very useful. Think about how many times you've had to copy-paste text into ChatGPT for a quick summary. We're fixing that.

Here's what our extension will do:

1. Highlight any text on any webpage.

2. Right-click and select "Summarize."

3. Get an AI-powered summary in seconds, right there on the page.

Step 1: Let’s Get Our API Key from OpenAI

Since we’re using ChatGPT functionality in our extension, we need to grab an API key from OpenAI. It’s really easy - here’s how.

• Head to platform.openai.com.

• Sign up or log in.

• Click on your profile → "Start Building".

• Create a new key and save it somewhere safe.

Step 2: This Is Where the Magic Happens.

Open Cursor and press Command-I (Mac) or Control-I (Windows) to bring up the AI composer. This is where the magic happens.

Here's our first prompt:

Create a Chrome extension that can summarize highlighted text using OpenAI's API. It should:

1. Add a context menu item "Summarize"
2. Capture highlighted text when clicked
3. Send to OpenAI API for summarization
4. Display results in a clean popup

Include manifest.json and all necessary files. Use modern JavaScript.

Hit enter and watch how Cursor will generate all of our base code. You'll see several files appear. Accept them.

1. manifest.json

2. background.js

3. content.js

4. popup.html

5. popup.css

Our extension has four main parts.

1. The manifest file tells Chrome what our extension can do.

2. Background script handles the OpenAI API calls.

3. Content script manages text selection.

4. Popup shows our summaries.

Step 3: Creating Your Extension Icons.

Every Chrome extension needs icons in different sizes, else you’ll likely get an error message when you run. Let's create some that represent our summarization tool.

1. First, create an icons folder in your extension directory.

2. Go to https://www.favicon.io/.

3. Select '“Generate from Emoji.”

4. Select your emoji of choice - I picked the Graduation Cap.

5. Download all sizes and place them in your icons folder.

Note, that you might need to update your manifest.json file to match your actual file names. I changed mine to look like this after using the files from Favicon:

{
  "manifest_version": 3,
  "name": "Text Summarizer",
  "version": "1.0",
  "description": "Summarize highlighted text using OpenAI's API",
  "permissions": [
    "contextMenus",
    "storage",
    "activeTab"
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "48": "icons/android-chrome-192x192.png",
      "128": "icons/android-chrome-512x512.png"
    }
  },
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "icons/favicon-16x16.png",
    "48": "icons/android-chrome-192x192.png",
    "128": "icons/android-chrome-512x512.png"
  }
}

Step 4: Testing Your Extension

Now it’s time to see what we’ve built in action. Here’s what you need to do.

1. Open Chrome.

2. Type chrome://extensions/ in the address bar.

3. Toggle on "Developer mode" (top right).

4. Click "Load unpacked" and select your summarize-extension folder.

You should see your extension appear under your Extensions list like this:

Once installed, click the extension icon in your Chrome toolbar. You'll see a field to enter your OpenAI API key. This is the secure way to handle your key - it'll be stored in Chrome's storage rather than in your code.

Step 5: Let’s Try It Out!

Now for the fun part, let’s see if what we made works.

1. Go to any article on any website of your choosing (I’m using my newsletter).

2. Highlight a bit of text.

3. Right-click and select "Summarize".

Watch your AI summary appear! It should look something like this:

Final Steps: Customizing Your Summarizer

You’ve made it all the way to a working extension! Now that you’re familiar with the process, you can use Cursor to add additional features such as:

1. Different Summary & Voice Styles.

2. History of Summaries.

3. Display Settings.

I decided to prompt Cursor to make the app look a little more modern, using the same steps as before. Now it looks like this:

Let’s Wrap it Up!

Thanks for reading along with this short tutorial! I hope you had a bit of a wow moment - I know I sure did. Even as an experienced dev, I was never able to step outside my comfort zone C# stack so quickly. Now, these new AI tools make it possible.

I know it can be a little intimidating for devs to start feeling somewhat replaced by AI right now. I just want to tell you: keep learning, keep growing, and don't be afraid to try new things. Curiosity is what matters. We can't reject new tech, but we can use it to our advantage.

If you have any other cool projects with Cursor, please mention them in the comments! I'd love to hear about them!

I write about how we're building modern software, and I love to share tips, tricks, and tutorials for founders and techies. If you're interested:

1. You can subscribe to my newsletter here.

2. Follow me on Twitter/X at @miteva_alex.

I'd love to connect, always! Best of luck. 👩🏻‍💻