Agent skill

Browser Extension Builder

by explorium-ai in explorium-ai/gtm-skills

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…

MITAuto-check passedSales & Support

Install Browser Extension Builder

skills CLI
$ npx skills add explorium-ai/gtm-skills --skill browser-extension-builder -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install explorium-ai/gtm-skills browser-extension-builder --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/explorium-ai/gtm-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/browser-extension-builder .claude/skills/browser-extension-builder && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
browser-extension-builder
GitHub stars
163
Token cost
~2.6k tokens
SKILL.md length
1,173 words
Files
17 (incl. assets)
Skills in repo
17
Repo updated
First seen
Licence
MIT

At a glance

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…

  • Works in 4 steps: Copy the template into the user's… → Get API keys → Load it and configure keys → …
  • Tasks that involve Browser extensions
  • SKILL.md covers When to use, What you get, Workflow and Architecture, plus 2 more sections
  • Runs JavaScript scripts from its folder; calls curl and python3

What it does

Browser Extension Builder is an agent skill from explorium-ai/gtm-skills. 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…

Its SKILL.md is about 2.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 20 other files, including assets (for example `assets/lead-finder-extension/README.md`, `assets/lead-finder-extension/background.js` and `assets/lead-finder-extension/content.js`). Compatibility notes: Requires: Google Chrome (or any Chromium browser) with Developer mode, and an Explorium API key (developers.explorium.ai). A HubSpot private-app token is…

It sits in Sales & Support, covering Browser extensions. It works with Chrome Extensions, LinkedIn and HubSpot. The repository describes itself as: GTM Skills for Claude & Codex. The licence is MIT.

When your agent uses it

  • Tasks that involve Browser extensions

Example prompts

  • “build a Chrome extension like Lusha”
  • “clone the Apollo.io extension”
  • “LinkedIn email finder extension”
  • “/browser-extension-builder”

Requirements

  • Python 3
  • Node.js
  • Compatibility (from SKILL.md): 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.

Workflow steps

4 steps, taken from the step headings in SKILL.md.

  1. Copy the template into the user's workspace
  2. Get API keys
  3. Load it and configure keys
  4. Verify

What it can do on your machine

Read from SKILL.md and the folder at commit f0efa6b. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships script files (JavaScript), which the agent can run.

    Shell commands in SKILL.md call:

    • curl
    • python3

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use curl, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

  • 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.

    From compatibility in the SKILL.md frontmatter.

Context cost

Browser Extension Builder loads about 2.6k tokens when it runs. Until then it costs about 183 tokens; SKILL.md has 1,173 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~183
When it runs · the whole SKILL.md, loaded when a task matches
~2.6k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from explorium-ai/gtm-skills at commit f0efa6b, republished under its MIT licence (© explorium-ai). 1,173 words, ~2,562 tokens.

Download SKILL.mdSave it as .claude/skills/browser-extension-builder/SKILL.md (or your agent's skills folder). This skill also uses 16 other files; get the full folder from GitHub.
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
bash
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
bash
# 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-mapping review), and never touches an API key directly — it only messages the background worker.
  • styles/tokens.css — the entire visual identity as CSS variables (--leadfinder-primary, --leadfinder-ink, radii, shadows, font stack). content.css, popup.html, and options.html all consume these tokens rather than hardcoding colors.
  • manifest.json — note web_accessible_resources for the icon PNGs. MV3 blocks a content script from loading extension assets (like the toolbar icon shown inside the injected panel) unless they're explicitly declared there — easy to forget and the failure mode is a silently broken <img> in the panel.
Show full SKILL.md (484 more words)Show less

Customizing / restyling to match a brand

This is the most common follow-up request: "make it look like Lusha", "use Apollo.io's design system", "give it a HubSpot-native look". Do this:

  1. Research the real brand before guessing. Web search and generic knowledge about a company's colors are frequently wrong (a blue-brand guess for a company that's actually lime-green is a realistic failure mode). The most reliable signal is the company's own favicon or Chrome extension icon — fetch it directly and read the pixel colors:
    bash
    curl -sL <https://company.com/favicon.ico> -o /tmp/favicon.ico
    python3 -c "
    from PIL import Image
    img = Image.open('/tmp/favicon.ico').convert('RGBA')
    print('corner (bg):', img.getpixel((2, 2)))
    print('center (mark):', img.getpixel((img.width//2, img.height//2)))
    "
    Cross-check against the target's Chrome Web Store listing and any "brand/visual identity" blog posts before finalizing a palette.
  2. Update styles/tokens.css with the real hex values — rename the token if its semantics changed (e.g. --leadfinder-primary staying "primary" is fine; don't leave a token named -lime holding a blue hex).
  3. Regenerate the icon to match the brand's mark. For a simple geometric shape, hand-write the SVG. For anything more organic, generate it with an image model and composite it onto an exact-hex background with Pillow so the brand color is pixel-accurate rather than whatever the model approximated:
    python
    from PIL import Image, ImageDraw
    bg = Image.new("RGBA", (128, 128), (0, 0, 0, 0))
    ImageDraw.Draw(bg).rounded_rectangle([0, 0, 127, 127], radius=18, fill=(R, G, B, 255))
    mark = Image.open("generated_mark.png").convert("RGBA").resize((92, 92))
    bg.alpha_composite(mark, (18, 18))
    Then rasterize all four sizes with rsvg-convert (if you kept an SVG source) or export directly from the composite.
  4. Rename display strings (manifest.json name, popup/options headers, the panel title in content.js) — leave the leadfinder- CSS/JS class prefix alone unless the user asks for a full fork/rename, since renaming it everywhere is mechanical but easy to half-do and break a selector.
  5. Show the result before calling it done. Render the popup, options page, and result panel as standalone HTML files against styles/ tokens.css + content.css in a browser preview, and look at the screenshot yourself — don't assume a hex swap looks right.
  6. Never reproduce a trademarked logo pixel-for-pixel if the resulting extension will be shared or published anywhere beyond the requester's own local machine — recreate the style (color, shape language, motion weight), not a copy of the asset itself. This matters more once the output leaves a single person's local chrome://extensions page.

Limitations

  • LinkedIn's DOM changes over time; content.js polls for the profile <h1> (up to ~6s) rather than assuming a fixed load time, but exact CSS selectors may need updating if LinkedIn changes its markup.
  • HubSpot auth is a private-app token (simple, but scoped to one HubSpot account) — there's no OAuth flow, so this isn't a multi-tenant install.
  • This produces a local, unpacked extension for personal/team use, not a Chrome Web Store submission — there's no review-ready packaging, privacy policy, or store listing here.
  • Vibe Prospecting cannot power this extension's reveal step (see above) — only a classic Explorium REST API key works.

© explorium-ai, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 16 other files (assets) in skills/browser-extension-builder of explorium-ai/gtm-skills.

  • SKILL.md
  • assets/lead-finder-extension/.gitignore
  • assets/lead-finder-extension/LICENSE
  • assets/lead-finder-extension/README.md
  • assets/lead-finder-extension/background.js
  • assets/lead-finder-extension/content.css
  • assets/lead-finder-extension/content.js
  • assets/lead-finder-extension/icons/icon.svg
  • assets/lead-finder-extension/icons/icon128.png
  • assets/lead-finder-extension/icons/icon16.png
  • assets/lead-finder-extension/icons/icon32.png
  • assets/lead-finder-extension/icons/icon48.png
  • assets/lead-finder-extension/manifest.json
  • assets/lead-finder-extension/options.html
  • assets/lead-finder-extension/options.js
  • assets/lead-finder-extension/popup.html
  • assets/lead-finder-extension/styles/tokens.css

Open the folder on GitHubat commit f0efa6b

Compare with similar skills

Browser Extension Builder next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Browser Extension Builder compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Browser Extension Builder this skillexplorium-ai/gtm-skills163—~2.6kAutomated safety check: PassMIT
Job Applierhanzili/hanzi-browse177—~2.4kAutomated safety check: PassCustom licence
Linkedin Prospectorhanzili/hanzi-browse177—~1.5kAutomated safety check: PassCustom licence
Distribution Channelskostja94/marketing-skills1k—~1kAutomated safety check: PassMIT
Canvas Capture Extensionremotion-dev/remotion62k—~903Automated safety check: PassCustom licence
Wxt Browser Extensionsvantezzen/skip-silence4682 repos~1.9kAutomated safety check: PassMIT

Similar skills

  • Job Applier

    hanzili/hanzi-browse

    Apply to jobs from your real browser. An agent skill from hanzili/hanzi-browse.

    177 GitHub stars~2.4k tokensUpdated 5 mo ago
    Productivity & AutomationAuto-check passed
  • Linkedin Prospector

    hanzili/hanzi-browse

    Find people on LinkedIn and send personalized connection requests.

    177 GitHub stars~1.5k tokensUpdated 5 mo ago
    Productivity & AutomationAuto-check passed
  • Distribution Channels

    kostja94/marketing-skills

    When the user wants to plan product distribution via marketplaces, app stores, or third-party platforms.

    1k GitHub stars~1k tokensUpdated 2 days ago
    Sales & SupportAuto-check passed
  • Canvas Capture Extension

    remotion-dev/remotion

    Official

    Rebuild, install, and reload the private Remotion Canvas Capture unpacked Chrome extension.

    62k GitHub stars~903 tokensUpdated today
    Media & CreativeAuto-check passed
  • Wxt Browser Extensions

    vantezzen/skip-silence

    WXT browser extension performance optimization guidelines. An agent skill from vantezzen/skip-silence.

    468 GitHub starsUsed in 2 repos~1.9k tokens
    DevelopmentAuto-check passed
  • Kimi Webbridge

    MoonshotAI/kimi-code

    Kimi Browser Extension(Kimi 浏览器扩展,原 Kimi WebBridge)lets AI control the user's real browser — navigate, click, type, read, screenshot, and interact with any website using the user's actual login…

    7.8k GitHub stars~3.6k tokensUpdated today
    DevelopmentAuto-check passed

More from explorium-ai/gtm-skills

All 17 skills in this repo
  • Lead Gen Tool Builder

    explorium-ai/gtm-skills

    Lead generation tool builder skill for Claude Code and Codex: scaffolds a complete, self-hostable, ZoomInfo-style B2B lead-generation web app — company & contact search UI, firmographic and…

    163 GitHub stars~1.8k tokensUpdated 14 days ago
    Auto-check: notes
  • Clean Data

    explorium-ai/gtm-skills

    Data cleaning, entity matching, and deduplication skill for Claude Code and Codex: triage, standardize, and validate a CSV, Excel, or JSON list of B2B companies or contacts before enrichment.

    163 GitHub stars~2k tokensUpdated 14 days ago
    Auto-check passed
  • Abm Diy Campaign

    explorium-ai/gtm-skills

    ABM campaign skill for Claude Code: run a full Account-Based Marketing campaign end-to-end — from ICP definition to live LinkedIn Ads.

    163 GitHub stars~2.4k tokensUpdated 14 days ago
    Auto-check passed
  • Account Contact Shortlist

    explorium-ai/gtm-skills

    Contact data skill for Claude Code and Codex: build a ranked shortlist of decision-makers and contacts at a target company for outbound prospecting, deal acceleration, or renewal/expansion plays.

    163 GitHub stars~1.6k tokensUpdated 14 days ago
    Auto-check passed
  • Account Fit Rank

    explorium-ai/gtm-skills

    Lead scoring and buying signals skill for Claude Code and Codex: rank a list of accounts by ICP fit, buying intent, real-time trigger events, and workforce momentum.

    163 GitHub stars~2k tokensUpdated 14 days ago
    Auto-check passed
  • Account Research

    explorium-ai/gtm-skills

    Account research skill for Claude Code and Codex: generate a high-signal company intelligence brief including firmographics, technographics, funding history, hiring signals, business events, recent…

    163 GitHub stars~2.8k tokensUpdated 14 days ago
    Auto-check passed

Questions about Browser Extension Builder

What does Browser Extension Builder do?

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…. Browser Extension Builder is an agent skill from explorium-ai/gtm-skills. 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.

When should I use Browser Extension Builder?

Browser Extension Builder fits situations like: tasks that involve Browser extensions.

How do I install Browser Extension Builder in Claude Code?

Run `npx skills add explorium-ai/gtm-skills --skill browser-extension-builder -a claude-code`. Or copy the skill folder (skills/browser-extension-builder in explorium-ai/gtm-skills) into .claude/skills/browser-extension-builder in your project. Claude Code loads it when a task matches its description.

How do I install Browser Extension Builder in Codex?

Run `npx skills add explorium-ai/gtm-skills --skill browser-extension-builder -a codex`. Or copy the skill folder (skills/browser-extension-builder in explorium-ai/gtm-skills) into .agents/skills/browser-extension-builder in your project. Codex loads it when a task matches its description.

Can I use Browser Extension Builder in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add explorium-ai/gtm-skills --skill browser-extension-builder -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/browser-extension-builder, .gemini/skills/browser-extension-builder, .github/skills/browser-extension-builder and .opencode/skills/browser-extension-builder in your project.

What does Browser Extension Builder need to run?

Going by SKILL.md and its folder, Browser Extension Builder needs JavaScript for the scripts in its folder and the command-line tools its instructions call (curl and python3). Our summary lists: Python 3; Node.js. Compatibility (from SKILL.md): 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..

Does Browser Extension Builder access the network?

SKILL.md contains no URLs. Its commands use curl, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Browser Extension Builder safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Browser Extension Builder use?

Browser Extension Builder is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Browser Extension Builder use?

About 2.6k tokens (SKILL.md is roughly 10k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Browser Extension Builder?

Skills that share tags, products or a category with Browser Extension Builder: Job Applier (hanzili/hanzi-browse, 177 stars), Linkedin Prospector (hanzili/hanzi-browse, 177 stars), Distribution Channels (kostja94/marketing-skills, 1k stars) and Canvas Capture Extension (remotion-dev/remotion, 62k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Browser Extension Builder?

explorium-ai (a GitHub organization) maintains it in explorium-ai/gtm-skills, which has 163 GitHub stars. The repository holds 17 skills in this directory. The repository was last updated on September 24, 2026.

Source: explorium-ai/gtm-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.