How I got rid of the new sponsored Facebook posts.

By Maurizio Carboni

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?

Facebook madness…

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!

It works!

Now it’s missing only one piece, remove these posts before I can see them.

There are for sure a lot of smart ways to do that, but I’m very lazy so I will simply use a function to observe all the new DOM elements added to the feed.
To do this I can use MutationObserver, this nice feature can execute a callback every time an element is added or removed from the subtree of a specific element.

When Facebook adds a new post, it is always an element with an id starting with “u_fetchstream”

I will break it down because can seems a little bit complex:

  • We are interested only in the mutation of type “childList” (children added or removed), and we want only the ones where some children are added.
  • Of these mutations, we are interested only on the nodes that are added, so I extract them out.
  • Of the nodes added, we are interested only in the posts ones.

Perfect, now we have a list of every post that is added to the page!

We just need to use the old functions to detect which ones of these posts are sponsored, and remove them. Time to see the final result: