Skip to content

Commit

Permalink
Fixed README
Browse files Browse the repository at this point in the history
  • Loading branch information
@avi12
avi12 committed Aug 26, 2024
1 parent d186cd9 commit fa7bf47
Showing 1 changed file with 64 additions and 81 deletions.
145 changes: 64 additions & 81 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,32 +22,24 @@ Powered by [Plasmo](https://github.com/plasmohq/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](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage),
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.
Due to the way the browsers handle extensions, when an extension receives an update, content scripts in previously-open web
pages cannot use the [Storage API](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage) until the user reloads them, which means that if YTHD received an update and the user
attempts to change a setting, he must reload the such pages for the settings to take effect

### A kind-of working solution
### A semi 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.
To provide a smooth user experience, I decided to use the last settings that were fetched

## Translating

You can translate the extension to your own language by
filling [this form](https://apps.jeurissen.co/auto-hd-fps-for-youtube/translate).
Filling will grant you access to a Google Sheets spreadsheet via email, in which you can contribute your translations.
You can translate the extension to your own language by filling [this form](https://apps.jeurissen.co/auto-hd-fps-for-youtube/translate)
Filling will grant you access to a Google Spreadsheet via email, in which you can contribute your translations

## Requirements for setting up

Install [Node.js](https://nodejs.org) and [PNPM](https://pnpm.io/installation).
Install [Node.js](https://nodejs.org) and [PNPM](https://pnpm.io/installation)

## Install dependencies:
## Install dependencies

```shell script
pnpm i
Expand Down Expand Up @@ -89,13 +81,8 @@ 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](https://www.reddit.com/r/assholedesign/comments/j2j85x),
and
therefore I recommend installing it on a virtual machine
like [Windows Sandbox](https://learn.microsoft.com/en-us/windows/security/application-security/application-isolation/windows-sandbox/windows-sandbox-overview).
Of course, if you decide to go through the virtual machine route, you'll need
to [build & pack](https://github.com/avi12/youtube-auto-hd#build--pack) every time you modify a script.
As of September 30th, 2023, Opera 102's installer [automatically sets itself as the default browser](https://www.reddit.com/r/assholedesign/comments/j2j85x), and therefore I recommend installing it on a virtual machine like [Windows Sandbox](https://learn.microsoft.com/en-us/windows/security/application-security/application-isolation/windows-sandbox/windows-sandbox-overview)
Of course, if you decide to go through this route, you'll need to [build & pack](https://github.com/avi12/youtube-auto-hd#build--pack) every time you modify a script

```shell
pnpm run-opera:windows
Expand All @@ -111,83 +98,79 @@ pnpm run-firefox

1. Install [Android Studio](https://developer.android.com/studio) on your operating system
2. Create an AVD (Android Virtual Device)
- For a phone emulator, choose one that
has [Play Store preinstalled](https://user-images.githubusercontent.com/6422804/167658974-9ec9d13f-d297-4e8b-85d6-376809f34aab.png)
- For a tablet emulator, [follow these steps](https://aamnah.com/android/play_store_emulator_install_missing) after
creating it to have Play Store
preinstalled
- For a phone emulator, choose one that
has [Play Store preinstalled](https://user-images.githubusercontent.com/6422804/167658974-9ec9d13f-d297-4e8b-85d6-376809f34aab.png)
- For a tablet emulator, [follow these steps](https://aamnah.com/android/play_store_emulator_install_missing) after
creating it to have Play Store
preinstalled
3. Run the emulator:
```shell
emulator @DEVICE_NAME
```
4. I recommend creating a Google account specifically to be used with the emulator
5. ### Chromium for Android testing
### Chromium for Android testing
1. Download [Kiwi Browser](https://play.google.com/store/apps/details?id=com.kiwibrowser.browser)
2. First get the emulator ID:
```shell
adb devices
```
Then:
- On Windows 10/11, you can run:
```shell
set id=ID & pnpm build-pack:test-push
```
- Otherwise, if you're using PowerShell, run:
```shell
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. <details>
<summary>Side-load the extension on Kiwi</summary>
<!--suppress HtmlDeprecatedAttribute -->
<img align="top" src="https://user-images.githubusercontent.com/6422804/167670341-a0cae554-e922-40b3-b8ed-7bec1ebf17bc.png" alt="Choose zip from storage">
</details>
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
- On Windows 10/11, you can run:
```shell
set id=ID & pnpm build-pack:test-push
```
- Otherwise, if you're using PowerShell, run:
```shell
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. <details>
<summary>Side-load the extension on Kiwi</summary>
<!--suppress HtmlDeprecatedAttribute -->
<img align="top" src="https://user-images.githubusercontent.com/6422804/167670341-a0cae554-e922-40b3-b8ed-7bec1ebf17bc.png" alt="Choose zip from storage">
</details>
4. Select the ZIP in the Download folder
5. To reload, you must first remove the extension and then repeat steps 2-4
6. To debug, enter `chrome://inspect/#devices`
### Firefox for Android testing
1. Download [Firefox](https://play.google.com/store/apps/details?id=org.mozilla.firefox)
2. In the terminal:
```shell
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
1. Press ⋮ (menu button) → Settings → Enable "Remote debugging via USB"
2. Get the emulator ID via
```shell
adb devices
```
4. Create 2 terminals
- In the first one, run `dev:firefox`
- In the second one, run
```shell
adb devices
pnpm run-firefox:android --android-device=ID
```
4. Create 2 terminals
- In the first one, run `dev:firefox`
- In the second one, run
```shell
pnpm run-firefox:android --android-device=ID
```
where you replace `ID` with the emulator 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](https://extensionworkshop.com/documentation/develop/web-ext-command-reference/#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

1. Modify a script
2. Wait until the extension is re-added
3. Reload the web page
Notice that due to [web-ext run](https://extensionworkshop.com/documentation/develop/web-ext-command-reference/#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 <kbd>Connect</kbd> and then click on that list item
6. Under "Tabs" click <kbd>Inspect</kbd>
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 <kbd>Connect</kbd> and then click on that list item
6. Under "Tabs" click <kbd>Inspect</kbd>

### Sideloading onto your daily driver browser

Expand Down Expand Up @@ -218,4 +201,4 @@ pnpm build-pack:firefox

Feel free to contribute! Keep in mind that the license I chose
is [GPL v3](https://github.com/avi12/youtube-auto-hd/blob/main/LICENSE).
If you want to fork, make sure to credit [avi12](https://avi12.com) and link to this repository.
If you want to fork, make sure to credit [Avi](https://avi12.com) and link to this repository.

0 comments on commit fa7bf47

Please sign in to comment.