YTM Mini Mode 🎵

A lightweight, distraction-free mini-player extension for YouTube Music, available for Firefox and Chrome.

📥 Installation

📖 Project Purpose

YouTube Music is great, but managing playback while coding or studying often means hunting through dozens of open tabs. YTM Mini Mode solves this by adding a native toggle button directly to the YouTube Music interface.

With one click, your music pops out into a clean, responsive, and persistent mini-window. Click it again, and it seamlessly pops back into your main browser window without interrupting playback.

✨ Features

• Seamless Window Management: Pop the player out into a mini-window, or pop it back into your main browser session.
• Responsive Design: Optimized CSS ensures album art and song titles scale perfectly.
• Privacy First: No tracking, no data collection.

---

🛠️ Tech Stack

This project is built using:

• Vanilla JavaScript & CSS
• webextension-polyfill for cross-browser API compatibility.
• Manifest V3 (Chrome) and Manifest V2 (Firefox).
• Bash for standard build automation without heavy webpack/bundlers.
• ESLint & Prettier for code formatting and standardisation.

---

💻 Local Setup Instructions

These instructions have been designed and tested for a clean local machine environment.

Prerequisites

• Node.js (v18+ recommended)
• npm (comes with Node.js)
• Git

Step-by-Step Setup

1. Clone the repository:

   git clone https://github.com/Labreo/ytm-miniplayer.git
   cd ytm-miniplayer

2. Install development dependencies: This project uses npm purely for linting, formatting, and polyfills.

   npm install

3. Build the extension: Generate the clean, store-ready browser distributions:

   npm run build
   # Or run directly: bash build.sh

   This will create a dist/ directory containing chrome/, firefox/, edge/, and opera/ builds.

4. Load the extension manually into your browser:

   • For Chrome: Navigate to chrome://extensions/, toggle on "Developer mode" in the top right, click "Load unpacked", and select the dist/chrome/ folder.
   • For Edge: Navigate to edge://extensions/, toggle on "Developer mode", click "Load unpacked", and select dist/edge/.
   • For Opera: Navigate to opera://extensions/, toggle on "Developer mode", click "Load unpacked", and select dist/opera/.
   • For Firefox: Navigate to about:debugging#/runtime/this-firefox, click "Load Temporary Add-on", and select the manifest.json inside the dist/firefox/ folder.

---

🪟 Windows Setup Notes

Windows users may face issues while setting up the extension locally because the project uses bash scripts and Linux utilities.

Recommended Setup

• Install Git for Windows: https://git-scm.com/download/win
• Use Git Bash instead of Command Prompt
• Install Node.js (v18+ recommended)

Running the Build

Run the following commands inside Git Bash:

npm install
npm run build

Loading the Extension

After building:

• Open chrome://extensions
• Enable Developer Mode
• Click "Load unpacked"
• Select the dist/chrome folder

🤝 Contribution Guidelines

Contributions, issues, and feature requests are highly encouraged!

We follow standard GitHub flow and require that all pull requests pass our automated CI/CD checks (linting, formatting, building). Before starting major work, please review our comprehensive CONTRIBUTING.md for our full code style rules, PR expectations, and standard practices.

• Quick commands you'll need:
  • npm run lint / npm run format

---

💬 Contact & Support

Have questions or want to discuss a major feature? Reach out to me directly on Discord: .kakaroth

If this extension makes your daily workflow a little smoother, consider supporting the development!

---

📄 License

Distributed under the MIT License. See LICENSE for more information.

Built by Kanak Waradkar