DEV Community: Johnson Fash

How I Built a Chrome Extension to Extract Emails and Phone Numbers – A Developer’s Journey

Johnson Fash — Sat, 29 Nov 2025 08:55:17 +0000

As a fullstack developer, I’m always on the lookout for tools that save time and automate repetitive tasks. One thing I noticed early in my career is that collecting contact information—emails and phone numbers—from websites can be tedious, especially if you’re doing it manually. Whether it’s for outreach, research, or building a curated contact list, manually scanning pages is slow, error-prone, and frankly, exhausting.

That’s when I decided to create my very first Chrome extension: an Email and Phone Extractor. This project wasn’t just about scraping data; it was about building a lightweight, user-friendly, and reliable tool that anyone could use ethically and efficiently.

You can add the Extension to your chrome browser here!

Why I Built This Extension

The idea came from my own workflow frustrations. I often needed contact information from company websites, portfolio pages, or public directories. Copying and pasting each email or number was draining. I wanted a tool that would scan the page automatically, organize the results, and give me a clean output I could use immediately.

I envisioned a simple Chrome extension that could:

Detect all email addresses and phone numbers on the current page.
Provide a clear interface to view, copy, or save the extracted contacts.
Handle dynamically loaded content without slowing down the browser.
Be easy for anyone to install and use, even without a technical background.

Getting Started with Chrome Extension Development

Building a Chrome extension was a new adventure for me. I started by diving into Chrome’s extension APIs. Chrome extensions have three main components:

Manifest file – defines the extension’s metadata and permissions.
Content scripts – allow the extension to interact with the web page’s DOM.
Background scripts – handle messaging, persistent storage, and long-running tasks.

Building a Clean and Intuitive Interface

One of my main goals was user experience. I wanted the extension to be simple but functional. The popup displays:

Emails and phone numbers in separate sections
A button to copy all results to the clipboard
A count of unique emails and phone numbers

Optional filters to remove duplicates

I wanted users to feel in control. They can extract all contacts with a single click and copy them without dealing with messy page content.

Ethical Considerations

While the extension can extract public information, I wanted to make ethical use clear. I added a disclaimer reminding users to respect privacy laws and not misuse the tool for spam. Emails and phone numbers collected should only be used for legitimate purposes, like reaching out professionally or conducting research.

Challenges Along the Way

Building this extension wasn’t without hurdles:

Handling large pages: Some websites have thousands of DOM nodes. I had to ensure the extension scanned efficiently without freezing the browser.
Dynamic content: Modern sites often load data asynchronously. Mutation observers were critical here.
False positives: Regex sometimes matched text that looked like emails or phone numbers but weren’t. I added filtering and validation to minimize this.
Cross-browser quirks: While building primarily for Chrome, I ensured that the extension’s logic could be adapted for other Chromium-based browsers like Edge and Brave.

Real-Life Use Cases

Here are some ways developers and professionals can benefit from this extension:

Sales and Business Development: Quickly gather leads from public directories and websites.
Recruitment: Extract contact information of potential candidates from company pages or LinkedIn profiles (respecting platform policies).
Networking: Build professional connections by compiling contact lists for outreach.
Research & Data Collection: Academics and researchers can collect emails for surveys or collaborations.

Because of these use cases, the extension isn’t just a productivity tool—it’s a way to automate routine tasks and focus on what truly matters.

Sharing My Work

After testing extensively and refining the features, I published the extension on the Chrome Web Store. The process taught me a lot about packaging, metadata, and compliance with Google’s publishing rules. I also shared it with friends and colleagues, who found it immediately useful.

For those interested, you can try it here: Email & Phone Extractor Chrome Extension

Lessons Learned

Building this Chrome extension was more than a coding exercise—it was a lesson in user experience, problem-solving, and ethical development. Some key takeaways:

Even small projects can have complex technical challenges
Regex is powerful but requires careful testing
Handling dynamic content is critical for modern web tools
Ethical considerations should never be overlooked

Conclusion

Creating the Email and Phone Extractor Chrome extension was a fulfilling journey. It started as a personal tool to save time and evolved into a polished extension that can help other developers, researchers, and professionals streamline their workflows.

If you’re a developer looking for a practical project, Chrome extension development is a fantastic way to combine front-end skills with practical problem-solving. And who knows—you might just build a tool that thousands of people end up using!

Email & Phone Extractor — One-Click Contact Collection for Any Website

Johnson Fash — Tue, 25 Nov 2025 10:04:03 +0000

A friend of mine spent hours manually collecting emails and phone numbers from websites. If you have, then you know it can drive one insane.

After watching a friend on a google meet “speed-run” through LinkedIn, and opened a couple of company websites for lead generation, I realized something: the tools that automate this were either too expensive or too limited.

So, as a developer, i built a solution — a Chrome extension that extracts emails and phone numbers from any webpage with just one click.

Here’s the story behind it, how it works, and why it could change the way you handle web-based contacts.

The Story Behind Email & Phone Extractor

About two months ago, a friend of mine, a digital marketer, was giving me tips on LinkedIn optimization.

While talking, he opened Google Maps, lists of companies, multiple website tabs, and internal links — basically navigating a maze while multitasking. I asked him,

“Bro, why is this so manual?”
He laughed and said:

“The extensions that automate this are too expensive for Nigerians.”
That one sentence sparked an idea. I love turning repetitive, manual tasks into clean, one-click solutions. That night, I started building the first version of Email & Phone Extractor, and now it’s a real Chrome extension that works today.

How It Works

Install the Extension
Available on the Chrome Web Store. One click installs it in seconds.

Navigate to Any Page
Works on LinkedIn, WhatsApp Web, company websites, and almost any Single Page Application (SPA).

Click the Extension Icon
Instantly extracts emails and phone numbers visible on the page, including content loaded dynamically via JavaScript.

View or Export Data
Export contacts as JSON or copy to clipboard. Manage them on your local machine or via our optional account sync feature.

Handles Complex Sites
Unlike simple scrapers, this tool digs into local and session storage, IndexedDB, and cached data to extract contacts even when they’re hidden from the DOM.

Why I Built It

The mission is simple: save time, reduce frustration, and make web contact collection accessible to everyone.

Whether you’re a marketer, sales professional, researcher, or just curious, this extension turns tedious manual scraping into a clean, one-click workflow.

Speed: Collect data in seconds, not hours.

Versatility: Works on almost any site.

Accessibility: No expensive subscriptions or complex setups.

Demo Video

Watch it in action:

https://youtu.be/GWFwXpZ9Tl4

Screenshots

Get Started

Install the Chrome extension, and start extracting emails and phone numbers in one click:

Let Me Introduce to You My Portfolio Website

Johnson Fash — Mon, 26 Apr 2021 14:45:59 +0000

Hello Everyone,

I have finally completed the built of my portfolio website

Features

Static Landing Page with CSS,HTML and JavaScript Custom Animation
Blog Posts
Custom Management System (WordPress Clone) with SEO Manager
Project Demo and more

Here is the Link: https://apluswebmaker.com

JavaScript On Scroll Animation Library

Johnson Fash — Thu, 22 Apr 2021 07:51:59 +0000

OnScroll Animation

On Scroll Animation Library is a simple JavaScript library for animation when element(s) are in view while scrolling the browser.

🚀 Demo

⚙ Installation

Option A.

NPM installation

npm install onscroll-animation --save

Import:

import OnScrollAnimation from "onscroll-animation";

const animate = new OnScrollAnimation({
  ...
});

Option B.

Use CDN - load directly from jsDelivr CDN

<script src="https://cdn.jsdelivr.net/npm/onscroll-animation@latest/dist/animate.bundle.js"></script>


<script>
var animate = new OnScrollAnimation({
  ...
});
<script>

Use

var animate = new OnScrollAnimation({
        ".grid11": {
          parameters: [
            "animation-duration: 0.8s",
            "animation-delay: 1s",
            "animation-fill-mode: forwards"
          ],
          to: ["transform: translateX(-150px)"]
        },
        "section.one .left, section.three .book, section.five .other": {
          from: ["left: -500px"],
          to: { left: "0px" }
        },
        "section.one .right, section.three .complex, section.five .person": {
          from: ["right: -500px"],
          to: ["right: 0px"]
        },
        "section.two": {
          from: ["opacity: 0", "transform: translateY(100px)"],
          to: [ "opacity: 1", "transform: translateY(0px)"]
        },
        ".grid10":{
          parameters: ["animation-duration: 0.8s", "animation-fill-mode: forwards"],
          to: ["transform: translateY(-110px)"]
        }
      });
      animate.defaultParam(["animation-duration: .8s", "run: once", "animation-fill-mode: forwards","pixel-correction: -100px", "animation-time-function: ease-out"]);
      animate.init();

Explanation

OnScrollAnimation class

OnScrollAnimation({....}) accept only an object {...}. This object contains css selectors like ".grid10", "section.two img, section.four img" etc.

Basically, this object properties can be any css selector, which a document.querySelector() method accepts.

The value for the CSS Selector i.e ".grid4" must be an object which holds various properties and values for animation to work.

Properties

1. `parameters:[...] or parameters: {...}` ;

This define @keyframes property for each element i.e parameters: [...] or parameters: {...) can be an array containing strings of regular css or object containing its javascript equivalent like the example below:

run

run can be omitted or included. This lets you determine if animation runs once or continous anytime an animated element is in view.

pixelCorrection

pixel-correction or pixelCorrection use to make correction (in pixel) to when animation starts for an element. i.e 100px means scroll 100px downward before animation starts for an element in viewport, and -100px the opposite.

parameters: [
  "animation-duration: 1s",
  "animation-delay: 2s",
  "animation-fill-mode: forwards",
  "animation-time-function: ease-in",
  "pixel-correction: -200px",  // makes correction to how far down or up to go before element in view animates
  "run: once",   //can be ommited. default is to run everytime element is in view
    ..........
  ]

  or using object

  parameters: {
  animationDuration: "1s",
  animationDelay: "2s",
  animationFillMode: "forwards",
  animationTimeFunction: "ease-in",
  pixelCorrection: "-200px",
  run: "once",
    ..........
  ]

NOTE:

There is non shortcut like "animation: drop 1s forwards" for now. Please specifically list out your @keyframes by name and function like in the example above.

Properties of a selector i.e parameters, **from**, to, 0%, **75%** and more can both be an array, containing string equivalent of your regular css property or an object containing its equivalent in javascript. i.e "max-width" is maxWidth when working with objects.

2. from: [...] or from:{...}

Similar to css property from {.....} used in @keyframe. i.e from: ["width: 0px","height:20px"....]

3. to: [...] or to: {....}

Similar to css property to: {.....} used in @keyframe after defining from {...} i.e to: {width: "100%",height: "200px"}

4. 0: [...], 50: [...], 100:{.....}

This is similar to using percentage in @keyframes, only difference is not including the % sign i.e

const animation = OnScrollAnimation({
  "#imag1": {
    parameters: [.....],
    0: ["width: 20px".....],
    30: [......],
    80: [.....]
  },
  ..........
});
animation.init();

Using custom css

Without defining animation @keyframes in javascript, custom css can be used with each element by including a class that defines the @keyframe in your stylesheet i.e

<body>
  <img alt="ball" scr="./asset/ball.jpg" class="image1"/>
</body>

<style>
  .move {
    animation: ballmove 1s forwards;
  }
  @keyframes ballmove{
    from {
      transform: -100px;
    }
    to {
      transform: 300px;
    }
  }
</style>

<script>
const animation  = new OnScrollAnimation({
  ".image1": {
    css: "move"  // adds custom css class only
  },
  "img": {
    css: "bounce"
  }
});
animation.init();
</script>

Animation.defaultParams()

The Animation method defaultParams() defines a default paramter for each selector. Meaning you can ommit the parameters property for every element if they are all thesame i.e

const animation = new OnScrollAnimation({
  ".grid1, .grid2": {
    from: [....],
    to: [....]
  },
  ".grid4": {
    0: [...],
    50: [...]
  }
  ........
});
animation.defaultParams(["animation-duration: 1s", "animation-fill-mode: forwards"]); // or animation.defaultParams({animationDuration: "2s".......});
animation.init();

You can also ovaride the defaultParams() method for an element by specifying its own parameters i.e

const animation = new OnScrollAnimation({
  ".grid1, .grid2": {
    from: [....],
    to: [....]
  },
  ".grid4": {
    parameters: [....]  // override defaultParams
    0: [...],
    50: [...]
  }
  ........
});
animation.defaultParams(["animation-duration: 1s", "animation-fill-mode: forwards"]); // or animation.defaultParams({animationDuration: "2s".......});
animation.init();

Animation.init()

The init() method initialize the animation to run after the page loads.

More Example:

const animation = new OnScrollAnimation({
        ".one": {
          parameters: [
            "animation-duration: 1s",
            "pixel-correction: -100px",
            "animation-delay: .5s",
            "animation-time-function: linear"
          ],
          from: [
            "transform: translateY(-1000px)"
          ],
          to: [
            "transform: translateY(0px)"
          ]
        },
        ".two": {
          parameters: [
            "animation-duration: 1s",
            "pixel-correction: -300px"
          ],
          from: {
            transform: "rotate(0deg)"
          },
          to: [
            "transform: rotate(360deg)"
          ]
        },
        "article.three": {
          parameters: {
            animationDuration: "1s",
            animationFillMode: "forwards",
            animationTimingFunction: "ease-in"
          },
          0: [
            "transform: translateX(-1000px)",
          ],
          50: [
            "transform: translateX(1000px)",
            "background-color: red"
          ],
          100: [
            "transform: translateX(0px)"
          ]
        },
        ".four": {
          parameters: [
            "animation-duration: 1s"
          ],
          from: [
            "transform: skewX(20deg) translateX(-1000px)"
          ],
          to: [
            "transform: skewX(0deg) translateX(0px)"
          ]
        },
        ".five": {
          parameters: [
            "animation-duration: 1s"
          ],
          from: [
            "position: relative",
            "right: -1000px",
            "transform: skewX(-20deg)"
          ],
          to: [
            "position: relative",
            "right: 0px",
            "transform: skewX(0deg)"
          ]
        },
        ".six": {
          parameters: [
            "animation-duration: 2s",
            "animation-fill-mode: forwards",
          ],
          0: [
            "transform: translateY(0)"
          ],
          75: [
            "transform: translateY(50vh)"
          ]
        },
        ".seven": {
          parameters: [
            "animation-duration: 1.5s"
          ],
          from: [
          "transform: rotateY(0deg)"
          ],
          to: [
          "transform: rotateY(360deg)"
          ]
        }
      });
      animation.init();