How to Create a Google Chrome Extension Using AI

Imagine being able to create your own Google Chrome extensions.
You can use them as digital products to give away or sell.

Until recently, this was something only developers could do.
With AI, you can now create extensions without coding skills.

AI handles the heavy lifting by writing the code for you.

Example Project: A Text Highlighter Extension

Let me show you how to create a Chrome extension.
This extension highlights text on any web page.

It stores highlighted text using Chrome's storage API.
You can use it while researching or gathering information.

Instead of copying and pasting each sentence manually,
you can highlight passages, and they will be stored for you.

When you open the extension, the highlights are there.
You can then copy and paste everything into Google Docs.

Choosing the Right AI Tools

I recommend using Claude and ChatGPT for this task.
These AIs generate high-quality code for extensions.

You can try other AIs, but these are the most reliable.
For this tutorial, I’ll demonstrate using Claude.

Writing the Prompt

Here’s the prompt I used for Claude:

You don’t need to include an icon if you don’t want to.
I included this because I like recognizing my extension.

Icons should have specific sizes: 48x48 and 128x128 pixels.
Some codes require a smaller size (16x16), but I skipped it.
I created my icons in Canva, which doesn’t support 16x16.

Setting Up the Folder

While waiting for Claude to generate the code,
I created a folder named "Text Highlighter" on my desktop.

I added two icon files: one 48x48 and one 128x128 pixels.
These will be included in the extension’s folder.

Copying the AI-Generated Code

Claude generated the code files needed for the extension.
I copied each file’s content into a plain text document.

I used a text editor to save the files in the folder.
Each file name had to match exactly to work properly.

For example, a JSON file required a .json extension.
Sometimes the editor suggested .txt, but I changed it.

The process included six files and two icons.
Though a bit repetitive, it took just a few minutes.

Loading the Extension into Chrome

To load the extension, I followed these steps:

1. Open Chrome and go to the Extensions page.

2. Enable Developer Mode in the top-right corner.

3. Click "Load Unpacked" and select the folder.

The extension, named "Text Highlighter," appeared.
It could highlight text and save it locally as designed.

Using the Text Highlighter Extension

I pinned the extension to the Chrome toolbar.
This made it easy to access while browsing.

I tested it by highlighting text on different websites.
The highlights remained even after switching pages.

I could gather text from multiple sites seamlessly.
This was perfect for research or content creation.

Updating and Troubleshooting

If you make small changes to the code, click "Reload."
This pushes updates to the extension without removing it.

For major errors, you might need to start over.
Remove the extension, fix the code, and reload it.

Conclusion

This AI-powered process makes creating extensions simple.
You can highlight text, save it locally, and work faster.

If you'd like access to all the code files,
join my online community through the link below.

Follow these steps, and you’ll have your own extension.
AI empowers anyone to create, even without coding skills!