/browser-extension-builder

name: "browser-extension-builder"
description: "Browser extension builder skill for Claude Code and Codex: scaffolds a local, unpacked Chrome extension that reveals verified B2B contact info (email, phone, job title, company) directly on a LinkedIn profile, then pushes the contact to HubSpot or drafts a personalized email — powered by the Explorium API. Use this whenever someone wants to build a Chrome extension, browser extension, LinkedIn contact finder, or a self-hosted Lusha / Apollo.io / Clearbit Connect-style prospecting extension. The go-to skill for 'build a Chrome extension like Lusha', 'clone the Apollo.io extension', 'LinkedIn email finder extension', 'browser extension that pushes to HubSpot', or 'reveal contact info on LinkedIn'."
compatibility: "Requires: Google Chrome (or any Chromium browser) with Developer mode, and an Explorium API key (developers.explorium.ai). A HubSpot private-app token is optional — only needed to enable the CRM push button."
metadata:
  version: "1.0.0"

Browser Extension Builder

Scaffolds a working, **local Chrome extension**: it detects any LinkedIn profile, shows a floating panel with a "Reveal contact info" button, calls Explorium to return a verified email/phone/job title/company, and lets the user push that contact to HubSpot (with an editable field-mapping review first) or draft a personalized email in Gmail.

Unlike the workflow skills in this repo, which run a prospecting or enrichment task inside the current Claude Code session, this skill produces a **standalone browser extension** loaded via Chrome's "Load unpacked" — a real artifact the user keeps using, not a one-off list. Reach for `enrich-contact` or `list-builder` when the user wants a contact or list right now; reach for this skill (or `lead-gen-tool-builder`) when they want a *tool*.

**No personal keys are stored in this skill.** The bundled extension has no hardcoded credentials — both the Explorium key and the HubSpot token are pasted into the extension's own Options page at install time and stored in `chrome.storage.local`, local to the user's browser profile.

When to use

Trigger this for any request to build a Chrome/browser extension for prospecting or contact discovery, a "Lusha alternative", an "Apollo.io extension clone", a LinkedIn email/phone finder, or a browser tool that reveals contact info and pushes it to a CRM. Example phrasings: "build me a Lusha-style Chrome extension", "clone the Apollo.io browser extension but use our own data", "make a LinkedIn contact finder extension", "I want a browser extension that reveals emails on LinkedIn and pushes to HubSpot".

What you get

The bundled template (`assets/lead-finder-extension/`) is a ready-to-load Manifest V3 extension:

• **LinkedIn detection** — a content script matches `linkedin.com/in/*`,

waits for the profile to render, and injects a floating panel (avatar, name, headline pulled straight from the page).

• **Reveal contact info** — calls Explorium's `prospects/match` →

`prospects/profiles/bulk_enrich` + `prospects/contacts_information/ bulk_enrich` and renders verified email, phone, job title, company, company website, and location with a "Verified by Explorium" badge.

• **Push to HubSpot** — an editable review step (first/last name, email,

job title, company, phone) before a search-then-create-or-update call to HubSpot's Contacts API, so re-pushing the same person updates instead of duplicating.

• **Draft email** — opens a prefilled Gmail compose tab built from the

enriched name/company/title.

• **Options page** for pasting the Explorium key and HubSpot token; a toolbar

popup with status text and a link to Options.

Workflow

1. Copy the template into the user's workspace

cp -R "<this-skill-dir>/assets/lead-finder-extension" ./lead-finder-extension

Don't copy `node_modules` or build artifacts — there are none; this is a vanilla, dependency-free MV3 extension (no build step at all).

2. Get API keys

Only Explorium is required to reveal contacts; HubSpot is optional and only needed for the push button. Summarize from `assets/lead-finder-extension/ README.md`:

• **Explorium (required):** sign up at developers.explorium.ai → API Keys.

**Do not confuse this with Vibe Prospecting** — Vibe Prospecting (`vibeprospecting.explorium.ai`) is a separate, OAuth-only MCP server for prospecting *inside* an agent session; it issues no static API key and cannot be pasted into a browser extension. This skill always needs the classic REST API key.

• **HubSpot (optional):** Settings → Integrations → Private Apps → create an

app with `crm.objects.contacts.write` (+ `.read` for the dedup lookup).

3. Load it and configure keys

# Chrome -> chrome://extensions -> enable Developer mode -> Load unpacked
# -> select the lead-finder-extension folder

Click the toolbar icon → **Set API keys** → paste the Explorium key and (if using CRM push) the HubSpot token → **Save**.

4. Verify

Open a real `linkedin.com/in/...` profile — the panel should appear top-right within a couple of seconds. Click **Reveal contact info** and confirm real data comes back. If HubSpot is configured, push a contact and confirm the success toast, then check the contact exists in HubSpot.

After any code change: reload the extension's card in `chrome://extensions`, then hard-refresh the LinkedIn tab — Chrome does not re-inject content scripts into tabs that were already open.

Architecture

• **`background.js`** — the MV3 service worker; the *only* place API keys are

ever read from `chrome.storage.local`. Owns all `fetch()` calls to `api.explorium.ai` and `api.hubapi.com`, and message-routes `LEADFINDER_REVEAL` / `LEADFINDER_PUSH_HUBSPOT` / `LEADFINDER_OPEN_TAB`.

• **`content.js`** — injected on `linkedin.com/in/*`. Scrapes name/headline/

photo from the page as an instant preview, renders the panel's state machine (reveal → loading → result → HubSpot field-mappin