/Outside-YouTube-Player-Bar

Display YouTube's player bar outside the video.

Primary LanguageTypeScriptMIT LicenseMIT

Outside YouTube Player Bar

Display YouTube's player bar outside the video.

DOWNLOAD ON THE

Chrome

Chrome Web Store Version Chrome Web Store Users Chrome Web Store Rating

Chrome Web Store

Mozilla Firefox

Mozilla Add-on Version Mozilla Add-on Users Mozilla Add-on Rating Mozilla Add-on Stars

Mozilla GET THE ADD-ON

Microsoft Edge

Edge add-ons


FOR DEVELOPER GUIDE

Requirements

  • Node.js
    • Version info in ./.tool-versions
  • pnpm
    • Version info in packageManager field of ./package.json

Setup

You must use pnpm. At the first, corepack enable.

Ready for use the pnpm, then install dependencies.

pnpm install

Start development

pnpm run dev

Default dev browser is chrome. You can change other browser.

  • pnpm run dev:firefox
  • pnpm run dev:edge
  • pnpm run dev:chrome
  • pnpm run dev:arc

Create release build and zip

  • pnpm run build
    • Builds for all browsers. Outputs to the .output dir.
  • pnpm run zip
    • Zips for all browsers. Outputs to the .output dir.

Specific browser target

You can add :<browser> suffix to the script commands.

  • pnpm run build:firefox
  • pnpm run zip:firefox
  • …… other browsers

About the storage

If add new defined value to storage item

If the unreleased versioning schema is changed during development, the option must be discarded once (reset to defaultValue).

Image from Gyazo

If you want to change a schema that has been released once, you need to migrate to a new version. (ref: https://wxt.dev/guide/storage.html#versioning)

Release

DEPLOY.md

i18n localization by translation

Guide

Directory ./src/_locales/*

Put on your locale files.

Testing

e2e

debug locator

To debug locator in a single scenario, use grep option in cli. (https://playwright.dev/docs/test-cli#reference)

pnpm run test:e2e --grep "defaultView outside" --debug

grep example: ""

update snapshots

Use update flag via cli. (https://playwright.dev/docs/test-snapshots#updating-screenshots)

Below is an example of updating only a specific test scenario.

pnpm run test:e2e --grep "fullscreen .*: positionPlayerBar" --update-snapshots