ReeceLuo · Copilot · Oct 12, 2025 · Oct 12, 2025 · Oct 12, 2025 · Oct 12, 2025
diff --git a/README.md b/README.md
@@ -30,6 +30,8 @@ This project is built on the MERN stack (MongoDB, Express.js, React.js, and Node
 
 - **Notifications** - Receive **email notifications** when you get a friend request!  
 
+- **🎵 Chrome Extension** - Enhance your experience with the **VandyGram Sound Effects** Chrome extension! Add funny sound effects to your browsing. [Learn more →](chrome-extension/README.md)  
+
 
 ## Viewing the program:
 Hosted on [Vercel](https://vandy-gram-deployment.vercel.app/)! **Sign in with the guest account below to view content with already connected users.** 
@@ -89,3 +91,28 @@ Feel free to contact me if there are any issues with accessing the app!
    ```
 
 **Thank you for your visiting VandyGram!**
+
+---
+
+## 🎵 Chrome Extension
+
+Want to make VandyGram even more fun? Try the **VandyGram Sound Effects Chrome Extension**!
+
+### What It Does
+- 🔊 Adds funny sound effects to your VandyGram experience
+- 🎯 Plays sounds when you like, comment, post, and navigate
+- 🎨 Beautiful popup UI to customize your sounds
+- 💾 Saves your preferences
+
+### Quick Install
+```bash
+cd chrome-extension
+# Open chrome://extensions in Chrome
+# Enable Developer Mode
+# Click "Load unpacked" and select the chrome-extension folder
+```
+
+**[📖 Full Extension Documentation →](chrome-extension/README.md)**
+
+**[🚀 Quick Start Guide →](chrome-extension/QUICKSTART.md)**
+
diff --git a/chrome-extension/QUICKSTART.md b/chrome-extension/QUICKSTART.md
@@ -0,0 +1,83 @@
+# 🚀 Quick Start Guide - VandyGram Sound Effects Extension
+
+## Installation (3 Easy Steps!)
+
+### Step 1: Navigate to the Extension
+```bash
+cd VandyGram/chrome-extension
+```
+
+### Step 2: Open Chrome Extensions Page
+1. Open Google Chrome
+2. Type `chrome://extensions/` in the address bar
+3. Press Enter
+
+### Step 3: Load the Extension
+1. Toggle **"Developer mode"** ON (top-right corner)
+2. Click **"Load unpacked"** button
+3. Select the `chrome-extension` folder
+4. Done! 🎉
+
+## Using the Extension
+
+### 1. Click the Extension Icon
+Look for the 🎵 icon in your Chrome toolbar (top-right)
+
+### 2. Customize Your Experience
+- **Toggle sounds ON/OFF** - Use the switch at the top
+- **Adjust volume** - Drag the volume slider (0-100%)
+- **Choose sounds** - Select different sounds for each action:
+  - Like Button → Boop, Pop, Ding, or Click
+  - Comment Button → Pop, Boop, Ding, or Click
+  - Post Button → Whoosh, Applause, Ding, or Pop
+  - Navigation → Tap, Click, Boop, or Pop
+
+### 3. Test Sounds
+- Click **"Test"** buttons next to each sound option
+- Try the bonus sounds: 😂 Laugh and 👏 Applause
+
+### 4. Visit VandyGram
+Go to [VandyGram](https://vandy-gram-deployment.vercel.app/) and enjoy the sounds!
+
+## What Makes Sounds?
+
+| Action | Sound Effect | When It Plays |
+|--------|--------------|---------------|
+| ❤️ Like | Boop (default) | When you click like/heart buttons |
+| 💬 Comment | Pop (default) | When you click comment buttons |
+| 📤 Post | Whoosh (default) | When you submit posts or shares |
+| 🔗 Navigate | Tap (default) | When you click navigation links |
+
+## Troubleshooting
+
+**No sound?**
+- ✅ Check if sounds are enabled in the popup
+- ✅ Make sure volume isn't at 0%
+- ✅ Verify your computer sound is on
+
+**Extension not showing?**
+- ✅ Refresh the extensions page
+- ✅ Make sure all files are in the folder
+- ✅ Check Developer mode is enabled
+
+## Tips & Tricks
+
+💡 **Pro Tip**: Set different sounds for each action to create your own unique VandyGram experience!
+
+🎵 **Best Combinations**:
+- Classic: Boop for likes, Pop for comments, Whoosh for posts
+- Minimal: Click for everything
+- Fun: Laugh for likes, Applause for posts!
+
+## Next Steps
+
+Want to customize further?
+- Replace sound files in `sounds/` folder with your own
+- Edit `popup.html` to change the UI
+- Modify `content.js` to detect different elements
+
+---
+
+**Enjoy your enhanced VandyGram experience! 🎉**
+
+Need help? Check the full [README.md](README.md) for detailed documentation.
diff --git a/chrome-extension/README.md b/chrome-extension/README.md
@@ -0,0 +1,196 @@
+# 🎵 VandyGram Sound Effects - Chrome Extension
+
+A fun Chrome extension that adds funny sound effects to your VandyGram experience! Every click, like, comment, and post becomes more engaging with delightful audio feedback.
+
+![VandyGram Sound Effects Extension](https://github.com/user-attachments/assets/6691c13a-f048-4f9e-87e7-b61f7ed4cfca)
+
+## ✨ Features
+
+- 🔊 **Customizable Sound Effects** - Choose different sounds for various actions
+- 🎚️ **Volume Control** - Adjust sound volume to your preference
+- 🎵 **Multiple Sound Options** - 8 different sound effects to choose from
+- 🎯 **Smart Detection** - Automatically detects buttons and interactions
+- 💾 **Persistent Settings** - Your preferences are saved across sessions
+- 🎨 **Beautiful UI** - Gradient-styled popup with smooth animations
+
+## 🎯 Supported Actions
+
+The extension plays sounds for:
+- ❤️ **Like/Heart buttons** - Default: Boop sound
+- 💬 **Comment buttons** - Default: Pop sound
+- 📤 **Post/Share buttons** - Default: Whoosh sound
+- 🔗 **Navigation links** - Default: Tap sound
+
+## 🎼 Available Sounds
+
+1. **Boop** 🎯 - Short, playful tone
+2. **Pop** 🎈 - Bubble pop effect
+3. **Whoosh** 💨 - Swoosh/wind sound
+4. **Tap** 🔨 - Gentle tap
+5. **Ding** 🔔 - Pleasant bell
+6. **Click** 👆 - Satisfying click
+7. **Laugh** 😂 - Short laugh (bonus)
+8. **Applause** 👏 - Clapping sound (bonus)
+
+## 📦 Installation
+
+### From Source (Developer Mode)
+
+1. **Download/Clone the extension**
+   ```bash
+   git clone https://github.com/ReeceLuo/VandyGram.git
+   cd VandyGram/chrome-extension
+   ```
+
+2. **Generate Sound Files** (if not already present)
+   ```bash
+   node generate-sounds.js
+   ```
+
+3. **Prepare Icons** (convert SVG to PNG if needed)
+   - The extension includes SVG icons
+   - For PNG support, convert icons using an image editor or online tool
+   - See `icons/README.md` for details
+
+4. **Load in Chrome**
+   - Open Chrome and navigate to `chrome://extensions/`
+   - Enable "Developer mode" (toggle in top-right)
+   - Click "Load unpacked"
+   - Select the `chrome-extension` directory
+   - The extension icon should appear in your toolbar!
+
+## 🎮 Usage
+
+1. **Click the extension icon** in your Chrome toolbar
+2. **Toggle sounds on/off** using the switch at the top
+3. **Adjust volume** with the slider
+4. **Customize sounds** for each action using the dropdown menus
+5. **Test sounds** by clicking the "Test" buttons
+6. **Try bonus sounds** for fun!
+
+## 🛠️ Configuration
+
+The popup interface allows you to:
+
+- **Enable/Disable** - Turn all sounds on or off
+- **Volume Control** - Set volume from 0-100%
+- **Sound Selection** - Choose which sound plays for each action:
+  - Like Button Sound
+  - Comment Button Sound
+  - Post Button Sound
+  - Navigation Click Sound
+
+## 🌐 Compatibility
+
+- Works on VandyGram hosted at `vandy-gram-deployment.vercel.app`
+- Also works on `localhost` for development
+- Compatible with Chrome, Edge, and other Chromium-based browsers
+- Requires Chrome Extension Manifest V3 support
+
+## 📁 File Structure
+
+```
+chrome-extension/
+├── manifest.json          # Extension configuration
+├── background.js          # Background service worker
+├── content.js            # Content script for sound injection
+├── popup.html            # Popup UI
+├── popup.css             # Popup styles
+├── popup.js              # Popup logic
+├── generate-sounds.js    # Sound file generator
+├── generate-icons.js     # Icon generator
+├── sounds/               # Audio files
+│   ├── boop.wav
+│   ├── pop.wav
+│   ├── whoosh.wav
+│   ├── tap.wav
+│   ├── ding.wav
+│   ├── click.wav
+│   ├── laugh.wav
+│   └── applause.wav
+└── icons/                # Extension icons
+    ├── icon16.svg/png
+    ├── icon48.svg/png
+    └── icon128.svg/png
+```
+
+## 🎨 Customization
+
+### Adding Custom Sounds
+
+1. Add your sound file (.wav or .mp3) to the `sounds/` directory
+2. Update the `SOUND_EFFECTS` object in `content.js` and `popup.js`
+3. Add the sound option to the select dropdowns in `popup.html`
+
+### Modifying UI
+
+- Edit `popup.html` for structure changes
+- Edit `popup.css` for styling
+- Edit `popup.js` for functionality
+
+### Targeting Different Sites
+
+Modify the `matches` array in `manifest.json` to work on other websites:
+```json
+"matches": ["*://your-site.com/*"]
+```
+
+## 🔧 Development
+
+### Prerequisites
+- Node.js (for sound generation)
+- Chrome or Chromium-based browser
+
+### Testing
+1. Make changes to the extension files
+2. Go to `chrome://extensions/`
+3. Click the refresh icon on the VandyGram Sound Effects card
+4. Test your changes
+
+### Debugging
+- Right-click the extension icon → "Inspect popup" for popup console
+- Check "Inspect" on background service worker for background script
+- Use browser DevTools console for content script errors
+
+## 🐛 Troubleshooting
+
+**Sounds not playing?**
+- Check that sounds are enabled in the popup
+- Verify volume is not set to 0
+- Ensure your browser allows audio playback
+- Check browser console for errors
+
+**Extension not loading?**
+- Verify all files are present
+- Check manifest.json syntax
+- Ensure sound files exist in sounds/ directory
+- Try refreshing the extension
+
+**Icons not showing?**
+- Convert SVG icons to PNG format
+- Ensure icon files are named correctly
+- Check file paths in manifest.json
+
+## 📝 Notes
+
+- Sound files included are basic tone-based WAV files
+- For higher quality sounds, replace with professional audio from:
+  - [Freesound.org](https://freesound.org/)
+  - [Zapsplat.com](https://www.zapsplat.com/)
+  - [Mixkit.co](https://mixkit.co/free-sound-effects/)
+
+## 🎓 Made for VandyGram
+
+This extension enhances the VandyGram social network for Vanderbilt University students. Visit the main project at [VandyGram](https://vandy-gram-deployment.vercel.app/)
+
+## 📄 License
+
+This extension is part of the VandyGram project. Please refer to the main repository for license information.
+
+## 🙏 Credits
+
+Created as a fun addition to the VandyGram platform!
+
+---
+
+**Enjoy your enhanced VandyGram experience with fun sound effects! 🎉**