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

# 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: git clone https://github.com/utkarshthedev/webpresence.git Or downloading as ZIP: Go to GitHub Repository Click the green "Code" button Select "Download ZIP" Extract the ZIP file to a location on your computer For Chrome: Go to chrome://extensions/ Turn on "Developer mode" (top-right corner) Click "Load unpacked" and select the client/chrome folder For Firefox: Go to about:debugging#/runtime/this-firefox Click "Load Temporary Add-on..." Select the manifest.json file from the client/firefox folder

Step 3: Start Using It!

Make sure Discord is open on your computer Click the Web Presence icon in your browser Toggle the switch to turn it on Start browsing - your activity will show in Discord! 📚 Need more detailed instructions? Check out our comprehensive installation guide!

🆘 Need Help?

📚 Documentation

• Installation Guide - Step-by-step setup instructions for beginners
• Autostart Configuration - Make Web Presence start automatically on boot
• Troubleshooting - Solutions to common problems
• CLI Guide - All command-line features explained
• All Documentation - 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 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

• Developer Guide - Complete development setup and workflow
• API Documentation - REST API and WebSocket reference
• Contributing Guide - Detailed instructions for contributors
• Site Icons Guide - How to add new website icons
• CLI Reference - All command-line options
• Server Package - WebPresence npm package details

Want to contribute? Check out our open 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
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 View License

📝 Changelog Version history View Changelog

👤 Author Made with ❤️ by Utkarsh Tiwari

If you find this project useful, please consider ⭐ starring it on GitHub!