web clipping: extension or possible with web app? (via twitter)

[garthgoldwater]

cf. this thread: https://twitter.com/no_defects/status/1281635970736181248?s=20

I understand that the plan for Beaker is to force as much functionality to the webapp level as possible, and avoid extensions (or come up with an alternative API). From my understanding this has to do with the weaknesses inherent in content scripts, privacy concerns, and the generally non-optimal state of the webextensions standard.

Here's the feature I'm looking to implement: I'd like to be able to clip and collect items from around the web that I find while browsing, eg (extremely hacky gif example. please ignore the bugs)

and drop them in various baskets/collections for different tasks/research/whatever. I'd like to make the baskets independent of any particular website, queryable, resort-able, and flexible.... "rummageable" is the word I'm making up to describe this. I'm working on it as a chrome/firefox extension at the moment. I'd rather it work first on Beaker for a few reasons, but the tiling made me bite the bullet and start a tantrum about it.

A way better way to implement this would be to have it open up as a pane a la the new format for terminal. It would be awesome to build that kind of thing as though it were a native browser feature—and save directly to a user's hyperdrive so that snippets could be queried like any other piece of data. (please don't tell me to learn c++ i will cry)

I see two places where a webextension feels like the only option for this kind of behavior:

1. being able to do things like "save this section from a website" and collect stuff like:

• the URL,
• perhaps a unique selector for the position in the site,
• perhaps where you found the link from (some user history for rummaging-style refinding of clips),
• and in some cases, a full archive of the page you were viewing (especially for dynamic content)

2. being able to send a message/data "across panes" so that you can take the snippet and drag it over into some kind of document/organizer/backpack/grab bag view.

I'd really like to do this in Beaker in particular, because I don't really want to host this stuff on my own servers (from a data privacy/radioactive data waste perspective), pay Amazon, use localStorage until I run into its size limit... etc. Can't figure out how to do 1 & 2 with a simple web app, since this is behavior that deals with the act of browsing particularly directly. As far as mission goes—I see it as giving the people who use browsers a way better version of the cookies and data mining crap that say, instagram uses on us all the time—but for introspection, focus, personal growth... all that positive... stuff.

This is particularly frustrating because it doesn't require default sharing of any information to an external server, or (as far as I can tell) any of the particularly exploitable features of webextensions.

[pfrazee]

So I think we could solve this using a combination of bookmarklets (or something similar) and an API to create and/or communicate across panes, both of which we've been thinking about tackling. I'll be thinking about this.

EDIT to elaborate: The bookmark would run in the focused pane and handle the selection, then message it to a new pane (which perhaps would be an app) that can receive the clipping

[garthgoldwater]

great! so the bookmarklet would run an "add event listener on mousedown with meta key and then send to pane" kind of script? and the app in the pane would have some kind of channel to receive data sent from another pane?

[garthgoldwater]

if this is the case, and you implement even an extremely poor, alpha, hardly-documented api that just accepts a data object: please let me know. I'm absolutely fine with building on a tower of constantly-breaking cards (sincerely). Would be willing to be a guinea pig for the api surface.

[pfrazee]

We ended up accelerating some of those features due to feedback so here you go! https://twitter.com/BeakerBrowser/status/1283458822703636480?s=20

API docs here: https://docs.beakerbrowser.com/apis/beaker.panes