YouTube Inferface Customizer

Shortcuts | Code

This is an open source Firefox extension that allows you to customize a wide variety of elements of the YouTube interface in your favor.

Installation

To get a development environment, first make sure that you have the Firefox browser installed. Then clone our GitHub repository to your local device and visit the Mozilla Firefox debugging page about:debugging#/runtime/this-firefox in the Firefox browser. Click the Load Temporary Add-on… button and select src/manifest.json. Then you will be able to simulate an environment with this extension until you exit the browser.

Features

The outline of the features of YouTube Interface Customizer is as follows:

General: Customize color theme.
Homepage: Hide video suggestions; Customize homepage layout.
Navigation bar: Customize color; Redirect YouTube logo; Hide buttons and sections.
Video player: Customize the scrubber and progress bar; Customize video player layout.

General

Homepage

You may also hide specific sections. For instance, if you choose to hide Free Primitive movies, then the whole section in the red box will disappear. Supported special sections to hide include but are not limited to news, shorts, and Primetime suggestions. The listed special sections can be individually hidden while other special sections can only be hidden globally.

One other common usage of this functionality is to show only a specified number of rows of video recommendations on the homepage. Note that this example is showing only one row of video suggestions, applied together with hide special sections. Otherwise, the special sections will not be counted in the number of rows and will be displayed.

Now we can customize the homepage layout. For instance, we can hide the header that shows the areas you may be interested in.

Also, to make the homepage cleaner and avoid distractions, we can hide the video thumbnails. However, note that the video thumbnails of the advertisements cannot be hidden by this functionality. You may, however, simply hide the advertisements completely.

Customize color - Text and icons: This changes the color of all the text and icons in the left navigation bar, except for the footer and the profile images. Only a limited choices of colors are supported currently.
Redirect YouTube Logo: This redirects the YouTube logo on the top left corner of the YouTube website. We currently support redirection to Home (default), Shorts, Subscriptions, History, Library, Watch Later, and Liked Videos.
Hide buttons and sections: You can hide the entire navigation bar. We also support hiding each button and section individually. This includes the Home/Explore/Shorts/Subscriptions buttons, the Library and quicklinks/Subscriptions/Explore/More from YouTube/Settings and more sections, and the footer.

In this example, we hide the entire navigation bar.

Video Player

Customize the srubber: The scrubbers can be customized as GIF images. We currently support Pusheen, Pikachu, and Capoo.

Customize the progress bar: We currently support Cherry (best fit with Pusheen), Poké Ball (best fit with Pikachu), and Light Blue (best fit with Capoo). However, users are free to customize their own combinations.

Hide the end-of-video suggestions: This blocks the end-of-video suggestions from generating in order to focus.
Hide the Like button and more: This supports hiding the Like/Dislike button, the Share button, the Clip button, and the More button.
Hide the merch shelf: YouTube video player sometimes generates a merch shelf below the video meta information. This functionality would prevent the entire merch shelf from appearing.
Hide video comments: This supports hiding all video comments, hiding comment actions, and hiding comment replies.

We can hide all the comments, since comments are sometimes distracting.

Alternatively, we can keep the comments but hide the actions. Note that this hides all comment actions including liking (and like count), disliking, and replying.

Finally, we can hide the replies to the comments. This can in fact be used together with hiding the actions, so that only the original comment texts are displayed.

Support

If you encounter any issues while using the extension, feel free to submit an issue on the GitHub issue tracker. If you want to provide any suggestion or feedback, or report any bug, you can also fill out this form. We will read your feedback and do our best to resolve your issues as soon as possible.

Contribution

This is an open source project and we welcome your contributions. For details, please visit the contribution document. Also see the Code of Conduct for community behavior. Here are some brief contributing guidelines:

Code of Conduct: This project adheres to the Code of Conduct. By participating, you are expected to uphold this code.
Bugs and feature requests: To report a bug or request a new feature, please use the GitHub issue tracker. When reporting a bug, please include as much information as possible, such as the version of the extension you are using, the browser version, and steps to reproduce the issue. The above also applies to bugs reporting and feature requests via submitting .
Submitting changes: We use the GitFlow branching model for our development process. To contribute, follow these steps:
1. Fork the repository.
2. Create a new branch from the develop branch.
3. Make your changes.
4. Run the tests to make sure your changes do not introduce any new bug.
5. Commit your changes with a descriptive message.
6. Push the branch to your fork.
7. Create a pull request to the develop branch of the original repository.
Styleguides: For JavaScript, we use the JavaScript Standard Style. For HTML and CSS, we use the Google HTML/CSS Style Guide.

License

Youtube Interface Customizer is licensed under the Mozilla Public License 2.0.