We read a lot of stuff from web and sometimes would like to make a note of some of it so that we can refer to it later. There are a few products which charge few $/month and provide this service but we can easily write a browser extension to capture the text on a web page and save that to a database. Run this service locally if you need this on a single machine, on a raspberry pi in your home network or use a Amazon Lightsail. whatever suits you!!!
Here, I'm going to write a basic browser extension and a web service so that we can save the notes.
This is the first component which captures the highlights on a web page. Since browser doesn't exposes any event which directly gives you information about highlighted text , we are going to use mouseup event and getSelection window function for that.
Once you highlight a block of text (and release mouse's left button), check if there is any highlighted text available. If yes, insert a button element in the page and attach a handler to its click event. That's all this extension does.
The code for this extension is available at here. You should be able to install the extension locally.
Browser extension calls this Web service to read or write . I'm using flask to write a web api which takes a block of text and saves it in database. The database I'm using here is Sqlite and SQLAlchemy as ORM.
lets call each record a Note. It has following fields
text - highlighted text from web page
source - url of the web page
tags - tags which provide additional details
comments - in case you want to add something
createdon/modifiedon - audit fields
To set up database, we are providing the db file path as db location and a function to create all tables as per the model.
we are creating primarily 3 routes -
Get all the notes - This uses query.all() to return all the notes from db. Note that there are some issue in serializing these records by sqlAlchemy
Save a note
Get a note by Id
This is a very basic setup to get what we want. To save the note, we use SQLAlchemy's db_session. To get the list of notes from DB, we use query.all() and render it using jinja.
We need to call the init_db from database.py in order to create all the tables as per the models and then we are set to go.