View on GitHub

YiNote

YiNote browser extension - online video note taking tool

YiNote Browser Extension

YiNote, aka TurboNote Chrome Extension, is an effective tool to take and share notes while watching online videos.

Installation

Table of Contents

Introduction

Purpose and history

YiNote, aka TurboNote chrome extension, is developed to help online learner and video editor to bookmark thoughts and ideas in a fine-grained way while working or learning with online materials. It was developed in 2016 as a side project, and luckily loved by thousands users all around the world.

During the COVID-19 pandemic, I rewrote the extension in a more scalable and maintainable approach. Hopefully it can fill the needs from different users, and boost your learning experience to next level.

Features

Get started

How to use

There are serveral options to use this extension:

Development

Prerequisite

Suggested environment:

Install dependencies

For NPM v6 or above:

npm ci

For NPM before v6

npm install
Start development

YiNote leverages Lerna to manage the monorepo.

Please run npm run bootstrap to setup dependecies for each sub_modules before start.

Then run npm start will start both extension and playground in development mode.

For content script change, you need to reload the extension in chrome://extensions tab.

For background and options changes, just refresh the page should be able to load the changes.

playground mode is also provided to easy content script development. This mode simulates content script to inject UI widget in page served from webpack dev server

For more information about how to develop browser extensions, please refer to Chrome extension get started

About the project

Project components

This extension inject content script to display UI widget and interact with host page.

Background Scripts is used for message handling and handling data migrations.

Options page is provided to give more webpage real estate for data management and configuring settings.

YiNote store data in browser.storage on user’s local device.

Tech stack

Thanks for the open source community. YiNote depends on lots of awesome open source modules. In the following part, I’ll only list part of them to share base knowledge of the how this project is built.

Browser support

YiNote leverages mozilla’s Web extension polyfill to achieve better support for Chrome, Firefox and other Chrome-compatible browsers. For detailed support informarion, please see Supported Browsers

Contribute

As a community

As a developer

Please read the Contribution Guide

Translate YiNote

YiNote only supports English currently, please help translate YiNote to make it accessible to more users. To translate please follow the English message json file and translate the content in message field into other languages. For detailed information, please follow this Browser extension i18n doc

All kinds of contributions from anyone are always welcomed!

Support YiNote in your website

If you have a video website and want to make it work with YiNote, but unfortunately YiNote is not able to properly detect video on your website. There are serveral options you can try.

Roadmap

FAQs

License

Copyright (c) 2016 - 2020

Licensed under the GUN GPL3.0 License. View license