Johannes Marbach 11c667b9bf

[GH-438] Add basic web cliper browser extension (#1582 )

This adds a rudimentary web clipper browser extension. It allows to save
page titles and URLs into cards. URLs will be written into the first
found card property of type 'url' (if any).

Relates to: #438

2021-11-08 16:07:08 -08:00

2.5 KiB

Raw Blame History

Focalboard Web Clipper Browser Extension ✂️

This is the Focalboard Web Clipper browser extension. It aims at supporting various use cases around converting web content from your browser directly into Focalboard cards.

⚠️ Warning: The extension is currently in an early and experimental state. Use it at your own risk only. Don't expect any eye candy.

Status

The extension currently is in a proof-of-concept state with minimal functionality. The only supported use case at the time is building a read-later list. Things that work:

Logging in to the Focalboard server from the extension settings
Selecting a board to capture cards into from the extension settings
Saving websites (title & URL) into cards from a page action (like e.g. Pocket does it)

Only Firefox was tested so far but polyfills have already been enabled so there's a good chance that it'll work in Chrome and maybe even Safari, too.

Next Steps

We're really at the very beginning here so there's a lot to be done. Notable tasks include:

Improve the React code by extracting components
Style the options and popup pages to mimic the look and feel of Focalboard
Replace the logo with something better (the current one was snatched from the Focalboard Windows app)
Link to the extension's options page from page action error messages
Clip parts of a website into image attachments on cards
Extract website content in reader mode into card descriptions
Optimise the logic for finding the first URL property (currently the whole board subtree has to be requested because there is no other API available)
Add some tests
Test the extension on Chrome / Safari and add infrastructure to facilitate this in future (e.g. .web-ext-config.js)
Add an onboarding (displayed after first install) and upboarding (displayed after update) page
Distribute the extension via the various browser add-on stores (ok, maybe too early 😜)

Hacking

First, install dependencies with

$ npm i

You can then compile and bundle the code with

$ npm run watchdev

This will write output into dist/dev/ and automatically recompile and bundle on any source change.

To run the extension in a separate Firefox instance, use

$ npm run servedev

Note that in the above commands you can substitue dev with prod to build and run the extension with production settings.

Distribution

To build a distributable ZIP archive, run

$ npm run build

The archive will be placed into the web-ext-artifacts folder.

2.5 KiB Raw Blame History