First, it’s all about CSS. Because there’s no unique ID, you need to somehow make a query that matches only the unwanted elements. You can test them in your browser’s developer tools using
document.querySelectorAll("...")
Sometimes, these elements have other attributes that uniquely identify them, like inline styles. You can match them using an attribute selector:
div[style="background: ..."]
Sometimes, these elements appear at a fixed point in the DOM tree, like in this case. Sometimes tricky to get right, but very easy here, because there’s always another (already blocked) ad preceding them:
div.ad_container + div[id*=-widget]
Maybe it’s the last element:
div:last-child
You can read more about CSS selectors at Mozilla Developer Network.
However, if done correctly, you can’t do anything without a script. I’ve already seen scripts that would create a tag with a random name (like <uaUZGI>
) at a random location in the DOM tree that would then somehow be made to appear at the desired location on-screen.
In addition to regular CSS, uBlock Origin also supports “procedural cosmetic filters”. They are a very powerful extension to regular CSS filters. You can, for example:
- Match (and thus hide) elements that contain certain text
- Match elements that have certain styles applied
- Match elements that contain elements matching a different selector
uBlock Origin may be used with custom filter to block Twitter's Ads, here are some documentation/links on how to achieve that
Link-1, link-2, link-3 and link-4... you may for instance try adding the following on the custom filter list of uBlock Origin
twitter.com##.trends.Trends.module
twitter.com##.dashboard-right.dashboard
twitter.com##.module.DashboardProfileCard
!twitter.com##article:has-text(/Promoted|Gesponsert|Реклама|Promocionado|Sponsorisé/):xpath(../..)
twitter.com##:xpath(//span[(text()='Promoted' or text()='Gesponsert' or text()='Реклама' or text()='Promocionado'or text()='Sponsorisé']/../../../../..)
twitter.com##[data-testid="trend"]:has-text(/Promoted|Gesponsert|Реклама|Promocionado|Sponsorisé/):xpath(..)
This list is provided as an example.
Best Answer
You can easily add Disqus in your filters.
You just add the following:
To add a filter, go to the uBlock Origin Options page and go to the My Filters tab. Over there you just add the lines you wanna block and click Apply Changes on top.