Awesome Open Source
Awesome Open Source

YouTube Music

GitHub release GitHub license XO code style Build status Known Vulnerabilities GitHub All Releases AUR

Screenshot

Electron wrapper around YouTube Music featuring:

  • Native look & feel, aims at keeping the original interface
  • Framework for custom plugins: change YouTube Music to your needs (style, content, features), enable/disable plugins in one click

Download

You can check out the latest release to quickly find the latest version.

Arch Linux

Install the youtube-music-bin package from the AUR. For AUR installation instructions, take a look at this wiki page.

Available plugins:

  • Ad Blocker: block all ads and tracking out of the box
  • Downloader: download to MP3 directly from the interface (youtube-dl)
  • No Google Login: remove Google login buttons and links from the interface
  • Shortcuts: use your usual shortcuts (media keys, Ctrl/CMD + F…) to control YouTube Music
  • Navigation: next/back navigation arrows directly integrated in the interface, like in your favorite browser
  • Auto confirm when paused: when the "Continue Watching?" modal appears, automatically click "Yes"
  • Hide video player: no video in the interface when playing music
  • Notifications: display a notification when a song starts playing
  • Touchbar: custom TouchBar layout for macOS

Dev

git clone https://github.com/th-ch/youtube-music
cd youtube-music
yarn
yarn start

Build your own plugins

Using plugins, you can:

  • manipulate the app - the BrowserWindow from electron is passed to the plugin handler
  • change the front by manipulating the HTML/CSS

Creating a plugin

Create a folder in plugins/YOUR-PLUGIN-NAME:

  • if you need to manipulate the BrowserWindow, create a file back.js with the following template:
module.exports = win => {
	// win is the BrowserWindow object
};
  • if you need to change the front, create a file front.js with the following template:
module.exports = () => {
	// This function will be called as a preload script
	// So you can use front features like `document.querySelector`
};

Common use cases

  • injecting custom CSS: create a style.css file in the same folder then:
const path = require("path");
const { injectCSS } = require("../utils");

// back.js
module.exports = win => {
	injectCSS(win.webContents, path.join(__dirname, "style.css"));
};
  • changing the HTML:
// front.js
module.exports = () => {
	// Remove the login button
	document.querySelector(".sign-in-link.ytmusic-nav-bar").remove();
};
  • communicating between the front and back: can be done using the ipcMain module from electron. See utils.js file and example in navigation plugin.

Build

yarn build

Builds the app for macOS, Linux, and Windows, using electron-builder.

Tests

yarn test

Uses Spectron to test the app.

License

MIT © th-ch


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (69,571
linux (2,453
windows (1,433
node (981
electron (939
music (584
youtube (358
mac (272
music-player (175
macosx (109
desktop-app (93
adblock (88
youtube-dl (76
youtube-downloader (32
adblocker (29
youtube-player (25
blocker (21