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@initialState
That’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
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)
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!~