A browser extension for liking and commenting on websites

1

I’ve had an idea in my head for many years about a browser extension for liking and commenting on web pages. There are extensions that already exist but I think they could be improved using Solid as it would be open source and users can store their own likes and comments. Here is one example…
https://chrome.google.com/webstore/detail/common-·-comment-on-any-w/pdjjlgfdgbbppcjioaijkeahioaocoep

I also knocked up a design for something similar which you can see here:

The above demo allows people to like, dislike, flag and comment. It will also allow you to view the authors profile and add them as a friend. The crypto stuff can be implemented at a later date.

Would someone be interested in working on a project like this? Surely this would be a great use case for Solid?

I would do it myself but the documentation for manipulating pod data is sparse. For example, I looked at the docs for LDFlex but they are focused on nodejs and there is still no clear examples of how to write specific information to a pod. You can see here: GitHub - LDflex/Query-Solid: Simple access to data in Solid pods through LDflex expressions

It would be really, really great if someone could improve the docs for people like myself who don’t have a lot of free time and programming experience, and don’t want to use nodejs.

2 Likes
2

I think everything is the same for the browser except for the import of the library. I haven’t used it, but I’ve seen many other libraries which have common behaviour for node and browser, so I guess it is the same here.

And it would definitely be a cool project, but I’m currently short on time so I can’t collaborate with you :confused:

1 Like
4

Perhaps there is something really obvious that i’m missing but the examples don’t work in the browser. So…

solid.data.user can query data about the currently logged in user. So if i do something like this when i’m logged in…

console.log(solid.data.user.firstName);

…I would expect to get my first name. However, it returns an object which I can’t do anything with.

I’ve tried with the url entry point, e.g…
console.log(solid.data['https://devolution.inrupt.net/profile/#me'].firstName);

…which yields the same object. What am i doing wrong?

5

While it seems like a normal object, it actually does fetching of the resource in the background, so it returns a Promise which will resolve after some time.

As demonstrated in the node and browser example, you could use async-await to handle it:

document.addEventListener('DOMContentLoaded', async () => {
  const user = solid.data.user;
  alert(`Welcome, ${await user.firstName}!`);
});

The await here means “wait until the promise is resolved and then continue”. Note that it can only be used when the function is declared with the async keyword (which leads to the function also returning a promise).

Promises and async-await are pretty common in javascript, so you should find plenty of documentation about it :slight_smile:

1 Like
6

Thanks. I tried that example initially. However, when i use await I get an error message “Uncaught (in promise) Error” - N3Parser.js:797 . Any ideas about this?

EDIT: I found something here: https://github.com/solid/query-ldflex/issues/23. It seems like an issue with accessing data from localhost.

7

That means there’s an error at line 797 in N3Parser.js as you probably realise, so understanding what that error is will be the next step. Usually that will also appear in the console but you haven’t included that so I can’t add any more.

The ‘uncaught in promise’ is a secondary error because the code should always include a catch to avoid throwing an error when returning a Promise. But that is not your problem, the problem is in N3Parser.js

8

Yes, I also think this could be useful.

Some might find this browser extension I prototyped a couple years ago useful as a starting point. https://github.com/gobengo/web-annotation-extension
The goal was to facilitate not just comments on a whole page, but also annotations on specific parts of the page, then let the user send them to a server of their choice using the Web Annotation Protocol. The Web Annotation Protocol also uses JSON-LD and LDP, so I believe that should mean it wouldn’t be too hard to also have the annotation support sending to a Solid Pod URL.

I think it’s interesting just to have something like this working for personal notetaking and highlighting.

Beyond that, there is a use case for most comment systems to also be able to browse the comments of others. This requires at least a bit of aggregation in order to efficiently show everyone’s comments. Traditionally this needs to be done either by a server operated by the website operator (e.g. WordPress’ built in comments) or by a third party service that the site operator or end-user who browses comments chooses (and maybe advertises to user-agents like with Web Annotation Protocol Discovery.

To support this use case of browsing aggregated comments (not just posting to your own solid pod), a future version of this extension could support looking for an advertised Annotation container on any page, then browsing/reading comments it finds there. The user might want an affordance for choosing whether newly authored comments go to their personal solid store, the site operator’s annotation server, both, etc.

I was planning on having distbin (github gobengo distbin, I can’t add more links to this post) be a valid default place where this extension could store Annotations. Distbin is a public/anonymous ActivityPub outbox, so any annotations sent to there would theoretically support ActivityPub notifications for any other URIs that were ActivityPub cc’d. I’m not so familiar with if/how Solid has something similar to ActivityPub Delivery, but it’s all pretty similar and can work together, IMO. Distbin is open source, source code here

Hope these repos and thoughts are helpful to think through how to make something like this.

2 Likes