Git Product home page Git Product logo

qequ / youtube-comments-timestamps Goto Github PK

View Code? Open in Web Editor NEW
5.0 1.0 2.0 988 KB

Enhance your YouTube experience with a browser extension that allows easy navigation through videos using time markers from comments

License: MIT License

JavaScript 92.68% CSS 1.80% HTML 5.52%
browser-extension chrome-extension web-development youtube-comments youtube-extension time-markers video-navigation

youtube-comments-timestamps's Introduction

YouTube Comment Time Marker Extension

YouTube Timestamp Icon

Description

This browser extension enhances the YouTube viewing experience by allowing users to easily navigate through a video based on time markers extracted from the video's comments. It adds functionality to jump to specific timestamps mentioned in comments, and provides buttons for quick navigation between these markers.

How It Works

  • Time Marker Parsing: When a user clicks on a YouTube comment that contains time markers (e.g., "0:00 Intro, 5:00 Chapter 1, 10:00 Conclusion"), the extension parses these markers and converts them into an array of seconds.
  • Keyboard shorcut: Pressing Alt + Q and Alt + W will navigate to the previous and next time markers, respectively.

Availability

Available for Firefox here: https://addons.mozilla.org/firefox/addon/youtube-comments-timestamps/

Installation and Loading Locally

To load and use the extension locally in your browser, follow these steps:

  • git clone this repository
  • Open your browser and navigate to chrome://extensions/
  • Open your browser and navigate to the extensions page (e.g., chrome://extensions in Google Chrome).
  • Enable "Developer mode" (usually a toggle in the top right corner).
  • Click on "Load unpacked" and select the folder where your content.js and manifest.json files are located.

Usage

  • Navigate to a YouTube video.
  • Click on a comment containing time markers to load them into the extension.
  • Use the keyboard shortcuts Alt + Q and Alt + W to navigate to the previous and next time markers, respectively.

Notes

  • The extension is designed for use with YouTube and may not work if YouTube changes its layout or class names.
  • The extension currently works best with full page reloads and may need additional logic for single-page application behaviors (like YouTube's dynamic content loading).

TODO

  • Replace buttons for key shortcuts.
  • handle correctly when reloading page.
  • Add support for custom shortcuts.

youtube-comments-timestamps's People

Contributors

gitoffthelawn avatar jukmr avatar qequ avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

youtube-comments-timestamps's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.