Coder Social home page Coder Social logo

szasdhun / youtube-auto-hd Goto Github PK

View Code? Open in Web Editor NEW

This project forked from avi12/youtube-auto-hd

0.0 0.0 0.0 2.16 MB

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

Home Page: https://avi12.com/youtube-auto-hd

License: GNU General Public License v3.0

JavaScript 4.02% TypeScript 60.31% CSS 7.20% HTML 1.87% Svelte 26.60%

youtube-auto-hd's Introduction

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

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.

youtube-auto-hd's People

Contributors

avi12 avatar carlosjeurissen avatar martixy avatar miroslaw-zylewicz avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.