🗺️ Maps Scrapper Extension

Extensión web para navegador con React que permite hacer scrapping de datos en Google Maps.

• • • • •

About Maps Scrapper Extension

Este proyecto, creado con React y Vite, es una extensión para Google Chrome que permite a los usuarios realizar scraping de los resultados de búsqueda en Google Maps. Una vez instalada y activada, la extensión extrae automáticamente toda la información de los resultados de búsqueda (nombre, dirección, calificación, número de reseñas, etc.) y la presenta de manera organizada para su uso posterior en análisis de datos o investigación de mercado, permitiendo descargar los datos como archivo .csv o .json.

Diseñada para recopilar información de negocios, lugares, profesionales listados en Google Maps. Permitiendo un acceso rápido para análisis de mercado, leads y generación de bases de datos. Especialmente útil para obtener insights comerciales.

Note

La extracción de datos puede no ser perfecta.

🛠️ Tecnologías utilizadas

• React: Framework principal del proyecto, en su última versión.
• Tailwind: Framework css para añadir estilos.
• Eslint y Prettier: Formato y calidad de código.

🚀 Features

• Diseño: Diseño minimalista, accesible e intuitiva.
• Scrapping: Captura toda la información visible de los resultados de búsqueda en Google Maps.
• Data: Obtiene detalles como nombre del lugar, dirección, calificación, número de reseñas, tipo de negocio y más.
• Exportación de datos (simulada): Permite la exportación de los datos extraídos en formato .csv como .json para facilitar su análisis.

Usage

1. Ve a https://www.google.com/maps/search/.
2. Realiza una búsqueda.
3. Abre la extensión.
4. Inicia el scrapping.
5. Descarga los datos 🎉

Estructura de Carpetas

dist/                              # Extension
public/
├── ...
└── manifest.json                  # Extension config
src/
├── components/                    # Components folder
├── hooks/                         # Custom Hooks
├── models/                        # Interfaces
├── utils/                         # Browser actions and other utilities
├── App.tsx
├── main.tsx
└── styles.css                     # Global styles and tailwind config

Instalación y ejecución

Warning

Debes hacer build y cargar la extensión en el navegador antes de usar

1. Navega a chrome://extensions/.
2. Activa el Developer mode.
3. Clickea el botón "Load unpacked extension".
4. Selecciona el directorio de la carpeta /dist. Importante.

Instalar dependencias

npm install

Build on save

npm run dev

Build

npm run build