Outside YouTube Player Bar

Display YouTube's player bar outside the video.

DOWNLOAD ON THE

Chrome

Mozilla Firefox

Microsoft Edge

---

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).

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

• chrome.i18n(https://developer.chrome.com/extensions/i18n)

Directory ./src/_locales/*

Put on your locale files.

• List of languages supported by Chrome
  • https://developer.chrome.com/webstore/i18n?csw=1#localeTable

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