Are you familiar with the concept of a web clipper? It’s a way to clip things from pages you browse on the web on the fly.

When I watch YouTube I often find myself wanting to save the video I am watching to share it with others, perhaps I have found some interesting video clips that I want to review later, but I don’t want to bookmark them. No - bookmarking is usually for more important things and I sure as heck don’t want to open tabs upon tabs and keeping them open in the background because that gets messy and eats my laptop’s RAM.

So what can we do? How can I quickly store videos with a click, so that I can create a list that I can share with friends? Can PixieBrix help? ✨ YES!

Here’s where PixieBrix can become super useful: using our in-page state memory brick we can create a small database of videos that you’ve reviewed and show them on the sidebar.

Then you can copy paste onto a friend’s DM / Slack or anywhere else

Let’s get started!

Step 1. Context Menu

Like most of our tutorials we’re going to add the trigger brick to get everything started.

Navigate to YouTube.com and right click anywhere on the page, click inspect and bring up the PixieBrix Page Editor

Now on the left-hand side you want to hit the blue Add button and select Context Menu.

This is going to give us the ability to right-click anywhere on the page and invoke the PixieBrix context menu to then save the current video into memory. Cool right?

Next I am going to change the following configurations fields:

Name: “YouTube Append List” This will help us quickly find this mod
Title: “Append to quicklist” This is the name of the right-click PixieBrix menu

We’re not going to change the rest of the settings, the whole screen should look like the below one:

Step 2. Get shared page state brick

We’re now going to add a new block called “Get shared page state”

The page state is like a mini brain. Every time we use a website like YouTube, the state of the page will hold information that we can use in the mod.

The first and only thing we’re going to change in this brick is that we’re renaming the output key to initialState

This brick will allow us to figure out if there’s anything in the page state

Step 3. jq - JSON processor

This step is quite complicated, I am not going to lie:

We’re going to use jq to analyze whether or not there is anything saved in the variable @initialState. If there’s data in the variable we will append the new data to this one. However, if there is no data in this variable, we’re going to start a fresh array and add data for the first time to it.

The reason we’re doing this is that we don’t want to overwrite the state, but instead, we want to append to it.

The first I configured in this brick is the output variable: I called it @newstate

Next I went in the data section of the brick and I change the field type to Key:Values (see the blue icon that shows K:V).

I do that because I want to use multiple data points to this brick

My first one I called initialState and its value is @initialStateThat’s the output from the brick we set up before

The second property is called url and its value is @input.documentUrl This is the variable that holds the URL of the current video, and it comes directly from the context of the page acquired through the Context Menu brick (that’s why it’s @input)

Now to the tricky part

We’re setting the filter to (.initialState.videos // []) + [{ url:.url } ]

Let’s analyze what this does.

First of all it pulls the data from the variable .initialState.videos if there is no data we default it to an empty array using // [] Then we use the + sign to append to this array the object {url: .url}

Notice the dot in .url this means we’re using the property defined a moment ago when we set its value to be @input.documentUrl

ℹ️

You might ask. What’s .videos - where does it come from? It actually comes from the next step, but because we’re looking at the variable set during our navigation on YouTube, it might happen that we already have data set under initialState - specifically stored under the videos key - and therefore we need to check it now. Remember we want to “append” data if there’s already data - not overwrite the whole variable every time we run this mod. Tricky - I feel you there.

The whole thing should look like this

Step 4. Set shared page state brick

Now that we’ve wrangled with data and made sure that we don’t overwrite the state variable but instead append to it. Let’s set the page state to the variable.

Click the add a property blue button. We’re going to add a property called videos and give it the value of @newstate

This basically means that we’re storing the data that we had created in the previous brick (we called its output newstate) into an object whose key name is videos.

Optional Step - Add the Show Sidebar Brick

This step is optional - you can add the “Show Sidebar” brick to automatically show the sidebar on the side of YouTube every time you trigger the mod. I prefer to open it manually so I didn’t actually use this brick, but you can customize it like such, if you prefer it!

Step 5. Create a new mod - Sidebar panel

Let’s go ahead and add a new mod. This time we want to add the sidebar panel.

Once you added it - give it a name - I called it “My sidepanel” but you can name yours whatever you want.

Step 6. Add a new brick - Get Shared Page State

Search for this brick and add it to the mod.

The only thing I changed here is the fact that I renamed the Output key to @youtubedb

Step 7. Render Document

In this step I am adding the Render Document brick

Then I select the layout from the Preview Panel - on the right hand side of the Page Editor - I delete every item in there and add one H1 brick and a Block brick

In the H1 - I just put a title - for example Cool videos for later

In the Block brick, I choose Markdown (which is also the default brick that is given to you when you add a Block brick by the way)

This is what it should look like when you’ve cleaned up the sidebar

Inside this brick I want to specify the markdown

{% for video in @youtubedb.videos %}
 - {{video.url}}
{% endfor %}

What this code does is that it loops for every item in the data variable @youtube.videos and exposes the url key with {{video.url}}

If you save this mod and the previous one - you’re set!

Conclusion

This is a good start for a smart webclipper for YouTube.

You can go further and add a lot of cool features - here are some examples:

1) Add a timestamp for the exact moment that you’ve clipped

2) Add a comment with the video

3) You can also add the title of the video -

All this can be done by adding it to the page state, for example in step 3 you would add another key called title and then pass it the name of the video which can be found by parsing the HTML using the selector yt-formatted-string

Then using markdown magic you could format the list to look like this:

Sky is the limit!~

YouTube Sidebar Bookmarks Tutorial (8 minutes )