Skip to content

avi12/youtube-auto-hd

Repository files navigation

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:

A screenshot from the extension's pop-up page

Made by avi12.

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, instead of forcing the user to reload all of the already-open web pages, I decided to keep track of the last qualities that were fetched, and use them.

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 (as seen above), it will not update dynamically.
However, this is the only viable solution, since the alternative one would be to auto-reload web pages, which would lead to a bad user experience.

Translating

You can translate the extension to your own language by filling this form.
After filling, you will get an email, which will grant you access to a spreadsheet, in which you can contribute your translations.

Requirements for setting up

Install Node.js and PNPM.

Download dev dependencies:

pnpm i

Start Rollup for development

pnpm dev

Running

Chromium/Chrome

pnpm run-chromium

Edge on Windows 10/11

pnpm run-edge-windows

Browsers that don't support Manifest v3

  1. Build the extension for Firefox/Opera (see below).
  2. Open the extensions page in that browser.
  3. Enable the developer mode (top-right corner usually).
  4. Either drag-drop the browser-compatible ZIP onto the browser or click "Load unpacked extension" and choose it.

Mobile/tablet

  1. Install Android Studio on your operating system
  2. Create an AVD (Android Virtual Device)
    1. If you're creating a phone emulator, choose one that has Play Store preinstalled
    2. If you're creating a tablet emulator, after creating, follow these steps to have Play Store preinstalled
  3. Download Kiwi browser. I recommend creating a Google account specifically to be used with the emulator
  4. Run pnpm run pack
  5. Push the ZIP to the emulator. If using PowerShell:
    $zip = "youtube_auto_hd_fps_{version}.zip"; # where {version} is the version number of the extension
    $destAndroid = "storage/emulated/Download/$zip";
    adb shell rm $destAndroid;
    adb push "dist_packed/$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
  6. Sideload the extension on Kiwi Choose zip from storage
  7. Select the ZIP in the Download folder
  8. To reload, you must first remove the extension, re-run pnpm run pack, and then load the ZIP again

Pro-tip: run the emulator from the CLI:

emulator @DEVICE_NAME

Build & pack

pnpm build-pack

Build for Firefox (first run pnpm build-pack)

pnpm build-for-firefox

Build for Opera (first run pnpm build-pack)

pnpm build-for-opera

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.