If you want to see your list simply copy the code below and paste it into your browser’s console. Make sure you have https://soundcloud.com/you/following opened and scroll all the way to the bottom of your list. Otherwise, stick around for a quick breakdown.
A Quick Breakdown:
We start by identifying which data we want to extract from the page. When we open https://soundcloud.com/you/following we see a grid of thumbnails, each representing a different artist. That’s a good starting point – with a little help from CSSViewer we can quickly identify that objects we need will have the class ‘genericBadge__usernameHeading’.
Once we have the className of the objects we want to work with we can easily load them into an array-like object called an HTML Collection by selecting them with document.getElementsByClassName. Since an HTML Collection is not an array but rather an array-like object we will not have the ability to use Array methods (such as Array.protoype.forEach). However, we can use a simple for-loop to iterate over the collection.
In this case, our HTML Collection contains links to each artist’s profile. We will be reading each link’s href property and extracting our artist’s names from the url.
Now that we have an array of usernames all we have to do is display them. For my purposes the format needed to be one name per line without commas. Let’s write the contents of the usernames array as an html document in the current window:
And that’s pretty much it. In another context I would do some refactoring but the way SoundCloud protects against injected scripts makes the verbosity necessary.