Code Monkey home page Code Monkey logo

refer's Introduction

Refer - Web Clipper

Cross browser web clipper. Takes video notes, screenshots and extract texts or images from supported web browsers.

Quick Start

Ensure you have

  • Node.js 10 or later installed
  • Yarn v1 or v2 installed

Then run the following:

  • git clone https://github.com/butterops/refer.git && cd refer to clone this project
  • yarn install to install dependencies.
  • yarn run dev:chrome to start the development server for chrome extension
  • yarn run dev:firefox to start the development server for firefox addon
  • yarn run dev:opera to start the development server for opera extension
  • yarn run build:chrome to build chrome extension
  • yarn run build:firefox to build firefox addon
  • yarn run build:opera to build opera extension
  • yarn run build builds and packs extensions all at once to extension/ directory

Development

  • yarn install to install dependencies.

  • To watch file changes in developement

    • Chrome
      • yarn run dev:chrome
    • Firefox
      • yarn run dev:firefox
    • Opera
      • yarn run dev:opera
  • Load extension in browser

  • Chrome

    • Go to the browser address bar and type chrome://extensions
    • Check the Developer Mode button to enable it.
    • Click on the Load Unpacked Extension… button.
    • Select your extension’s extracted directory.
  • Firefox

    • Load the Add-on via about:debugging as temporary Add-on.
    • Choose the manifest.json file in the extracted directory
  • Opera

    • Load the extension via opera:extensions
    • Check the Developer Mode and load as unpacked from extension’s extracted directory.

Production

  • yarn run build builds the extension for all the browsers to extension/BROWSER directory respectively.

Note: By default the manifest.json is set with version 0.0.0. The webpack loader will update the version in the build with that of the package.json version. In order to release a new version, update version in package.json and run script.

Generating browser specific manifest.json

Update src/manifest.json file with browser vendor prefixed manifest keys

{
  "__chrome__name": "SuperChrome",
  "__firefox__name": "SuperFox",
  "__edge__name": "SuperEdge",
  "__opera__name": "SuperOpera"
}

if the vendor is chrome this compiles to:

{
  "name": "SuperChrome",
}

Add keys to multiple vendors by seperating them with | in the prefix

{
  __chrome|opera__name: "SuperBlink"
}

if the vendor is chrome or opera, this compiles to:

{
  "name": "SuperBlink"
}

See the original README of wext-manifest-loader package for more details

Bugs

Please file an issue here for bugs, missing documentation, or unexpected behavior.

Linting Config

License

MIT © ButterOps.Dev

Credits

https://github.com/abhijithvijayan/web-extension-starter

Browser Support

Chrome Firefox Opera Edge Yandex Brave vivaldi
49 & later ✔ 52 & later ✔ 36 & later ✔ 79 & later ✔ Latest ✔ Latest ✔ Latest ✔

refer's People

Contributors

dev2arch avatar mrdotkg avatar spyabhishek avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Forkers

nikunjkr

refer's Issues

Send clips to Evernote account

Clicking on 'Take Notes Button' in video player captures some details as notes. We want to be able to send these notes to user's Evernote account.

In the extension pop up, add a button "share notes to evernote". On click of this button

  • Redirect user to evernote auth login
  • Create a new notebook in user's evernote account named "Refer Clips"
  • On click of refere button in Youtube video player, the extension should sync all new notes to "Refer Clips" notebook of evernote.

To write scripts, we should create a new file source/scripts/evernote.js

Clip details from YouTube videos

As a fellow learner on youtube.com, I want to clip details from YouTube videos at any timestamp as notes

While we are watching a youtube video, on click of refer button in the video player the extension should read the following data from web page-

  • Video Title, Url
  • Channel Name, Url
  • Video player Screenshot
  • Current time in player

Steps to do

  1. Setup this project on your local dev machine README.md
  2. Install dependencies and run the project README.md
  3. Edit javascript files and add your own scripts source/scripts/youtube.js.

TODO Checklist

  • Capture video title
  • Capture video url
  • Capture channel title
  • Capture channel url
  • Capture current time in video player
  • Capture current screenshot in video player

Support multiple backends for storing notes

The web clipper should support the following backends to store clipped contents

  • #11 As a user I would like to send my web-clips to my Onenote account so that I can read them later
  • #7 As a user I would like to send my web-clips to my Evernote account so that I can read them later
  • #17 As a user I would like to send my web-clips to Reference app on my desktop so that I can read them later

Clip details from Lynda tutorials

As a Lynda learner I want to clip timestamp details from Lyda tutorials so that I can use them as reference notes.
Clip from Lynda or LinkedIn Learning videos.

  • create a new script file
  • read the DOMS that have fields of interest

Mock Rest API in development

Story

As a developer I want web-clipper dev version to send clipped content via a URL to a mock REST server's end-points.

Description

Running any of the dev commands line yarn dev:chrome should start a local REST server at http://localhost:3002 with following end-points:

  1. GET /status response "OK"
  2. POST /clip response "DONE"

Definition of done

  1. Clone project and install dependencies
  2. Run yarn dev:chrome
  3. curl http://localhost:3002/status should respond with OK
  4. curl --data-urlencode "{}" http://localhost:3002/clip should respond with DONE
  5. Manually stop the command yarn dev:chrome
  6. Do step 3 and step 4, should result in error Failed to connect to localhost port 3002: Connection refused

Integrate clipping of major web contents

The web clipper should support the following contents from over the internet in order to support initial youtube.com clips

  • Screenshots (canvas)
  • Texts
  • Link (native location)
  • Date (native Date())

Definition of done

  • Each of the info clip must have it's clip-type as one of the above.

Download as JSON and Configure Extension Settings(options)

  • Flatten the nested json output recursively to collection of key, value pair
  • Change default extension tiny name to "Reference"
  • Add static, disabled options as settings for extension
  • Change Copy JSON button to Download JSON
  • Disable banner screenshot image
  • Dynamically load screenshot image in the table of last captured items instead of showing long DataURL
  • Support Downloading the Flattened version of the clipped data

Support specific websites for better collection

  • #6 As a user I want to clip timestamp details from YouTube videos so that I can use them for research
  • #12 As a Lynda learner I want to clip timestamp details from Lyda tutorials so that I can use them as reference notes

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.