Adguard's ShadowRoot's customized ad blocking rules (Monica Search Enhanced Ads as an example)
Lazy loaded imageAdguard's ShadowRoot's customized ad blocking rules (Monica Search Enhanced Ads as an example)
Words 730Read Time 2 min
2024-12-18
2024-12-27
AI intelligent summary
GPT
The article discusses ad-blocking challenges in Monica's search enhancements, focusing on embedded ads with random class attributes. The authors used developer tools to analyze the issue and found that while part of the ad's class attribute is fixed, another part is randomized, making traditional ad-blocking methods ineffective. They proposed a solution involving a script segment to handle ShadowRoot cases for better ad interception.
Content overview
The article begins by describing the behavior of inserting promotional advertisements when searching for enhancements in Monica, and as a result the authors decided to perform ad blocking. Using the F12 developer tool, the authors found that the ad's dom element could not be accurately located because it took a random class. However, the authors noticed that the value of the class attribute of the div tags in the advertisement is characteristic, the value in front is fixed, and only the one after is randomized. Therefore, the authors decided to intercept it in other ways. For the ShadowRoot case, the authors used a solution in the form of a script segment.
Summary of key points
  1. Monica Search Enhancement When there was an insertion of promotional ads, the authors decided to adblock.
  1. pass (a bill or inspection etc) F12 Developer Tools , the authors found that the ad's dom element could not be accurately positioned because it took a random class.
  1. The value of the class attribute of the div tag in the advertisement is characterized, the front value is fixed and only the back one is a random value.
  1. be directed against ShadowRoot case, the authors used the script segment form to solve it.
 

📝 Main content

I. Status of Monica Embedded Ads

Monica searches for enhancements when there is an insertion promotional advertisement behavior, I decided to block it because I have other search-enhancing software below me that affects the display and many other reasons
Don't get hung up on why you're blocking, if you're hung up on that then why are you reading this article
notion image

II. Analysis of the problem

After opening the developer tools via F12, selecting the element reveals that the dom element of its advertisement cannot be accurately positioned and is A randomized class approach was taken
notion image

III. Solutions

1. Conventional wisdom

So it can only be intercepted in other ways, but it can be noted that the div tags in its ads of The class attribute value is characterized :: The first values are fixed, the second ones are random.
notion image
So we can write the following rule for their ads
🚫
div[class^="search-enhance-ads"]
🕵️‍♂️
interpretation of rules
<div> Within the element, select the element with the class attribute value in order to search-enhance-ads beginning (used form a nominal expression) <div> element with a mask (hide) operation.
consultation
But unfortunately, it doesn't work, because the Regular interception rules does not apply to ShadowRoot   internal element

2. Trouble with ShadowRoot

But for the ShadowRoot case, it has been taken into account to use the script segment to address the issue in the form of
consultation
🔑
Scripts used
descriptive : Removes an element inside an open shadow DOM element.
Grammar:
example.org#%#//scriptlet('remove-in-shadow-dom', selector[, baseSelector])
  • selector - indispensable The CSS selector for the element to be removed from shadow-dom.
  • baseSelector - selectable The selector for a page-specific DOM element. Zoom in on the part of the page DOM where the Shadow-dom host should be located. Defaults to document.documentElement
baseSelector should match elements in the page DOM, but not in the Shadow DOM.
Based on its invocation rules, we can write the following interception rules
🚫
#%#//scriptlet('remove-in-shadow-dom', 'div[class^="search-enhance-ads"]', '#monica-search-enhance')
🕵️‍♂️
interpretation of rules
invocations remove-in-shadow-dom script segment, the incoming parameters are div[class^="search-enhance-ads"] cap (a poem) #monica-search-enhance
  • div[class^="search-enhance-ads"] : the CSS selector of the element to be removed from the shadow-dom in the anterior vested with
  • #monica-search-enhance : In order to minimize the location of the Shadow-dom and improve performance, the parent node of the Shadow-dom has an ID of monica-search-enhance So it can be easily analyzed to get
    • notion image

📖 Extended reading

🤗 Summarize and summarize

  • Adblocking using webpage modification is not the best way, the most general and best way is still to carry out url interception. But how? Analyzing and intercepting data from browser extensions has yet to be learned So that's it for now.

📎 Reference article

primary reference
 
💡
acceptable become a member Telegram's Little Warehouse of Seven Rows | Internet Memories | Blogs  cap Seven lines Technical Exchange Group  Find more tips oh 🥰 and also discuss various issues in the chat group ❓
Welcome to the Bottom comment section. Share your thoughts and experiences with Let's discuss and improve together!
 

Comments
Loading...