How to build a Chrome Extension using Emergent: Build a personalised connection request generator for LinkedIn

In this tutorial, you’ll learn how to build a Chrome extension from scratch using Emergent. We’ll create a tool called the LinkedIn Auto-Personalizer, which automatically reads information from any LinkedIn profile and generates a personalized connection message with the help of AI.

If you’ve never built a Chrome extension before, don’t worry. This guide will walk you through everything step by step - from understanding how extensions work to seeing how Emergent’s agents build one for you. By the end, you’ll have a working Chrome extension ready to test in your browser.

By following this tutorial, you’ll understand:

• How a Chrome extension is structured and how its different files work together

• How to extract information from a webpage using JavaScript and the DOM

• How to connect a simple user interface to backend logic and AI responses

• How Emergent’s multi-agent system - frontend, backend, and testing agents - collaborates to build the project automatically

You’ll not only get a functioning extension but also a clear understanding of how the underlying code works.

What the Extension Does

Here’s how your LinkedIn Auto-Personalizer will work:

1. You open a LinkedIn profile of any user.

2. From the Chrome extensions panel, you click on the LinkedIn Auto-Personalizer icon to open the popup.

3. Inside the popup, you click on “Extract and Generate.”

4. The extension automatically reads the person’s name, job title, company, and profile headline from the page.

5. It then sends this data to GPT-4o mini through Emergent’s Universal Key and generates a short, personalized LinkedIn connection message of less than 300 characters.

6. The generated message appears instantly in the popup, ready for you to copy or regenerate.

By the end, you’ll have a simple yet powerful networking tool that saves time and helps you send thoughtful, personalized connection requests in seconds.

How Chrome Extensions Work

Before building the LinkedIn Auto-Personalizer, it’s important to understand how a Chrome extension actually works. This section will give you a clear picture of the moving parts inside an extension and how they interact with each other.

A Chrome extension is essentially a small web application that runs inside the browser. It has access to the web pages you visit and can interact with them, display custom user interfaces, and even make API calls. To make this possible, every extension is made up of a few key components.

Core Components of a Chrome Extension

Every Chrome extension, regardless of its purpose, is built from a few key components that define its logic, appearance, and browser interaction. Let’s break down the main parts of our LinkedIn Auto-Personalizer extension and understand what each one does.

Our folder structure looks like this:

icons/

background.js

manifest.json

popup.html

popup.js

popup-styles.css

README.md

TROUBLESHOOTING.md

1. manifest.json

This is the heart of your Chrome extension. It’s a JSON file that tells Chrome everything it needs to know about your project name, version, permissions, and the scripts it should run.

In our case, it defines:

• The popup that appears when a user clicks the extension icon

• The background script that runs in the background

• The permissions to access LinkedIn pages

You can think of it as the blueprint of your extension. Without this file, Chrome won’t recognize your folder as an extension.

2. background.js

This is the background script that manages the overall workflow. It listens for user actions, coordinates communication between different parts of the extension, and can inject scripts into web pages.

For the LinkedIn Auto-Personalizer, background.js handles the logic that allows our popup to talk to the LinkedIn page — specifically when extracting profile details.

3. popup.html

This file defines the small interface that appears when you click the extension icon in Chrome. It’s a lightweight HTML file that acts like a mini webpage. In our case, it includes a button labeled “Extract and Generate”, which the user clicks to extract data and generate a personalized message.

4. popup.js

This script powers the popup’s interactivity. It listens for the “Extract and Generate” button click, sends a message to the background script, and displays the generated output once it’s ready. Essentially, it connects the frontend (popup UI) to the backend logic (background script and API).

5. popup-styles.css

This file styles the popup. It controls how your buttons, text, and layout appear — ensuring the interface looks clean and user-friendly.

6. icons/

This folder contains the icon images that represent your extension in the Chrome toolbar and extension manager. Chrome typically expects a 128x128 icon, but you can include multiple sizes for different display contexts.

Together, these files make up the foundation of a Chrome extension:

• manifest.json defines what it is.

• background.js handles logic behind the scenes.

• popup.html, popup.js, and popup-styles.css handle what the user sees and interacts with.

• icons/ provides visuals.

Building the Chrome Extension on Emergent

Now that we understand how Chrome extensions are structured, let’s move on to the most exciting part - actually building one on Emergent.

Emergent lets you build production-ready Chrome extensions just by describing your idea in natural language. You don’t have to manually create or connect any files; all you need to do is explain what the extension should do. Emergent will then generate all the necessary code, design a simple interface, and prepare a download page where you can get your full project as a .zip file.

Here’s the exact prompt you can use to build the LinkedIn Auto-Personalizer extension:

Prompt:
Build a Chrome extension called LinkedIn Auto-Personalizer that automatically extracts basic information from a person’s LinkedIn profile (like name, job title, company, and headline) and generates a personalized connection message using AI.

When a user opens any LinkedIn profile, the extension should show a small popup on the page with a button that says “Generate Message”. Clicking the button should use an AI model to create a short, friendly, and customized LinkedIn connection note (2–3 lines - not more than 300 characters).

The popup should also allow the user to copy the message or regenerate it. There should be a landing page where I can download the extension files.

Answer the Agent’s Clarifying Questions

Before it starts generating code, Emergent’s Build Agent will ask a few clarification questions to ensure the output matches your expectations. These questions help it decide the best AI integration, data handling method, and design approach.

For the LinkedIn Auto-Personalizer, the agent asks questions like:

1. AI Integration: Which AI provider should be used for generating messages?
   Options: OpenAI (GPT-4), Claude, Gemini, or Emergent’s Universal Key.

2. LinkedIn Profile Scraping: Should the agent extract visible data directly from the page, or mock data for demonstration?

3. Extension Architecture: Should the processing happen client-side (in the browser) or via your own backend API?

4. Landing Page Design: Should it follow a specific style or decide automatically?

To keep things simple and client-side, here are the responses you can give:

1. Use Emergent LLM Key

2. Extract visible profile data directly

3. Process everything client-side

4. Modern minimal design with a clear “Download Extension” CTA

These answers ensure the extension runs entirely within the browser, integrates with Emergent’s built-in AI key, and has a clean, ready-to-use landing page.

Note: The questions asked by the agent will differ from user to user

The agent will then start building the landing page with the download button and the code files for the chrome extension. This is how the landing page looks like for me:

Now when you click on the “Download Free Extension” Button you will get a .zip file with the all the code files required for the Chrome Extension. Once you have all the required files unzipped we can proceed to actually uploading the extension to Chrome.

Inside the downloaded ZIP, you’ll find everything pre-connected and ready to use. This is how the file structure will look like. 

icons/

background.js

manifest.json

popup.html

popup.js

popup-styles.css

Installing and Testing Your Chrome Extension 

Once you’ve downloaded your Chrome extension files from Emergent, it’s time to load and test it in your browser. This part ensures everything works smoothly - from extracting profile details to generating personalized messages.

Follow these steps to install and test your extension locally.

Open Chrome’s Extensions Page

1. Open Google Chrome.

2. In the address bar, type chrome://extensions and press Enter.

3. In the top-right corner, turn on the toggle for Developer mode.

You should now see three buttons: Load unpacked, Pack extension, and Update.

Load the Extension

1. Click on Load unpacked.

2. Navigate to the folder you just extracted.

3. Select the folder and click Open.

Chrome will instantly load your extension. You’ll now see the LinkedIn Auto-Personalizer icon appear in your browser toolbar.

Test It on LinkedIn

1. Go to any LinkedIn profile page in your browser.

2. Click the LinkedIn Auto-Personalizer icon from the extensions panel.

3. The popup will appear with a button labeled “Generate Message.”

4. Click the button.

The extension will extract the person’s name, job title, company, and headline directly from the page and use Emergent’s Universal AI Key (powered by GPT-4o Mini) to create a short, friendly LinkedIn connection message under 300 characters.

You’ll then see the generated message appear in the popup. You can:

• Copy the message to your clipboard, or

• Regenerate a new version instantly.

Building a Chrome extension with Emergent simplifies what used to be a complex process of setting up manifests, writing background scripts, and connecting front-end logic. With just a single well-structured prompt, users can now generate fully functional extensions packaged and ready to download - all without coding expertise.

The LinkedIn Auto-Personalizer is a great example of how quickly you can turn an idea into a working product. Within minutes, you can create an AI-powered extension that integrates seamlessly with real-world workflows like LinkedIn outreach.

What Can Be Improved

1. UI Customization - Allow users to choose between multiple popup styles, themes, or add dark mode.

2. Custom Prompts - Enable users to edit or fine-tune the AI prompt directly inside the popup to get different message tones.

3. Analytics Dashboard - Add a dashboard showing total connection requests generated, average message length, or tone distribution.

4. Contextual Awareness - Extend functionality to read sections like “About” or “Experience” for deeper personalization.

5. Multi-Platform Support - Expand the extension’s use cases to platforms like Twitter (X) or AngelList.

By continuously refining both the design and logic, this project can evolve from a single-purpose Chrome extension into a versatile personalization assistant that adapts across platforms and workflows.