https://github.com/utkarshthedev/webpresence
Web Presence is a lightweight browser extension that displays your current web browsing activity in Discord through Rich Presence. Show your friends what websites you're exploring in real-time with an elegant, customizable interface.
https://github.com/utkarshthedev/webpresence
Last synced: about 1 month ago
JSON representation
Web Presence is a lightweight browser extension that displays your current web browsing activity in Discord through Rich Presence. Show your friends what websites you're exploring in real-time with an elegant, customizable interface.
- Host: GitHub
- URL: https://github.com/utkarshthedev/webpresence
- Owner: UtkarshTheDev
- License: mit
- Created: 2025-05-08T23:38:48.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2025-05-09T00:01:45.000Z (about 1 month ago)
- Last Synced: 2025-05-09T01:18:49.883Z (about 1 month ago)
- Language: JavaScript
- Size: 243 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Web Presence
Share your browsing activity on Discord
Web Presence shows your friends what websites you're browsing in real-time through Discord Rich Presence.
It's easy to set up and works with most popular websites!
Features •
Quick Install •
Documentation •
For Developers
## What is Web Presence?
Web Presence is a simple tool that shows your current website in your Discord profile. When you browse websites like YouTube, GitHub, or Twitter, your Discord profile will display what you're doing with custom icons for each site.
✨ Key Benefits
- Show off what content you're enjoying
- Let friends know what you're working on
- Discover shared interests with others
- Express yourself through your browsing habits
🔐 Privacy First
- Full control over what sites are shared
- Easy to toggle on/off with one click
- Blacklist specific domains you want to keep private
- No data collection or tracking
## Features
🌐 Shows your current website
Your Discord profile displays the website you're currently browsing with elapsed time
🎮 Custom icons for popular sites
Unique icons for YouTube, GitHub, Twitter, and 100+ popular websites
🔒 Privacy controls
Easily turn presence on/off or disable for specific sites
🧩 Browser extension
Simple browser extension for Chrome and Firefox
### Additional Features
- ⏱️ **Timer persistence** - Keep elapsed time when switching between tabs
- 🔄 **Auto-updates** - Server checks for updates automatically
- 🌙 **Always-on sites** - Configure sites to always show presence even when globally disabled
- 🖥️ **Cross-platform** - Works on Windows, Mac, and Linux
- 🛠️ **Customizable** - Use your own Discord application and icons
## 🚀 Quick Install Guide
### Step 1: Install the Server
```bash
# Install with npm (make sure you have Node.js installed)
npm install -g webpresence
# Start the server in daemon mode (runs in background)
webpresence start -d
# Configure to start automatically on system boot
webpresence autostart --enable
# Check if server is running
webpresence status
```
> **Tip:** Using daemon mode (`-d`) lets the server run in the background so you can close your terminal window!
### Step 2: Install the Browser Extension
#### Option 1: Download the Source Code
First, get the extension files by either:
**Cloning the repository:**
```bash
git clone https://github.com/utkarshthedev/webpresence.git
```
**Or downloading as ZIP:**
1. Go to [GitHub Repository](https://github.com/utkarshthedev/webpresence)
2. Click the green "Code" button
3. Select "Download ZIP"
4. Extract the ZIP file to a location on your computer
#### For Chrome:
1. Go to `chrome://extensions/`
2. Turn on "Developer mode" (top-right corner)
3. Click "Load unpacked" and select the `client/chrome` folder
#### For Firefox:
1. Go to `about:debugging#/runtime/this-firefox`
2. Click "Load Temporary Add-on..."
3. Select the `manifest.json` file from the `client/firefox` folder
### Step 3: Start Using It!
1. Make sure Discord is open on your computer
2. Click the Web Presence icon in your browser
3. Toggle the switch to turn it on
4. Start browsing - your activity will show in Discord!
📚 Need more detailed instructions? Check out our comprehensive installation guide!
## 🆘 Need Help?
### 📚 Documentation
- [**Installation Guide**](docs/INSTALLATION.md) - Step-by-step setup instructions for beginners
- [**Autostart Configuration**](docs/AUTOSTART.md) - Make Web Presence start automatically on boot
- [**Troubleshooting**](docs/TROUBLESHOOTING.md) - Solutions to common problems
- [**CLI Guide**](docs/CLI.md) - All command-line features explained
- [**All Documentation**](docs/index.md) - Complete documentation index
Our comprehensive documentation helps you get the most out of Web Presence!
### 🔍 Common Questions
- **How do I start the server?**
Run `webpresence start -d` in your terminal
- **How do I check if it's running?**
Run `webpresence status` to see server status
- **Can I disable for specific sites?**
Yes, click the extension icon and use the site settings
- **Does it work with all websites?**
Yes, with custom icons for 100+ popular sites
- **How do I update Web Presence?**
Run `npm update -g webpresence` to get the latest version
**Still stuck?** Check the [Troubleshooting Guide](docs/TROUBLESHOOTING.md) for solutions to common issues.
## 👨💻 For Developers
### 🛠️ Contribute
We welcome contributions of all kinds:
- **Add new website icons** - Help expand our collection of custom site icons
- **Improve documentation** - Make guides clearer and more helpful
- **Fix bugs and add features** - Enhance functionality and stability
- **Report issues** - Help identify problems that need fixing
- **Improve performance** - Optimize code for better efficiency
Every contribution helps make Web Presence better!
#### Getting Started
1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request
### 📋 Developer Resources
- [**Contributing Guide**](CONTRIBUTING.md) - Detailed instructions for contributors
- [**Site Icons Guide**](docs/SITE_ICONS.md) - How to add new website icons
- [**CLI Reference**](docs/CLI.md) - All command-line options
- [**API Documentation**](docs/API.md) - Server API reference
- [**Server Package**](server/README.md) - WebPresence npm package details
**Want to contribute?** Check out our [open issues](https://github.com/utkarshthedev/webpresence/issues) to find something to work on!
## Using Your Own Discord Application
You can use your own Discord application instead of the default one:
1. Create a new application at the [Discord Developer Portal](https://discord.com/developers/applications)
2. Copy your Client ID
3. Replace the `clientId` in `server/config.ts`
4. Upload custom icons to your Discord application
This allows you to customize the appearance of your presence with your own branding and icons.
## Showcase
Web Presence in action on popular websites
YouTube - Watch videos with style
GitHub - Show off your coding sessions
Twitter/X - Share your social media browsing
Any Website - Works with any site you visit
## Project Information
📄 License
MIT License
📝 Changelog
Version history
👤 Author
Made with ❤️ by
If you find this project useful, please consider ⭐ starring it on GitHub!