GitHub - IvanR3D/pokeinvasion_chrome-extension: Transform any website into your personal Pokemon hunting ground!

5 min read Original article ↗

Pokemon Invasion Chrome Extension

Transform any website into your personal Pokemon hunting ground! This Chrome extension spawns Pokemon from all generations on any webpage, complete with an interactive Pokemon GO-style catching mini-game and persistent collection system.

PokeInvasion Demo Version Chrome Extension

Demo of PokeInvasion Extension

Features

  • Universal Pokemon Spawning: Works on any website - social media, news sites, anywhere!
  • Interactive Catching Game: Pokemon GO-inspired swipe-to-throw mechanics
  • Complete Pokedex: Track all caught Pokemon with detailed stats and type information
  • Generation Selection: Choose from 8 Pokemon generations (898+ Pokemon total)
  • Persistent Collection: Your Pokemon are saved forever in Chrome storage
  • Stats: Track completion percentage and collection progress

How It Works

  1. Activate Extension: Click the Pokeball icon in your Chrome toolbar
  2. Choose Generation: Select which Pokemon generation to hunt (Gen I-VIII)
  3. Start Invasion: Pokemon begin appearing on any website you visit
  4. Catch Pokemon: Click on Pokemon to open the catching mini-game
  5. Master the Throw: Swipe the Pokeball toward the Pokemon with perfect timing
  6. Build Collection: View your growing Pokedex with detailed Pokemon information

Installation

Method 1: Chrome Web Store (Coming Soon)

This extension will be available on the Chrome Web Store soon!

Method 2: Developer Installation

  1. Download: Clone or download this repository
git  clone  https://github.com/yourusername/pokemon-invasion-extension.git
  1. Enable Developer Mode:
  • Open Chrome and navigate to chrome://extensions/
  • Toggle "Developer mode" in the top right corner
  1. Load Extension:
  • Click "Load unpacked"
  • Select the downloaded folder
  • The Pokemon Invasion icon should appear in your toolbar!

Project Structure

poke-invasion-extension/
├── manifest.json # Extension configuration
├── popup.html # Extension popup interface
├── collection.html # Pokedex collection viewer
├── catch.html # Pokemon catching mini-game
├── js/
│ ├── content.js # Main content script
│ ├── pokemon-service.js # Pokemon data service
│ ├── popup.js # Popup functionality
│ ├── collection.js # Collection management
│ ├── catch.js # Catching game logic
│ └── anime.min.js # Animation library
└── icons/
├── icon16.png # 16x16 extension icon
├── icon32.png # 32x32 extension icon
├── icon48.png # 48x48 extension icon
└── icon128.png # 128x128 extension icon

Usage Guide

Starting Your Pokemon Adventure

  1. Navigate to any website (news sites, social media, blogs - anywhere!)
  2. Click the Pokemon Invasion extension icon
  3. Select your preferred Pokemon generation
  4. Click "🚀 Start Pokemon Invasion"
  5. Watch as Pokemon begin appearing from the edges of your screen!

Managing Your Collection

  • View Pokedex: Click the 📱 button to see all caught Pokemon
  • Filter & Sort: Organize by generation, rarity, name, or date caught
  • Track Progress: Monitor your completion percentage across all generations
  • Export Data: Backup your collection data

Technical Details

Technologies Used

  • Manifest V3: Latest Chrome extension standard
  • Vanilla JavaScript: No heavy frameworks, fast and lightweight
  • CSS3 Animations: Smooth, modern UI with glassmorphism effects
  • PokeAPI Integration: Real Pokemon data for authentic experience
  • Chrome Storage API: Persistent collection across devices

Permissions Required

  • activeTab: To spawn Pokemon on current webpage
  • storage: To save your Pokemon collection
  • host_permissions: To fetch Pokemon data from PokeAPI

Browser Support

  • Chrome: Full support (primary platform)
  • Edge: Full support with Chromium engine
  • Firefox: Requires manifest conversion (community contribution welcome!)
  • Safari: Not supported (WebExtensions differences)

Customization

Want to modify the extension? Here are some easy customization points:

Spawn Settings (content.js)

// Adjust Pokemon appearance frequency
const  SPAWN_INTERVAL  =  3000; // milliseconds between spawns
// Change Pokemon duration on screen
const  POKEMON_DURATION  =  2500; // milliseconds before disappearing

UI Themes (CSS files)

  • Modify gradient backgrounds
  • Change glassmorphism effects
  • Adjust animation speeds
  • Customize color schemes

Contributing

All contributions from the Pokemon and web development community are welcome! Here's how you can help:

Bug Reports

Found a bug? Please open an issue with:

  • Browser and extension version
  • Steps to reproduce
  • Expected vs actual behavior
  • Screenshots if applicable

Feature Requests

Have ideas for new features? We'd love to hear them! Here are some ideas that I already have in mind:

  • Import data option. The export data function is already implemented, now it's just missing the import function. This would be useful if you want to use the extension on multiple devices or simply switch to a new device.
  • Add a "Pokemon of the Day" feature. This would be a daily Pokemon that appear more often.
  • Seasonal events and special Pokemon
  • Achievement system
  • Shiny Pokemon variants
  • Sound effects and music

More "crazy" (complicated to implement) ideas:

  • Unown collection
  • Pokemon battles between caught Pokemon
  • Trading system between users
  • Custom Pokemon spawn locations

Development

  1. Fork the repository
  2. Create a feature branch: git checkout -b feature/amazing-feature
  3. Make your changes
  4. Test thoroughly
  5. Commit: git commit -m 'Add amazing feature'
  6. Push: git push origin feature/amazing-feature
  7. Open a Pull Request

Credits

Pokemon Data

  • PokeAPI: The incredible RESTful Pokemon API
  • Pokemon Company: Original Pokemon designs and concepts
  • Nintendo/Game Freak: Pokemon franchise creators

Libraries & Resources

Inspiration

  • Pokemon GO: Mobile game mechanics inspiration
  • Chrome Extension community: Development patterns and best practices
  • My own passion for Pokemon games!

License

This project is licensed under the MIT License - see the LICENSE file for details. Important: This project is a FAN-MADE extension and is NOT affiliated with Pokemon, Nintendo, or Game Freak. All Pokemon names and images are copyrighted by their respective owners.

Support

Love the extension? Here's how you can support the project:

  • Star this repository to show your appreciation
  • 🐛 Report bugs to help us improve
  • 💡 Suggest features for future updates
  • 🔄 Share with friends who love Pokemon
  • 💖 Consider sponsoring for premium features development

Contact


Happy Pokemon Hunting! Gotta catch 'em all... on every website!

Made with Love Powered by PokeAPI Chrome Extension