YouTube Time Labels
This chrome extension allows a YouTube user to 'bookmark' different parts of a video so that they could come back to it later.
Take a look at
/demo_images to find more screenshots of this extension in action.
Each video can be expanded to show its timestamps. When you click on an added timestamp on the extension popup, the current tab is changed to the video, starting at the timestamp. You can add a custom label to each timestamp as notes or to remember the timestamp's contents. The title for each video can also be changed.
⌘+⇧+E on Macs): record current timestamp and add to extension.
On a Chrome / Chromium-based browser, download and install the extension from the Chrome Web Store:
Refresh already open YouTube video tabs to get the extension working on these pages.
Tools used in this project includes NPM and webpack.
./dist/: contains the installable chrome extension.
./src/: source code that needs to be webpacked.
./src/common/: source code that is reused in multiple places.
./src/components/: Vue Single File Components.
./src/store/: Vuex centralized store definition and initialization.
./tests/: contains unit tests for the project.
./scripts: contains shell utility scripts.
./Changelog.md: Lists history of versions.
./Plans.md: Lists work-in-progress plans for upcoming release.
./componentHierarchy.txt: Outlines how vue components are arranged in this project.
Installation and Building
Please see Quick Install above for instructions on how to download and install easily from the Chrome Web Store.
Feel free to skip this section if installing directly from the release
dist-v*.zip (see next section).
Before beginning, make sure to have Node.js and NPM installed.
Install all Node dependencies by running from project root
Then, build the .js bundles by running one of:
- development build
npm run dev
- production build
npm run prod
This builds the source .js files to
To install the chrome extension to the browser manually, find the latest release on github: https://github.com/brianlinUM/youtube-timestamps/releases.
From assets download and unzip the
dist-v*.zip. Then, enable Developer Mode in
chrome://extensions/. "Load unpacked" from
dist-v*/, which contains
If you have any YouTube tabs open, make sure to refresh them before using the extension.
(Tests are currently broken)
This project currently uses
jest for unit tests of non-vue js scripts, along with
jest-chrome to mock Chrome's API.
Run by executing:
npm run test
Vue component tests and end-to-end tests are planned.