How to start building a web clipper plug-in?

1

What would it take to build a web clipper plug-in?

What I mean by this: I’d like to select/highlight a snippet of text from an online article, then use this browser plug-in to save that text in a document. Kind of like Kindle Clippings, but for webpages instead of e-books.

However, I am a novice developer and I’ve got no idea where to start.

What are tools I’d have to collect to achieve this?
1. Learn how to build a plug-in
2. Build a user-interface.
3. Learn how to write the data I retrieve to a text document.
4. Do you know of similar projects I could reference?

It’d be nice as well if I could add notes to those snippets of text.

Thank you all!

2

Hi!

You might look at https://github.com/webclipper/web-clipper, an open-source Chrome extension that sounds similar to what you’re trying to do - or you might look at https://screenotate.com/ which does OCR on screenshots, and saves the resulting image and OCR-ed text together as html files.

Regardless, if you wanted to host the snippets on Glitch, and annotate them with notes, you might look at ~sqlite3-db, which is an example of using sqlite3, a database, and sequelize, an object-relational mapper, and express, a web application framework, to store and fetch things.

I hope this helps.

1 Like