PickleNik / youtube-auto-hd

A simple browser extension for changing YouTube videos' quality based on FPS.

YouTube Auto HD + FPS

A browser extension that sets the quality of YouTube videos according to the user's preference, based on the video's FPS.
Available for:

• Google Chrome
• Mozilla Firefox 90+
• Microsoft Edge
• Opera
• Safari - maintained by carlosjeurissen

Made by avi12

Powered by Plasmo

Known issue

Due to the way the browsers handle extensions, when an extension receives an update, content scripts in already-open web pages cannot use the Storage API, until the user reloads those web pages.
In the context of this extension, it means that when the extension receives an update, as long as the user doesn't reload YouTube web pages, the extension cannot get the data regarding the user-preferred qualities.

A kind-of working solution

To provide a smooth user experience, I decided to use the last qualities that were fetched.

This solution is not perfect, since if the user wants to update the quality of the videos in the currently-open web pages using the popup page, it will not update dynamically.
However, this is the only viable solution, as the alternative would be to auto-reload web pages, which would result in a bad user experience.

Translating

You can translate the extension to your own language by filling this form.
Filling will grant you access to a Google Sheets spreadsheet via email, in which you can contribute your translations.

Requirements for setting up

Install Node.js and PNPM.

Install dependencies:

pnpm i

Start the dev server

Chromium browsers

pnpm dev

Firefox

pnpm build:firefox

Running

Chromium/Chrome

pnpm run-chromium

Chromium/Chrome RTL

pnpm run-chromium:rtl

Edge on Windows 10/11

pnpm run-edge:windows

Opera on Windows 10/11

pnpm run-opera:windows

Firefox

pnpm run-firefox

Mobile/tablet

1. Install Android Studio on your operating system
2. Create an AVD (Android Virtual Device)
   1. For a phone emulator, choose one that has Play Store preinstalled
   2. For a tablet emulator, follow these steps after creating it to have Play Store preinstalled
3. Run the emulator:

    emulator @DEVICE_NAME

4. Download Kiwi browser. I recommend creating a Google account specifically to be used with the emulator
5. Run pnpm build-pack:test
6. Push the ZIP to the emulator. If using PowerShell:

   $zip = "chrome-mv3-prod.zip";
   $destAndroid = "/storage/emulated/0/Download/$zip";
   adb shell rm $destAndroid;
   adb push "build/$zip" $destAndroid;

   1. If you're running both emulators, use argument -s ID to specify the ID of the emulator you want to interact with
      E.g. adb -s ID shell ...
   2. Find out the IDs using adb devices
7. Side-load the extension on Kiwi

   
8. Select the ZIP in the Download folder
9. To reload, you must first remove the extension and then repeat steps 5-8

Sideloading onto your daily driver browser

After pnpm dev:

• Chromium-based browsers
  1. Open the extensions page
  2. Enable "Developer mode"
  3. Open youtube-auto-hd/build on your file system
  4. Drag-drop chrome-mv3-dev onto the extensions page
• Firefox:
  1. Follow this guide
  2. In the file system window, select youtube-auto-hd/build/firefox-mv2-dev/manifest.json

Build & pack

pnpm build-pack

Build & pack for Firefox

pnpm build-pack:firefox

Contribution

Feel free to contribute! Keep in mind that the license I chose is GPL v3.
If you want to fork, make sure to credit avi12 and link to this repository.