in

YouTube Time Labels chrome extension build using vue


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.

Shortcut Keys

CTRL+SHIFT+Q (⌘+⇧+E on Macs): record current timestamp and add to extension.

Quick Install

On a Chrome / Chromium-based browser, download and install the extension from the Chrome Web Store:
https://chrome.google.com/webstore/detail/youtube-time-labels/nfejcmbipcbnloiekolfklofpdabmmig

Refresh already open YouTube video tabs to get the extension working on these pages.

Project Details

The project is currently implemented using Javascript, Vue (with Vuex for centralized state management) and Bootstrap. It makes use of the Chrome Browser API for persistent storage, inter-service communication, and hotkeys.
Tools used in this project includes NPM and webpack.

Organization

  • ./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.

Building

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 /:

npm install

Then, build the .js bundles by running one of:

  • development build
  • production build

This builds the source .js files to dist/js/.

Manual Installation

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 manifest.json.

If you have any YouTube tabs open, make sure to refresh them before using the extension.

Testing

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

GitHub

https://github.com/brianlinUM/youtube-timestamps




Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

GIPHY App Key not set. Please check settings

Batch uploading to the Wikimedia Commons has never been so easy

MTV Announces Trending: VMAs Award Celebration thumbnail

MTV Announces Trending: VMAs Award Celebration