Zen Mods 🚀

A collection of mods for Zen Browser aimed at enhancing user experience by customizing and simplifying the interface.

📋 Table of Contents

• Overview
• Available Mods
• Installation
• Development
• Contributing
• Support

🎯 Overview

This project contains a collection of carefully designed mods for Zen Browser. Each mod is developed to solve specific usability issues while maintaining compatibility and performance.

Key Features

• 🎨 Enhanced Interface: Menu simplification and reorganization
• 🔧 Easy to Install: Clear instructions and ready-to-use files
• 🚀 Performance: Optimized code with no speed impact
• 🌓 Themes: Full support for dark and light themes
• 📱 Responsive: Adaptation to different screen sizes

📦 Available Mods

1. Tab Context Menu Organizer

Version: 1.1.0 | Status: ✅ Stable

Organizes the tab context menu by allowing you to show/hide different sections based on your preferences.

Features:

• Control visibility of tab movement options
• Manage workspace options
• Configure device sync options
• Control container options
• Optional visual separators
• Cleaner and more organized interface

📖 Detailed Documentation

---

More mods will be added soon...

🚀 Installation

Quick Installation

1. Download the latest release from the releases page
2. Extract the archive
3. Choose the mods you want to install
4. Follow the specific instructions for each mod

Installation from Source Code

# Clone the repository
git clone https://github.com/baxyz/zen-mods.git
cd zen-mods

# Install dependencies
npm install

# Build all mods
npm run build

# Built mods are located in ./dist/

Zen Browser Configuration

For the mods to work, you need to:

1. Enable userChrome.css in Zen:

   • Go to about:config
   • Search for toolkit.legacyUserProfileCustomizations.stylesheets
   • Set to true

2. Locate your profile:

   • Go to about:support
   • Click "Open Folder" next to "Profile Folder"

3. Create the chrome folder (if it doesn't exist):

   profile-folder/
   └── chrome/
       ├── userChrome.css
       └── (other mod files)
   

🛠️ Development

Prerequisites

• Node LTS

Development Container (Recommended)

This project includes a pre-configured development container with all necessary tools:

• Microsoft TypeScript-Node base image
• npm package manager
• Pre-configured VS Code extensions
• Git and SSH integration

Quick Start with Dev Container:

1. Open the project in VS Code
2. Install the "Dev Containers" extension
3. Click "Reopen in Container" when prompted
4. Everything will be set up automatically!

📖 Dev Container Documentation

Manual Environment Setup

# Clone and install
git clone https://github.com/baxyz/zen-mods.git
cd zen-mods
npm install

# Run build
npm run build

Project Structure

zen-mods/
├── mods/                    # Mods folder
│   └── mod-name/
│       ├── mod.json        # Mod metadata
│       ├── style.css       # CSS styles
│       ├── script.js       # JavaScript (optional)
│       └── README.md       # Documentation
├── scripts/                # Build scripts
├── docs/                   # Documentation
├── .github/                # CI/CD workflows
└── dist/                   # Built mods

Creating a New Mod

1. Create the folder:

   mkdir mods/my-new-mod

2. Create mod.json:

   {
     "name": "my-new-mod",
     "displayName": "My New Mod",
     "version": "1.0.0",
     "description": "Mod description",
     "author": "Your Name"
   }

3. Develop the mod (CSS, JS)

4. Test with npm run build

5. Document in README.md

Available Scripts

npm run build          # Build all mods
npm run dev           # Development mode with watch
npm run test          # Run tests
npm run lint          # Check code
npm run lint:fix      # Fix automatically
npm run format        # Format code
npm run format:check  # Check formatting

🤝 Contributing

Contributions are welcome! Check out our Contributing Guide to get started.

Contributing Process

1. Fork the project
2. Create a branch for your feature (git checkout -b feature/my-feature)
3. Commit your changes (git commit -m 'feat: add my feature')
4. Push to the branch (git push origin feature/my-feature)
5. Open a Pull Request

Code Standards

• ESLint: Follow the ESLint configuration
• Prettier: Code automatically formatted
• Tests: Include tests if applicable
• Documentation: Document new features

📄 License

This project is under MIT license. See the LICENSE file for more details.

🆘 Support

• Issues: Open an issue
• Discussions: GitHub Discussions
• Email: support@zen-mods.dev (if configured)

🙏 Acknowledgments

• Zen Browser Team: For this fantastic browser
• Mozilla Community: For the tools and documentation
• Contributors: Thanks to everyone who improves this project

---

⭐ If you like this project, feel free to give it a star!