daichan132 / youtube-live-chat-fullscreen Goto Github PK

View Code? Open in Web Editor NEW

2.0 1.0 0.0 80.3 MB

Chrome extension for Youtube live

Home Page: https://chromewebstore.google.com/detail/youtube-live-chat-fullscr/dlnjcbkmomenmieechnmgglgcljhoepd?hl=en

License: GNU General Public License v3.0

JavaScript 1.37% TypeScript 78.73% SCSS 19.60% HTML 0.30%

react typescript chrome-extension youtube zustand vite

youtube-live-chat-fullscreen's Introduction

Youtube Live Chat Fullscreen

This extension allows Youtube Live to use chat when in Fullscreen.

App Screenshots

Chat is available in Fullscreen	Style Change	Multi Language

Built with

React
TypeScript
Vite
Biome (for format and lint)
i18next (for internationalization)
Zustand (for state management)
Sass
typed-scss-modules (for SCSS modules with TypeScript)
lefthook (for git hooks management)
dndkit (for drag functionality)

Quick Start

Ensure you have

Node.js 20.x
Yarn installed

Note If you don't have yarn installed, run: npm install -g yarn

Clone to local

If you prefer to do it manually with the cleaner git history

npx degit daichan132/Youtube-Live-Chat-Fullscreen Youtube-Live-Chat-Fullscreen
cd Youtube-Live-Chat-Fullscreen
git init

Then run the following:

yarn install to install dependencies.
yarn dev to start the development server.
yarn build to build an unpacked extension.
Load extension in Chrome (Chromium, Manifest V3)
- Go to the browser address bar and type chrome://extensions
- Check the Developer Mode button to enable it.
- Click on the Load Unpacked Extension button.
- Select your dist folder in the project root.
Load extension in Firefox (Manifest V2)
- Go to the browser address bar and type about://debugger
- Click on the Load Temporary Add-on button.
- Select your dist-firefox-v2 folder in the project root.

Available Commands

yarn clean to remove dist and dist-firefox-v2 folders. Called by dev and build commands.
yarn format to format code with Biome.
yarn lint to lint code with Biome and type-check.
yarn prepare to install Git hooks with Lefthook.

License

This project is licensed under the GPL-3.0 license. See the LICENSE file for more details.

Third-Party Licenses

This project uses third-party libraries or components, each subject to their own license terms. Please see below for details on each license.

browser-extension-react-typescript-starter
- License: MIT License
- License Details: Here

youtube-live-chat-fullscreen's People

Contributors

Stargazers

Watchers

youtube-live-chat-fullscreen's Issues

Add a function of changing font-family

Handling when live stream chat is disabled

When live chat is displayed, the screen goes slightly dark.

Sometimes this phenomenon does not occur and the cause is unknown. Perhaps it has something to do with the behavior in the iframe.

Display a description when user hover a icon

Add a funciton of changing background-image

SNS Share Tools for UI Setting

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

chore(deps): update actions/checkout action to v4
chore(deps): update actions/setup-node action to v4
🔐 Create all rate-limited PRs at once 🔐

Pending Status Checks

These updates await pending status checks. To force their creation now, click the checkbox below.

chore(deps): update dependency node to v20.13.1

Detected dependencies

github-actions

.github/workflows/ci.yml

actions/checkout v3

actions/setup-node v3

actions/checkout v3

actions/setup-node v3

nodenv

.node-version

node 20.11.0

npm

package.json

@dnd-kit/core ^6.1.0

@dnd-kit/modifiers ^7.0.0

@dnd-kit/sortable ^8.0.0

classnames ^2.5.1

emoji-regex ^10.3.0

i18next ^23.11.5

i18next-browser-languagedetector ^8.0.0

immer ^10.1.1

lodash-es ^4.17.21

re-resizable ^6.9.16

react 18.3.1

react-color ^2.19.3

react-dom 18.3.1

react-i18next ^14.1.1

react-icons ^5.2.1

react-modal ^3.16.1

react-select ^5.8.0

react-transition-group ^4.4.5

react-use ^17.5.0

redux-persist-webextension-storage ^1.0.2

uuid ^9.0.1

vite-tsconfig-paths ^4.3.2

zustand ^4.5.2

@biomejs/biome 1.7.3

@crxjs/vite-plugin ^2.0.0-beta.23

@playwright/test ^1.44.0

@types/chrome ^0.0.268

@types/fs-extra ^11.0.4

@types/lodash-es ^4.17.12

@types/node ^20.12.12

@types/react ^18.3.2

@types/react-color ^3.0.12

@types/react-dom ^18.3.0

@types/react-modal ^3.16.3

@types/react-router-dom ^5.3.3

@types/react-transition-group ^4.4.10

@types/redux-persist-webextension-storage ^1.0.3

@types/uuid ^9.0.8

@typescript-eslint/parser ^7.10.0

@vitejs/plugin-react ^4.2.1

autoprefixer ^10.4.19

css-declaration-sorter ^7.2.0

fs-extra ^11.2.0

identity-obj-proxy ^3.0.0

lefthook ^1.6.12

npm-run-all2 ^6.2.0

postcss ^8.4.38

prettier ^3.2.5

rimraf ^5.0.7

sass ^1.77.2

simple-git-hooks ^2.11.1

typed-scss-modules ^8.0.1

typescript 5.4.5

vite ^5.2.11

yarn 4.2.2

Check this box to trigger a request for Renovate to run again on this repository

Option to remove scroll bar

I don't need a scoll bar to scroll, and it uses up a lot of screen space. If removed, the text should wrap to the edge of the window.

multilingual support

add YLC size handling when user change the size of window

現在は使用しているライブラリの関係で難しそう