It would be cool to have a shared community repository of site adapters, in the spirit of adversarial interoperability [1]. It's probably the most tedious and boring part of such projects, once it's abstracted away it would be much more fun to experiment. This could also be useful for projects like Fraidycat [2] or RSS feed generators like Politepol [3], alternative UIs like Woob [4] etc
There's a huge amount of conceptual similarity between Wildcard and Electric Tables. I think I like (from the videos) the table approach of Wildcard a bit better, but it looks like Wildcard is more single-page focused, while Electric Tables is more focused on bringing multiple pages together into a single table.
I can envision something like the Wildcard UI, but Electric Tables concepts, so the table follows you from page to page, but can be augmented from data from the specific page - allowing you to save one or more rows from each page you visit to the master table (e.g. a single product from a product page, or a list of products from a search result).
A very common usage pattern that I find myself in is searching Amazon for products, opening individual ones, deciding that product is useless/useful, making notes about specific features. The Wildcard concept of modifying the page directly ("hide this product, never show it to me again", "add a note to this product", "fix the unit price info for this product to be a standardized unit") might be done on either the search result or the individual product page, but would be representing data on a "obscure product search" table.
The same thing happens with research on obscure programming issues - again, it'd be really cool to be able to augment my Google Search results like Wildcard Shows, but from both the search results page, as well as from the actual page being referenced.
A community repository would be super nice for those. Something along the lines of DefinitelyTyped[1], all managed through git, easily integrates with other stuff (like shown on npmjs.org when the @types package exists), allows maintainers to "own" the adapters they contribute by making a PR. It's really the N adapters * T time per adapter that really makes it hard for one person to do. That plus monitoring API changes/flakiness of each adapter to make sure the data is still solid.
> Note, because of technical reasons (content security policies) some sites (e.g. Twitter, Airbnb) will add to Electric Tables, but in a new tab instead of using a pop-up and it won’t grab much additional data..
so so so frustrating. extensions getting whacked into irrelevance by CSP is such a vulgar sick security misfeature. what a repulsive era of oversecuritization we've FUD'ed ourselves into. the only voices at the table are those hungry to lock down & deny power to users; technical authoritarianism without check.
the only workaround i can see is abandoning extensions & making devtools the new way we extend user-agency. the browsers, the standards folks are killing regular user-agency. they are forcing us to climb down to a lower security ring.
wonderful world changing extensions like Hypothesis are also broken on sites like twitter and airbnb. making the web read only, removing all user agency, is so not ok. projects like Electric Table show hints of the better web that many long hoped was to come, that has slowly been emerging. but this potential is being cut off, in the most critical areas. somethings got to give. we cant floruish, cant survive a corporate controlled web.
It seems the reason this is being bonked by CSP is that it's not a browser extension, but rather a bookmarklet, and it's bookmarklets that are being whacked by CSP. And it's sad, because bookmarklets were even more in the ethos of zero-install than extensions are - but that's a double edged sword if malicious actors use it on unwitting customers.
Where extensions are actually getting whacked beyond what is necessary for security, though, is Chrome's Manifest V3, which is tightly cutting down on the ability of extensions to eval code, run background tasks, and run custom logic to intercept web requests. Anti-ad-blocking considerations are creating massive conflicts of interest here, straight to the point of the last paragraph in the parent. It's not a good direction for the open web.
Many thanks for the post. My apologies for getting this wrong! It does make more sense that bookmarklets would not have the privilege necessary. It'd be nice to give them an escape hatch, a way to escalate: `javascript+user:alert(1+1);` But this ultimately feels a lot less pernicious & more understandable (as an oversight) than I'd made things out to be.
I think you've got the eye on the ball here, on where the really important issues are shaking down. Diving back into smaller-grained topics, I find it interesting how much focus the web request interception has gotten versus so many other topics of the Web Extensions clamp-down happening. I couldn't find any discussion of the removal of eval/dynamic code, for example (daggers of irony: the same rule Apple uses to forbid v8 on iOS), & opened what I believe is the first issue against that. https://github.com/w3c/webextensions/issues/139 . The background tasks discussion is another important one: extensions no longer having most of the web platform accessible to them would be extremely limiting. Discussion here is active (if not totally hope inspiring), with proposals such as "Limited Event Pages" https://github.com/w3c/webextensions/issues/134 trying to move things into the right direction.
I'm not entirely sure that Electric Tables is quite so grandiose as all that but I appreciate the sentiment!
As for CSP - I'm not technical enough to really understand why it needs to exist or how it might be re-architected but as a hobby coder I love it when things are extensible / hackable and CSP seems to be a pain in the ass!
Indeed. This project feels worthy of exploration, and collaboration. There's an AirTable clone https://github.com/nocodb/nocodb; makes me wonder how the two projects can be federated. Happy to talk about that.
> era of oversecuritization we've FUD'ed ourselves into
Are you referring to the OWASP living proof that sites are built insecurely? I strongly disagree with your characterization of the state of web security. We need a lot more, and we didn't get where we are through FUD but through actual exploits and billions in losses and frauds.
I love this idea, especially the bookmarklet aspect of it. I'm interested to see where it goes.
I use a couple of bookmarklets, and they're really, really handy:
- One automatically takes me to the pkg.go.dev documentation of a Go library if I'm looking at, say, the GitHub page
- The other adds the current page I'm reading to my reading list, which is a mostly complete selection of stuff I've read on the internet - it does a similar thing by extracting titles and images and saving them into a CSV on a Git repo.
The one issue I have with bookmarklets is that, while they will sync across mobile and desktop versions of Firefox, the implementation on Firefox mobile feels a little clunky and cumbersome, and sometimes straight-up doesn't work.
This is genius and scratches a bookmarking itch I've had for ages. I hope you'll press on with this and continue its development. Its pretty close to a state where I would pay for it if:
1. It integrated with whatboard.app ... either via Zapier or on its own.
It would perfectly fit my use-case if it supports the following flow:
1. Person A makes a research and collects and ranks a set of products
2. When done, person A sends to person B
3. Person B looks at the result and provides feedback, which might include dropping items or making questions, or asking to add a column assessing a given feature of the product
There's some interesting overlaps here too with Edge's "Collections", which I mention because isn't listed in the comparison list but may still be a useful comparison.
Does a lot of very similar things: tries to extract titles, "hero images", allows you add freeform notes, including in between URLs, has an export to Excel or OneNote or Word, and even has an auto-formatter for citations in a number of common citation formats. (Also, syncs between devices using Edge.)
This is a really cool concept. A lot of my "web foraging" (love that expression) or data foraging really is exactly what he's mentioning here.
Also made me think of a related extension https://braintool.org/ - whose job is to grab and organize your bookmarks into an org file.
I could see these two concepts being combined for pretty powerful bookmarks / personal knowledge-base without relying on a server and/or without having to go through extra steps to get the data out.
The custom selectors on Electric Tables is pretty cool, too - kind of a web-scraping light for ad-hoc scraping.
All too often I find myself with a project that's not quite worth writing a scraper, but also worth building a Google Sheet around. Electric Tables seems like it could help those cases a lot.
Agreed, very cool concept. I've thought about being able to manually grab page contents into BrainTool notes but having a per-topic custom selector would be next level!
There was a project out of MIT CSAIL back in 2006 that did automated extraction of tabular data from web pages. e.g. product lists on a store site. It recognized pagination and looked for a sequence repeated DOM structures (and what varied in them) to identify the items. You might find it interesting:
"We propose that web sites can be similarly augmented with other sophisticated data-centric functionality, giving users new benefits over the existing Web." - gonna check this paper out!
I'm not on my computer so I couldn't check, but the bookmarklet opens an iframe right ? I worked on a similar project and unfortunately some websites doesn't allow that. What we end up doing was open it in another window if it was blocked. I could share the code if you're interested
This is great and is remarkably similar to a project that I have been working on :-) Instead of using a bookmarklet, I am extracting URLs from the Reading List feature of Safari. I realized hat I had collected over a thousand links in my reading list and it was getting difficult to manage this manually. One nice thing about working with the reading list is that it is shared between iPhones, iPads and Macs if they are all signed into the same Apple ID.
""" The server side scraping can also do some more heavy lifting - such as store the entire page contents in the database. This enables full text search, the ability to re-crawl URLs and more. """
For this aspect, inter-operation with the ArchiveBox (https://archivebox.io/) project would be ideal.
Some use cases that I'm already using it for even in the limited state:
* Making topic-focused lists of articles. e.g. researching a particular topic just grab a bunch of URLs and stick them in a table
* Real estate research - grabbing a bunch of locations and adding them to a table, but where price and image are auto-
grabbed (and adding notes)
* Making a list of gift ideas
* Making a running list of music I want to check out
These are mostly simple bookmarking use cases.
What I *really* want to be able to do is publish these lists (either as HTML or as JSON endpoints) and collaborate on them with others! But that requires building a server and login etc that all feels a bit beyond my coding skills.....
This is one of those really simple ideas that's really exciting - making me think of a lot of "what-ifs". Thank you for sharing.
I'd love for this level of functionality - but auto-sync to Google Sheets (my platform of choice for "more than a few rows that I might need to share") (or like I mentioned elsewhere, maybe Braintool, for further manipulation/browsing in Emacs/org-mode).
Maps support would be really cool to see the results in tabular form as well as where they are.
I also noticed it doesn't notice if you add the same site twice - so instead of editing an existing entry, it lets you create a second one (maybe both options are needed).
A browser extension has some key advantages - getting around some security issues like you mentioned, but you can also make the icon for the extension reflect when you've already stored data for a URL (Braintool, which I mentioned elsewhere, does this).
Would really like this to rate restaurants (for my own remembrance) I order from on Uber Eats, Doordash, etc. Alas, the bookmarklet doesn't work with my first port of call, Uber Eats, just yet. Will be keeping an eye on this.
To make it run locally, will need a small server so that it can be addressed at localhost:<port>
I'm thinking about forking it to my github and adding a simple js server. Thoughts?
Simply installing http-server (npm) globally then running it on the folder will properly boot the system. But, the codebase is hardwired internally for the glitch site - those would have to be re-orged at localhost:8080 - including the bookmarklet. But, sigh, once you do that, there are still some improperly loading iframes to chase.
Added on debugging: need to add the node apparatus to make the zip-latest.min.js file for edits to take full effect.
I built a dumber version of this to pipe this kind of data into air table. I wanted to track my reading queue and track extra metadata like who recommended it.
It would be cool to have a shared community repository of site adapters, in the spirit of adversarial interoperability [1]. It's probably the most tedious and boring part of such projects, once it's abstracted away it would be much more fun to experiment. This could also be useful for projects like Fraidycat [2] or RSS feed generators like Politepol [3], alternative UIs like Woob [4] etc
[0] https://github.com/geoffreylitt/wildcard
[1] https://www.eff.org/deeplinks/2019/10/adversarial-interopera...
[2] https://fraidyc.at
[3] https://github.com/taroved/pol
[4] https://woob.tech