WebClip

Name of Application: WebClip
Icon of Application:
image

Application Homepage: WebClip - Clip all the things - Chrome Web Store
Report issues at: Issues · codecentric/web-clip · GitHub

Description:

Store all the interesting things around the Web on your personal online datastore
WebClip not only allows you to bookmark your favorite web pages, but to store all the interesting things you find on the Web - like recipes, fashion, products, games, and much more - in a structured way to your personal online data store based on Solid web standards.

Connect your Solid Pod and start collecting interesting things found across the world wide web.

Author Name: Angelo Veltens & Edward Byne
Author Homepage: https://angelo.veltens.org
Author Contact: https://angelo.veltens.org/#/contact

Open Source (yes/no): yes
License (if open source): MIT
Code Repository: GitHub - codecentric/web-clip: A Chrome extension to extract structured data from any web page and store it to a Solid Pod.

Additional Screenshots:

image

image

2 Likes

This is great, I’m sure it’ll be super useful :D. I have given it a try and I’ve seen a couple of issues.

First, when I logged in to my Solid POD it asked me to approve an app running on the url of the website I wanted to clip, instead of a url for the extension which is what I would expect. I guess this is a bug, right? If it isn’t, it would be very cumbersome having to authorize every website I want to clip.

The other issue I had is that when I tried to clip the website, I got a “400 (Bad Request) on PATCH” error. Looking at the network, it seems like the request is using invalid syntax for some reason:

Patch document syntax error: Line 1 of <https://noeldemartin.solidcommunity.net/webclip/2021/10/11/73bdf7c7-babe-429b-bba2-042112a7a987>: Bad syntax:
   Unknown syntax at start of statememt: '[object Object]'
   at: "[object Object]"

In case it’s useful, this is the website I tried to clip (I expected this to add a Recipe to my POD): Simple Homemade Chicken Ramen - Fork Knife Swoon

I also noticed that this website has a lot of Semantic Data, and I only care about the recipe. But the extension doesn’t seem to give me a choice and tries to add everything.

1 Like

Thanks, I hope so!

Kinda… I do not want this, but it is the only solution I found so far to log in via a chrome extension. If you can tell me how I can do the auth flow using the extension url I am super grateful.

I can confirm it for this one and opened an issue 400 on Patch when clippling https://www.forkknifeswoon.com/simple-homemade-chicken-ramen/ · Issue #7 · codecentric/web-clip · GitHub Please report any site that does not work. The data out there is very diverse and error prone and we need to harden the processing.

The more the merrier :smiley: We wanted to keep it simple for now, but more control over what exactly to clip is on the roadmap (aka in my head for now)

1 Like

I haven’t looked into this myself, but I guess you could technically set up a website that acts as a mediator for clipping and that’s the app I would authorize? The drawback is of course that it’s no longer “just” a browser extension.

I’ll let you know if anything else comes to mind, I think using browser extensions for doing things with Solid is very interesting.

Congratulations, @aveltens, and your teammate, for creating WebClip! I added it to my Chrome extensions, and it’s super fun and resourceful to use! If you ever want to showcase this during a Solid World, feel free to apply here!!

I look forward to using this application more. :smiley:

Thanks,

Marrelle B.

1 Like

Thanks @Marrelleb we will apply eventually, but want to add some more features before that!

1 Like

Sounds good!

With a fixed rdflib it works, at least on CSS. NSS seams not be capable of handling SPARQL Insert with > 10000 statements (which brings us back to letting the user decide what to clip)

Really cool to see so much data on a site! :slight_smile:

PS: We really need that recipe-pane on SolidOS :wink: I am getting hungry

1 Like

WebClip 0.6.0 improves login :sunglasses:

I am glad to announce a big improvement in the authentication flow in WebClip 0.6.0 :tada:

From now on you log in and authorize the extension once. No need to re-do it on every page you clip! That was one of the issues @NoelDeMartin pointed out.

The onboarding / intial setup has still much potential to improve, which holds us back from incrementing to a version 1.0 yet, but we keep working on that to make WebClip easy and fun to use!

Please try out the new version and tell us what you think about it. :bulb: We value your feedback a lot, and use it to prioritize our work.

:arrow_right: Get the latest version on Chrome Web Store.

1 Like

I am trying to use your extension, but stifled by the following issues:

  1. Idp options – I have no idea what Idp login credentials are to be associated with
  2. WebID-TLS option fails

In both cases, authentication failures don’t produce error messages at all.

What am I doing wrong? Is the underlying application architecture documented somewhere?

Hi @kidehen thanks for testing out, let’s see…

  1. I am not sure I am getting the question. You can change your Identity Provider on the extension options page. Is that what you are looking for?

  2. As far as I know WebID-TLS is not supported by the current Solid Standards anymore (unfortunately). We are using inrupts solid-client-authn-js library (with some modifications for chrome extensions) and this only supports current Solid-OIDC standards with DPoP.

We tested with solidcommunity.net (NSS) and solidweb.me (CSS) and locally running instances of both Solid Servers and both should work. We know there are currently issues with ESS which we are going to fix.

Better error handling is also on the list for reaching v1.0 (workarround for now is looking at the developer console of the extension background page)

We do not have architecture documentation yet, but the app is not that large and completely open source, so feel free to take a look at it.

Let me know if this helps you to get the extension running

I think I was facing the same issue as @kidehen, because this is all I could see opening the extension:

image

After some tinkering, I found that I could open the options page by right-clicking on the extension. It wasn’t immediately obvious to find, maybe you could add a settings icon in the corner or something.

After logging in, I only see this in websites and I’m not sure how to log out. Maybe it’s because I tried with a POD running on localhost?

image

And after a while I see this, but clicking on “Clip it!” only makes it show “Saving…” but doesn’t seem to do anything.

image

So I tried uninstalling and installing again, to see if that clears my session and I can log in with another provider that is not localhost. But now it doesn’t open at all, and visiting the options page I get the following error in the console:

image

It wasn’t immediately obvious to find, maybe you could add a settings icon in the corner or something.

Yes, the onboarding UX has to be improved a lot and this is one of the next issues we address. We focussed on the login first, because if we could not have gotten this better, it would have been a show stopper.

After logging in, I only see this in websites and I’m not sure how to log out. Maybe it’s because I tried with a POD running on localhost?

Pods running on localhost work in general, but I guess you tried with a out-of-the-box CSS, where the profile is totally empty. WebClip relies on having a http://www.w3.org/ns/pim/space#storage in your profile, to find a location to store the data. But there should be an error message indicating that, I have to look whether it got lost in the lastest refactorings somehow.

So I tried uninstalling and installing again, to see if that clears my session

Logout is another missing thing, but currently not that high prioritized compared to the other stuff. Note that whenever you change your IdP in the settings you log out implicitly

But now it doesn’t open at all, and visiting the options page I get the following error in the console:

Ok, I somehow put an h2 into a p, I will fix that. But this should not affect the functionality at all. Can you give me a log output of the background page, I think if anything goes seriously wrong it would show up there. Which page are you on / are you trying to clip? If it is not an https page this might also be an issue.

Yes I was using an out-of-the-box CSS, but now I tried with solidcommunity.net and I’m getting the same results. I’m not sure what I’m doing wrong.

Ok I tried that and I think I logged in with solidcommunity.net. I say “I think” because I’m still seeing Anonymous, so I can’t find any indication to what account I’m logged in with. Related to this, I introduced the password incorrectly at first and instead of seeing the error page in solidcommunity.net, nothing happened. So I had to open the extension and log in again, but it gave me the impression that it worked.

I’m not seeing anything in the console, and I tried different sites so I’m not sure it has anything to do with the page itself. I always get the same thing: I open the extension which stays “Loading…” for a while, then I press on “Clip it!” and it’s stuck “Saving…”. Then if I close and open the extension again, I see this error:

image

I also noticed that I’m getting this, but this happens before I even open the extension when the page is loaded, so I’m not sure if it’s related:

Hmm, accounts on solidcommunity.net usually have a name, so it should not say Anonymous when you are logged in there. I will try to reproduce it by also providing a wrong password.

Did you check the extension background script logs?

And did you set the trusted app as described on the options page?

image

Thanks a lot for all your testing and reporting!

1 Like

Ok, I managed to get it working now :D.

I hadn’t read that part about adding chrome-extension://mfgjcggbpdkbnnpgllaicoeplfgkfnkj to trusted apps, so that was probably the issue. It had been added as https://mfgjcggbpdkbnnpgllaicoeplfgkfnkj.chromiumapp.org so I was assuming that was working.

About the background script, I thought you were referring to the console in the website I was trying to clip. Looking at the extension settings I didn’t find it either, but then I noticed that you have the developer mode enabled and then I could see it.

Clipping works now, but I’m getting an error in the background script anyways. So I’ll share it in case it’s useful for you to know:

A couple more improvements I came up with:

  • It doesn’t seem to work in an empty tab (before visiting a url). I expected it to at least show a message.
  • This one is tricky, but it doesn’t seem to register anything in the type index. So if for example I clip a recipe, then recipe managers won’t know that it is there. It really would be nice if this was something pods do automatically :sweat_smile:.
1 Like

Ah, I am glad to hear you got it working. In know it is very counter intuitive to have to add this manually and it is only a interim solution.

I’m very sorry you had to go to so much struggles. I knew I have to work on onboarding UX and error handling, but I would not have guessed that it is that hard even for experienced Solid Users / developers, so your feedback is very valuable to me.

I will take a look at the errors you posted. At least 404 is expected, since the resource does not exist yet, this is normal behaviour of the underlying rdflib.

  • It doesn’t seem to work in an empty tab (before visiting a url). I expected it to at least show a message.

This is expected, but showing a message is due indeed. Same for http only resources.

This one is tricky, but it doesn’t seem to register anything in the type index.

Yep, this is missing still. We did not implement it, because type index was not standardised. (I think it is now) I will take a look at this after the more pressing issues are addressed.

1 Like

WebClip 0.9.0 guides through initial setup :world_map:

The new version heavily improves the onboarding of new users. You are directly guided to the options page on first use, where you can connect your pod.

WebClip, before first use, with a "Getting started" button

It is no longer needed to manually add a trusted app, instead you can grant permissions with a single click:

Be aware that when using CSS (e.g. on https://solidweb.me) you still need to add a storage to your profile manually, otherwise WebClip does not know where to store your clip. Choosing a storage during initial setup is something I am having in mind for the upcoming versions. What do you think?

:bulb: Please try out the new version and tell us what you think about it, either on this forum or in our discussion section. We value your feedback a lot, and use it to prioritize our work.

:arrow_right: Get the latest version on Chrome Web Store.

1 Like

WebClip 0.10.0 allows you to choose a storage location

This is especially helpful on CSS, where profiles have no associated storage by default. But also for anybody else, who wants to customize the default location.

It is also easier to see with which identity you are signed in:

image

:bulb: Please try out the new version and tell us what you think about it, either on this forum or in our discussion section. We value your feedback a lot, and use it to prioritize our work.

:arrow_right: Get the latest version on Chrome Web Store.

1 Like