Simple web scraping in the browser

May 30, 2017 - javascript

I am sure you have seen people (or even yourself) copying and pasting some data from the web, however with a little bit of “hacker” skills you will be able to do this much faster.

Want a simple example?

You visit a playlist on YouTube and you would like to copy all titles of the videos. Doing copy and paste 20+ times doesn’t seem inviting, so you open your Dev Tools by right-clicking the Title of the video and selecting Inspect in Chrome or Inspect Element in Firefox.

You can observe the link (element a) has a class .pl-video-title-link, so let’s use use it to access the nodes that hold the title. Go to the console tab and enter:


We get array of results.

Now we need to extract the title. We do it by iterating through array of results:
$$('.pl-video-title-link').forEach( title => console.log(title.innerText));

Great, now we have the list available. Copy and paste it anywhere you like.