https://github.com/rakeshup/youtube-widget

A chrome extension to control media playing in any YouTube™ tab
https://github.com/rakeshup/youtube-widget

chrome-extension-react content-scripts extension-port mutation-observer popup-script

Last synced: 3 months ago
JSON representation

A chrome extension to control media playing in any YouTube™ tab

• Host: GitHub
• URL: https://github.com/rakeshup/youtube-widget
• Owner: RakeshUP
• License: mit
• Created: 2019-10-08T09:55:10.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-10-13T06:05:45.000Z (over 5 years ago)
• Last Synced: 2023-08-31T19:17:13.616Z (over 1 year ago)
• Topics: chrome-extension-react, content-scripts, extension-port, mutation-observer, popup-script
• Language: JavaScript
• Homepage: https://chrome.google.com/webstore/detail/hmmageicpcbobjedojoecplfincecdcb
• Size: 26.4 KB
• Stars: 6
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# YouTube Widget

Widget to control media playing in any YouTube™ tab

Features:

 * Click on the song name to directly go the tab

 * Quickly play/pause or skip to next video

 * Seek the video to any point using the seek bar

 * Open a YouTube tab right from the Chrome toolbar

 

## Chrome Web Store 

[https://chrome.google.com/webstore/detail/youtube-widget/hmmageicpcbobjedojoecplfincecdcb](https://chrome.google.com/webstore/detail/youtube-widget/hmmageicpcbobjedojoecplfincecdcb)

## Documentation

This extension makes use of HTML5 video player's APIs to control the media played, runtime ports to pass messages and a popup page written in react.js to give users the control.

The various files present are:

* `contentScript.js`: has a mutation observer to listen to track name changes in YouTube tab and also manipulates DOM to control the media

* `tabController.js`: is tied to the extension and forwards messages to contentScript

* `popupScript.js`: sends a message to popupController when user performs any action in the popup page

* `popupController.js`: is tied to the extension and forwards messages from popup page to tabController

* `background.js`: contains the state of the media, port sink and acts as a bridge between content scripts and popup script

* `index.js`: contains the React components which renders the widget in the popup page

## Development

```

# clone

$ git clone https://github.com/RakeshUP/youtube-widget.git

# install the dependencies

$ npm install

# to build run this command from the root directory

$ npm run-script build

```

## License

MIT