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
  • Features
• Get started
  • How to use
  • Development
    • Prerequisite
    • Install dependencies
    • Start development
• About the project
  • Project components
  • Tech stack
  • Browser support
• Contribute
  • As a community
  • As a developer
  • Translate YiNote
• Support YiNote in your website
• Roadmap
• FAQs
• License

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

• Take time-stamped note while watching online video, currently supported video formats/platform:
  • Youtube video
  • Embedded youtube iframe video
  • HTML5 video
  • Local video via browser
• Send notes to popular note platforms
  • Google Docs
  • MS OneNote
  • Evernote
• Support markdown styling in editor
• Generate PDF with video screenshot
• Annotate screenshot
• Bookmark video
• Tag bookmarks
• Search through bookmarks and notes
• Export and import of data

Get started

How to use

There are serveral options to use this extension:

• Install extension from web stores

  Please see Installation section to install extension from official platform stores. If you are user before v1.0.0, please checkout Migrations Guide for more information.

• Build and install extension locally

  You can also build the extension, then run it locally. Please see Development for more information.

Development

Prerequisite

Suggested environment:

• Node >= 10.0.0
• NPM >= 6.0.0

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.

• React for UI components
• React Router for routing. MemoryRouter is used for content script, HashRouter is used for options page
• Easy Peasy for state management
• react-i18next for internationalization
• Styled Components to write cssinjs styled styles
• Material UI for quickly wrapup complex UI components
• Webpack as bundler

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

• Expose YiNote to more people, share it via blog post, facebook, twitter etc.
• Answer questions in the issue tracker
• Support financially on Patreon and GitHub Sponsor

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.

• Add a new Player to YiNote by following this pull request

• Add player hook in your website.

  1. Add data attribute, [data-yinote="yinote-hook-player"], to your video element. So YiNote can properly locate your video element.
  2. Add message listener to watch on video action messages from YiNote.

  window.addEventListener('message', event => {
    const { data } = event;
    if (data.from !== 'yi-note') {
      return;
    }
  
    switch (data.action) {
      case 'play':
        // handle play video
        return;
      case 'pause':
        // handle pause video
        return;
      case 'seek':
        // get secondsToSeek from data.data
        // then seek to certain time with your player
        return;
      case 'getCurrentTime':
        // get current time from your player, then
        window.postMessage({ ...data, data: $currentTime }, *);
        return;
      case 'getDuration':
        // get duration from your player, then
        window.postMessage({ ...data, data: $duration }, *);
        return;
    }
  }, false);
  

Roadmap

• (Done) Integration with popular note / document platforms, like Evernote, onenote, google doc.

• (Done) Sync notes from mooc platforms

• Web article annotation

• Cloud support

• Fine grained note sharing

• Multiple devices support (Desktop browser, mobile devices)

FAQs

How to share notes with others?

• YiNote can send notes to Evernote, MS OneNote, Google Docs since v1.2.0. You can firstly send notes to one of the supported services, then generate share link from there.
• You can also export notes as JSON file in options page, then send the exported JSON file out. Whoever get the exported file can then import it via options page.

What should I prepare if I decide not to use YiNote extension any more?

YiNote save users data in chrome local storage (per extension), which means delete the extension will also erase saved notes from your browser. YiNote provides a backup strategy in options page to export local data into a json file. Please make sure you backup your data before delete the extension. Cloud support will be provided in the future to achieve better sync and backup.

Why I bookmarked same title and thumbnail for different videos on Youtube?

Youtube don't update page metas, like title and thumbnails, when video changed in page. So reload page is needed to make sure YiNote can capture proper metadata for the video. YiNote also enabled settings in options page to enable auto reload when video change. Page domain, like www.youtube.com, need to be added when enable this setting. YiNote only applys reload behaviour to listed domains in the settings page.

License

Copyright (c) 2016 - 2020

Licensed under the GUN GPL3.0 License. View license