Getting Started with Extendable: Build Your First Browser Extension

Building browser extensions has traditionally been a complex process requiring deep knowledge of browser APIs, manifest configurations, and extension architecture. With Extendable, you can create fully functional extensions in minutes by simply describing what you want to build.

In this guide, we'll walk through the entire process of building your first extension using Extendable's AI-powered development environment.

What You'll Build

By the end of this tutorial, you'll have created a simple but useful browser extension that displays the word count of any webpage you're viewing. This extension will:

• Add a browser action button to your toolbar
• Count words on the current page when clicked
• Display the count in a clean popup interface

Step 1: Create Your Account

First, head to Extendable and create an account. You can sign up with your email or use Google authentication. Once you're in, you'll see the main workspace where all the magic happens.

Step 2: Start a New Project

Click "New Project" to create a fresh workspace. Give your project a name like "Word Counter" and you're ready to start building.

You'll notice the interface is split into three main sections:

• Chat Panel - Where you'll communicate with the AI
• Browser Preview - A live Chromium browser showing your extension in action
• Logs Panel - Real-time debugging information from your extension

Step 3: Describe Your Extension

Now for the fun part. In the chat panel, describe what you want to build. For our word counter, you might type:

Build a browser extension that:
- Adds a toolbar button
- When clicked, counts all words on the current page
- Shows the count in a simple popup with a clean design

The AI will analyze your request and start generating the extension code. You'll see it working in real-time in the browser preview panel.

Step 4: Test and Iterate

Once the initial version is generated, you can test it immediately in the live browser preview. Navigate to any website and click your new extension icon to see the word count.

Want to make changes? Just describe them in the chat:

Make the popup look nicer with a dark theme and larger font

The AI will update your extension and you'll see the changes reflected instantly. This iterative process lets you refine your extension until it's exactly what you envisioned.

Step 5: Export and Publish

When you're happy with your extension, click the export button to download a zip file containing all the necessary files:

• manifest.json - The extension configuration
• popup.html - Your popup interface
• popup.js - The JavaScript logic
• content.js - Content script for page interaction
• icons/ - Extension icons in various sizes

You can then upload this package to the Chrome Web Store, Microsoft Edge Add-ons, or Firefox Add-ons marketplaces.

Understanding the Generated Code

Let's look at what the AI generated for our word counter extension. Here's a simplified version of the manifest file:

{
  "manifest_version": 3,
  "name": "Word Counter",
  "version": "1.0.0",
  "description": "Count words on any webpage",
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "permissions": ["activeTab", "scripting"]
}

Notice how the AI automatically chose Manifest V3, the latest extension format required by Chrome. It also selected the minimum necessary permissions to keep your extension secure and trustworthy.

Tips for Better Results

Here are some tips to get the most out of Extendable:

• Be specific - The more detail you provide, the better the results. Mention specific UI elements, colors, or behaviors you want.
• Iterate incrementally - Start with basic functionality and add features one at a time.
• Use the logs - The logs panel helps you debug issues and understand what your extension is doing.
• Test on real sites - Use the browser preview to test your extension on actual websites.

What's Next?

Now that you've built your first extension, the possibilities are endless. Here are some ideas for your next project:

• A dark mode toggle for any website
• A screenshot tool with annotation features
• A tab manager to organize your browsing
• A productivity timer that blocks distracting sites

Each of these can be built in minutes with Extendable. The key is to start with a clear idea of what you want and iterate from there.