QuickVis 🚀

The easiest way to manage GitHub repository visibility - Switch between public and private with a single click!

🎯 What is QuickVis?

QuickVis is a Chrome extension that simplifies GitHub repository management by allowing you to change repository visibility (public ↔ private) directly from your GitHub profile pages. No more navigating through settings menus - just one click!

✨ Key Features

• One-Click Visibility Toggle: Change repository visibility instantly from your repositories list or individual repo pages
• Beautiful UI Integration: Seamlessly integrated buttons that match GitHub's design language
• Smart Access Control: Toggle switch in the header to grant or revoke access anytime
• Secure OAuth Authentication: Uses GitHub OAuth for secure, token-based authentication
• Visual Feedback: Real-time badge updates and elegant notifications
• Inactive State Support: All buttons remain visible even without access, just styled differently to indicate status

🎨 How It Works

1. Grant Access

When you first visit your GitHub repositories page, you'll see an elegant toggle switch in the header near the search bar. Click it to authorize QuickVis with your GitHub account via OAuth.

2. Change Visibility

Once authorized, you'll see "Change Visibility" buttons next to each of your repositories. Click any button to instantly toggle between public and private.

3. Manage Access

Use the header toggle to revoke access anytime. QuickVis will show a confirmation modal, and all buttons will transition to an inactive state with pale colors.

🔧 Technical Architecture

Frontend (Extension)

• Manifest V3: Modern Chrome extension architecture
• Content Script: Injects UI elements and handles interactions on GitHub pages
• Background Worker: Manages OAuth flow and token storage
• Local Storage: Securely stores access tokens with automatic expiration (7 days)

Backend (OAuth Proxy)

• Express.js Server: Deployed on Vercel for serverless OAuth token exchange
• Security Features:
  • Rate limiting to prevent abuse
  • Extension ID validation
  • Redirect URI validation
  • Environment-based configuration

OAuth Flow

User → QuickVis → GitHub OAuth → Proxy Server → GitHub API → Access Token → QuickVis

The proxy server never stores your token - it only facilitates the secure exchange between GitHub and the extension.

🛠️ Installation

For Users

1. Install from Chrome Web Store (Coming Soon!)
2. Navigate to your GitHub repositories page
3. Click the QuickVis toggle to authorize
4. Start managing your repository visibility!

For Developers

Prerequisites

• Node.js 16+
• Chrome browser
• GitHub account

Setup

1. Clone the repository

git clone https://github.com/ogutdgn/quickvis.git
cd quickvis

2. Set up the OAuth Proxy Server

cd server
npm install

Create a .env file:

GITHUB_CLIENT_ID=your_github_client_id
GITHUB_CLIENT_SECRET=your_github_client_secret
ALLOWED_EXTENSION_ID=your_extension_id
RATE_LIMIT_WINDOW_MS=60000
RATE_LIMIT_MAX=60

Deploy to Vercel:

vercel deploy --prod

3. Configure the Extension

Update extension/config.js:

export const CONFIG = {
  CLIENT_ID: 'your_github_client_id',
  PROXY_SERVER_URL: 'https://your-project.vercel.app',
  SCOPES: 'repo user',
  AUTH_URL: 'https://github.com/login/oauth/authorize',
  API_BASE: 'https://api.github.com'
};

4. Load the Extension

• Open Chrome → chrome://extensions/
• Enable "Developer mode"
• Click "Load unpacked"
• Select the extension folder

🔒 Security & Privacy

• Zero Data Collection: We don't collect any analytics or personal data
• Local-Only Storage: Tokens are stored only in your browser
• Minimal Permissions: Only runs on github.com domains
• Automatic Expiration: Tokens expire after 7 days for security
• Open Source: Full transparency - audit the code yourself!

Read our complete Privacy Policy

🎨 UI Features

Modern Design

• Gradient backgrounds with backdrop blur effects
• Smooth animations and transitions
• Responsive hover states
• Dark mode support

Inactive State Design

When not authorized, buttons remain visible but styled with:

• Pale purple colors (#ddd6fe background)
• Reduced opacity (0.75)
• Clear visual distinction from active state
• Clicking opens the authorization modal

Modal Dialogs

• Grant Access Modal: Purple gradient with lock icon
• Revoke Access Modal: Warning gradient with alert icon
• Both feature smooth animations and backdrop blur

📦 Project Structure

quickvis/
├── extension/              # Chrome extension files
│   ├── manifest.json      # Extension manifest (v3)
│   ├── background.js      # Background service worker
│   ├── content.js         # Main content script
│   ├── content.css        # Styles for injected UI
│   └── config.js          # Configuration constants
├── server/                # OAuth proxy server
│   ├── server.js          # Express server
│   ├── package.json       # Dependencies
│   └── vercel.json        # Vercel configuration
├── README.md              # You are here!
└── PRIVACY.md             # Privacy policy

🔧 Development

Branch Strategy

• production: Production-ready code, connected to Chrome Web Store
• development: Development code with local OAuth setup

Version Management

Use the automated version bump script to update extension versions:

# Bump patch version (1.1.2 → 1.1.3) - Bug fixes
.\bump-version.ps1 patch

# Bump minor version (1.1.2 → 1.2.0) - New features
.\bump-version.ps1 minor

# Bump major version (1.1.2 → 2.0.0) - Breaking changes
.\bump-version.ps1 major

The script will:

1. Update extension/manifest.json with the new version
2. Create a git commit with the version change
3. Provide instructions for pushing to development

Release Process

1. Make changes in development branch
2. Bump version: .\bump-version.ps1 patch
3. Push to development: git push origin development
4. Merge to production:

   git checkout production
   git merge development --no-commit --no-ff
   # Restore production configs
   git checkout production -- extension/config.js extension/manifest.json
   git commit -m "merge: development into production"
   git push origin production

5. GitHub Actions automatically:
   • Creates extension zip file
   • Adds to versions/ directory
   • Creates GitHub Release with download link

Local Development Setup

1. Clone and checkout development branch:

   git clone https://github.com/ogutdgn/quickvis.git
   git checkout development

2. Setup OAuth App on GitHub:

   • Authorization callback URL: https://<EXTENSION_ID>.chromiumapp.org/

3. Configure server (server/.env):

   GITHUB_CLIENT_ID=your_dev_client_id
   GITHUB_CLIENT_SECRET=your_dev_secret
   ALLOWED_EXTENSION_ID=your_extension_id

4. Start local server:

   cd server
   npm install
   npm start

5. Load extension in Chrome:

   • Go to chrome://extensions/
   • Enable "Developer mode"
   • Click "Load unpacked"
   • Select the extension/ directory

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🐛 Bug Reports & Feature Requests

Found a bug or have a feature request? Please open an issue on GitHub Issues.

💡 Why QuickVis?

Managing repository visibility on GitHub requires multiple clicks through settings pages. QuickVis reduces this to a single click, saving time and improving workflow efficiency. Whether you're:

• 🎓 A student managing coursework repositories
• 👨‍💻 A developer organizing project visibility
• 🏢 A professional managing multiple repos
• 🔧 Anyone who frequently toggles repository visibility

QuickVis makes your life easier!

🙏 Acknowledgments

Built with ❤️ using:

• Chrome Extensions Manifest V3
• GitHub API
• Express.js
• Vercel

---

Made by Dogan Ogut | Star ⭐ this repo if you find it useful!