mirror of
https://github.com/mattermost/focalboard.git
synced 2024-12-24 13:43:12 +02:00
11c667b9bf
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
66 lines
2.5 KiB
Markdown
66 lines
2.5 KiB
Markdown
# 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.
|