InvestorLift to Airtable Scraper (Chrome Extension)

This project involved the full-stack development of a production-ready Chrome Extension (Manifest V3) to solve a data-entry bottleneck for real estate investors. The extension provides a 1-click solution to automatically scrape all property data from an InvestorLift marketplace listing and seamlessly sync it to a user's Airtable base.

The core business value is automation- it saves users hours of manual data entry, eliminates human error and provides a perfectly normalized dataset for analysis, all managed from a simple, secure, and user-friendly interface.

As the sole developer, I was responsible for the entire project lifecycle, from architectural design to deployment. This included-

Designing a robust Manifest V3-compliant architecture using a service worker, content scripts, and an options page

Developing an intelligent DOM scraping engine that could handle dynamic content (AJAX) and was resilient to minor HTML changes

Building a secure integration layer with the Airtable REST API, including credential management and error handling

Creating a clean options page for configuration and a custom toast notification system for real-time user feedback

Core Technologies- JavaScript (ES6+), Chrome Extension Manifest V3

APIs & Services- Airtable REST API v0, Chrome Storage API, Chrome Scripting API

Problem- The property address was hidden behind a button that triggered an AJAX request. A simple page load scraper would fail.

Solution- I implemented an async revealAddress() function that programmatically clicked the button, then used a Promise-based waitForElement() helper (powered by MutationObserver) to wait for the address to appear in the DOM before scraping.

Problem- HTML structures on target websites can change, breaking the scraper.

Solution- I designed a findElement() helper that accepts multiple comma-separated selectors for a single piece of data. It tries each one in order, providing a robust fallback system. All selectors are stored in a central config.js file, so updates don't require digging through logic.

Problem- When testing an unpacked extension, Chrome clears Chrome.storage on every reload, which made testing the options page tedious.

Solution- I added a localStorage backup only for the options page. On load, it checks Chrome.storage first, but if empty, it restores credentials from localStorage, streamlining the development and testing cycle.

Process- The data flow is

Frontend Development- JavaScript (ES6+, Classes, Async/Await), HTML5/CSS3, DOM Manipulation

Browser Extension Development- Chrome Manifest V3, Service Workers, Content Scripts, Storage API

Backend & API Integration- REST API consumption, Bearer Token Auth, JSON data formatting, error handling

Software Engineering- Object-Oriented Programming (OOP), modular architecture, defensive coding, and comprehensive error handling