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

As of Sep 30th, 2023, Opera 102's installer automatically sets itself as the default browser, and therefore I recommend installing it on a virtual machine like Windows Sandbox. Of course, if you decide to go through the virtual machine route, you'll need to build & pack every time you modify a script.

pnpm run-opera:windows

Firefox

pnpm run-firefox

Phone/tablet

1. Install Android Studio on your operating system

2. Create an AVD (Android Virtual Device)

   • For a phone emulator, choose one that has Play Store preinstalled
   • For a tablet emulator, follow these steps after creating it to have Play Store preinstalled

3. Run the emulator:

    emulator @DEVICE_NAME

4. I recommend creating a Google account specifically to be used with the emulator

5. Chromium for Android testing

   1. Download Kiwi Browser
   2. First get the emulator ID:

      adb devices

      Then:
      • On Windows 10/11, you can run:

        set id=ID & pnpm build-pack:test-push

      • Otherwise, if you're using PowerShell, run:

        pnpm build-pack:test; `
        $zip = "chrome-mv3-prod.zip"; `
        $destAndroid = "/storage/emulated/0/Download/$zip"; `
        $ID = "emulator-####"; `
        adb -s $ID shell rm $destAndroid; `
        adb -s $ID push "build/$zip" $destAndroid;

        where you assign $ID with the emulator ID
   3. Side-load the extension on Kiwi

      
   4. Select the ZIP in the Downloads folder
   5. To reload, you must first remove the extension and then repeat steps ii-iv
   6. To debug, enter chrome://inspect/#devices

6. Firefox for Android testing

   1. Download Firefox

   2. In the terminal:

      adb shell pm grant org.mozilla.firefox android.permission.READ_EXTERNAL_STORAGE

   3. In the app:

      1. Press ⋮ (menu button) → Settings → Enable "Remote debugging via USB"
      2. Get the emulator ID via

         adb devices

   4. Create 2 terminals

      • In the first one, run dev:firefox
      • In the second one, run

        pnpm run-firefox:android --android-device=ID

        where you replace ID with the emulator ID

   5. To reload:

      1. Modify a script

      2. Wait until the extension is re-added

      3. Reload the web page

         Notice that due to web-ext run using the same files that Plasmo uses to convert the development files into extension-usable script files, Plasmo might crash and so you'll have to restart it every time that you modify a script

   6. To debug:

      1. Open Firefox on your desktop
      2. In the terminal of run-firefox:android, find the remote Firefox debugger port (search "TCP port")
      3. Open about:debugging#/setup in Firefox
      4. Type in the text box: localhost:PORT
      5. In the left sidebar, next to localhost:PORT, click Connect and then click on that list item
      6. Under "Tabs" click Inspect

Sideloading onto your daily driver browser

• Chromium-based browsers
  1. Run dev
  2. Open the extensions page
  3. Enable "Developer mode"
  4. Open youtube-auto-hd/build on your file system
  5. Drag-drop chrome-mv3-dev onto the extensions page
• Firefox for desktop:
  1. Run dev:firefox
  2. Follow this guide
  3. 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.