Tinder Profile Data Scraper - Chrome Extension (Manifest V3)

---

🚀 Features

• Scrape Tinder profiles
• Sorting by distance
• TODO: Autolikes
• TODO: Autoresponses
• TODO: Data Exports
• Have an idea? Open issue->feature

---

Screenshots

---

🛠️ Development

Quick Start

npx degit kostia7alania/tinder-parser-bot my-webext
cd my-webext
npm install
npm run dev

• Build: npm run build
• Dev (Chrome/Firefox): npm run dev:chrome / npm run dev:firefox
• Build (Chrome/Firefox): npm run build:chrome / npm run build:firefox

Load the extension from the dist/chrome or dist/firefox folder in your browser.

Adding shadcn-vue Components

To add shadcn-vue components to your extension:

npx shadcn-vue@latest init
npx shadcn-vue@latest add button
npx shadcn-vue@latest add input
npx shadcn-vue@latest add card

The components will be automatically configured and ready to use in your Vue files.

---

🧩 Example: useBrowserStorage

const { data: syncSettings, promise } = useBrowserSyncStorage("settings", {
  theme: "dark",
  notifications: true,
  preferences: { language: "en", fontSize: 14 },
})

const { data: userProfile } = useBrowserLocalStorage("profile", {
  name: "John Doe",
  lastLogin: null,
  favorites: ["item1", "item2"],
})

console.log(syncSettings.value.theme) // 'dark'
console.log(userProfile.value.name) // 'John Doe'

---

🎨 shadcn-vue Integration

This template includes shadcn-vue for additional high-quality, accessible components. The project is pre-configured with:

• Component Installation: Use npx shadcn-vue@latest add <component> to add components
• Automatic Integration: Components work seamlessly with existing Tailwind CSS setup
• TypeScript Support: Full type safety for all shadcn-vue components
• Customizable: Easy theming and customization through CSS variables

Example: Adding a Button Component

npx shadcn-vue@latest add button

<template>
  <Button
    variant="default"
    size="sm"
    @click="handleClick"
  >
    Click me
  </Button>
</template>

<script setup lang="ts">
import { Button } from "@/components/ui/button"

function handleClick() {
  console.log("Button clicked!")
}
</script>

---

🔌 Plugins & Libraries

• Vite Plugins: unplugin-vue-router, unplugin-auto-import, unplugin-vue-components, unplugin-icons, unplugin-turbo-console, @intlify/unplugin-vue-i18n
• Vue Plugins: Pinia, VueUse, Notivue, Vue-i18n
• UI: Nuxt/UI, shadcn-vue, Tailwind CSS 4
• WebExtension: webext-bridge, webextension-polyfill
• Utilities: Marked (for markdown rendering)
• Coding Style: TypeScript, ESLint, Prettier

---

📁 Directory Structure

.
├── dist/                # Built extension files (chrome/firefox)
├── public/              # Static assets (icons, etc.)
├── scripts/             # Build/dev scripts
├── src/                 # Source code
│   ├── assets/          # Global assets
│   ├── background/      # Background scripts
│   ├── components/      # Shared Vue components
│   ├── composables/     # Vue composables (hooks)
│   ├── content-script/  # Content scripts
│   ├── locales/         # i18n files
│   ├── offscreen/       # Offscreen pages
│   ├── stores/          # Pinia stores
│   ├── types/           # TypeScript definitions
│   ├── ui/              # UI pages (popup, options, etc.)
│   └── utils/           # Shared utilities
├── manifest.config.ts   # Base manifest config
├── vite.config.ts       # Base Vite config
├── tailwind.config.cjs  # Tailwind CSS config
└── package.json         # Dependencies & scripts

---

💡 Coding Style

• TypeScript with strict types
• ESLint & Prettier enforced
• Vue 3 Composition API (<script setup>)
• File-based routing and auto-imports

📘 For detailed coding guidelines and AI agent rules, see AGENTS.md

---

🙏 Support

If you find this project useful, please consider supporting the author and starring ⭐ the repository.

---

👥 Contributors

Muhammad Ubaid Raza

Dreamliner

Jihoon Yi

Diego Ponciano

igorfz

hi2code

Null