Today I open Facebook, and I notice something, my adblocker isn’t working.
As a developer, I decided to investigate, and first thing first I inspect the structure of these sponsored posts, to see if there’s a way to identify them so I can remove them with a script.
The structure looks pretty simple, we have an element with role “article”, that contains a div with a class starting with “feed_subtitle” (and data-testid “story-subtitle”, very useful, thanks for automated tests Facebook), and inside this last div, something like a bazillion of spans with random words.
Dude, seriously, WTF?
They are using a trick to display the word “Sponsored”: some of the spans are visible, some aren’t.
And to make things simpler… sometimes the parent is visible but the child isn’t, and vice-versa.
Time to start constructing a script to get rid of this useless stuff.
I left the subtitle div selected in the chrome inspector, and run in the console
Well, this was kind of expected, we need a function to find what is the real text if we want to remove these ads.
To do this, we need a recursive function; the function will obtain a list of the children of the element, and remove the ones that are hidden:
Then, with these visible children, we obtain the children that are visible inside them.
But we have a problem if we get recursively the children of the elements. The ones at the end (the leaves) will not have any children, and we will end up with an empty array.
We need to stop when we reach an element without children and return what we are interested in, the text content.
Perfect! Now we have everything for our recursive function, the recursion cycle and the stop condition, let’s merge all the pieces.
Time to try the function on the selected element:
Perfect! It works!
Now, we need to have a function that says simply “yes” or “no” when we ask if that is the subTitle of a sponsored post.
And just for security, that it works even when the subtitle is missing.
Now that we have a way to know when is sponsored, we just need to obtain all the sponsored posts on the page.
Let’s start with the easy bits, let’s get all the posts, and keep only the ones that are sponsored
Now we need a function to know if the post is sponsored, we already have a function that knows if a subTitle is the one of a sponsored post, all we need is to pass the subTitle of the post to that function
All the pieces are coming together!
Now we need a function to remove these articles.
Let’s try it!