# Building a Chrome Extension with D3.js

{% hint style="success" %}
This educational module teaches you step-by-step how to replicate the process shown in the video — building a **Sankey diagram Chrome extension** using **D3.js**, debugging, coordinating **multiple AI agents**, and deploying to the **Chrome Web Store**.
{% endhint %}

{% embed url="<https://youtu.be/xbvE_aoZ508?si=a3-4iKaSr8nn-esx>" %}

{% stepper %}
{% step %}
**Set up your environment and create a new Chrome Extension project**

Our goal: build a Chrome extension called **“Sankey Stone”** that visualizes flows using **D3.js**.

Files created during setup

* `manifest.json`
* `popup.html`
* `popup.css`
* `popup.js`
* Icon images (`icon16.png`, `icon32.png`, `icon48.png`, etc.)

Enable Developer Mode in Chrome and load the project:

chrome://extensions → Developer Mode → Load unpacked → Select your project folder

{% hint style="warning" %}
If you see errors like “Failed to load extension” or “Could not load icon 16.png,” double‑check your manifest paths and icon filenames. The transcript explicitly shows these initial debugging steps.
{% endhint %}
{% endstep %}

{% step %}
**Test the initial D3.js rendering**

After fixing missing icons, the extension loads but initially shows only “Loading diagram.”\
\
Debug this by taking a screenshot and feeding it to an AI agent for context by asking:

```
It says loading diagram — why isn’t the chart appearing?
```

An agent reviews the error and regenerates the `popup.js` so the Sankey chart appears using **D3.js**.

Result: a working, interactive diagram rendered inside the extension popup.
{% endstep %}

{% step %}
**Version control and GitHub setup**

Initialize a Git repository and commit:

```bash
git init
git add .
git commit -m "Initial Sankey Stone extension"
```

The developer asks the agent to create a GitHub repo and push the code.\
\
The agent handles authentication, creates the remote repo, and pushes all files automatically.
{% endstep %}

{% step %}
**Add a local test page and dynamic data**

Launch a simple local web server with a test page that outputs traffic flow data. The extension reads this data and updates the Sankey diagram dynamically.

Transcript example prompt:

```
Update the test data page so that it generates random labels and different contexts when I hit the regenerate button.
```

The agent edits the test page so that clicking the **Regenerate Test Page** button updates the diagram in real time.
{% endstep %}

{% step %}
**Coordinate multiple agents in parallel**

The video demonstrates running **multiple agents** in parallel. Each agent receives a different task:

| Agent | Task                                                                          |
| ----- | ----------------------------------------------------------------------------- |
| #1    | `Update the test data page to randomize labels and values`                    |
| #2    | `Change the refresh page button to regenerate the chart in a different style` |
| #3    | `Generate a useful README file for the project`                               |

You can approve actions automatically by enabling **Auto‑approve all agent actions** so background updates run without manual confirmation.

{% hint style="info" %}
Running multiple agents in parallel mirrors having a small team: one agent focuses on data generation, another on UI changes, and a third on documentation.
{% endhint %}
{% endstep %}

{% step %}
**Refine styles and interactions**

After the data layer works, now you can iterate on appearance:

```
Apply new color themes and improve the layout.
```

Changes applied:

* Support for multiple color themes and improved node layout.
* Hovering over links highlights connected nodes.
* Users can drag nodes to rearrange the layout.
* Added a “Switch Style” button to cycle between themes.

To support exporting diagrams, you can ask:

```
Add a button to download this image as a PNG.
```

The Warp agent writes the JS logic for PNG export and verifies that clicking the button saves a screenshot of the diagram.
{% endstep %}

{% step %}
**Add an API key setup screen**

Create a settings page where users can store API keys:

```
Add a settings page to enter the Anthropic API key and test it.
```

* The page allows testing the key to ensure it works.
* API keys are stored locally in the browser, not sent to a server.
  {% endstep %}

{% step %}
**Publish to the Chrome Web Store**

Package and submit the extension:

```bash
zip -r sankey_stone.zip *
```

Upload the ZIP file to <https://chrome.google.com/webstore/devconsole> and follow the prompts.

{% hint style="info" %}
The review may take a few weeks.
{% endhint %}
{% endstep %}
{% endstepper %}

***

### Summary

By following these transcript‑based steps, you can recreate the same workflow:

* Scaffold a Chrome extension with D3.js.
* Debug manifest and icon issues.
* Use agents to generate and refine code.
* Introduce multi‑agent parallel tasks for UI, data, and docs.
* Add interactivity, themes, and export options.
* Create an API key setup screen.
* Package and publish to the Chrome Web Store.

{% hint style="success" %}
You can follow this same pattern with your own idea: start small, scaffold with AI prompts, iterate using parallel agents, and deploy to production all from within Warp.
{% endhint %}