Fix pink youtube

A firefox add-on to make youtube red again

Reference

To make sure we use the right colors: we use a 07.05.2023 snapshot from archive.org there for reference we found a few different reds they used:

07.05.2023 css variables

--yt-brand-youtube-red: #f00;
--yt-brand-medium-red: #c00;
--yt-brand-light-red: #ff4e45;
--yt-brand-medium-red-alpha-90: rgba(204, 0, 0, 0.9);
--yt-brand-medium-red-alpha-30: rgba(204, 0, 0, 0.3);
--yt-spec-brand-button-background: #c00;
--yt-spec-brand-button-background-hover: #990412;
--yt-spec-red-30: #ff8983;
--yt-spec-red-70: #990412;
--yt-spec-brand-link-text: #c00;
--yt-spec-error-indicator: #990412;
--yt-spec-static-brand-red: #f00;
--yt-spec-selected-nav-text: #c00
--yt-spec-static-overlay-background-brand: rgba(204, 0, 0, 0.9);
--yt-live-chat-count-color-error: hsl(10, 51%, 49%);
--yt-live-chat-error-message-color: hsl(10, 51%, 49%);
--yt-live-chat-mention-background-color: #ff5722;
--error-color: #dd2c00;

I may build a little app to better visualize color changes over time with a bunch of archive snapshots as soon as the API is up again.

Features

• Changes the progress bar in the main player to red
• Changes the progress bar in thumbnails to red

This add-on will try to keep up with future changes that youtube makes to colors to keep it red

Getting started

🛠 Build locally

1. Clone
2. Run npm install to install all required dependencies
3. Run npm run build

The build step will create the distribution folder, this folder will contain the generated extension.

🏃 Run the extension

Using web-ext is recommended for automatic reloading and running in a dedicated browser instance. Alternatively you can load the extension manually (see below).

1. Run npm run watch to watch for file changes and build continuously
2. Run npm install --global web-ext (only only for the first time)
3. In another terminal, run web-ext run -t chromium
4. Check that the extension is loaded by opening the extension options (in Firefox or in Chrome).

Manually

You can also load the extension manually in Chrome or Firefox.

Extensions created using this template

• notlmn/copy-as-markdown - Browser extension to copy hyperlinks, images, and selected text as Markdown.