In order to do the excercise, you'll need the following:
- A clean browser (I'd recommend using Chrome Canary)
- AdGuard browser extension
- Disable all filters in the extension settings: https://uploads.adguard.com/up04_e711a_AdGuard_Settings.png
- Learn how to use Chrome developer tools: https://developers.google.com/web/tools/chrome-devtools/
- Additionally, you might want to enable third-party badges indication there
- Learn how to use AdGuard's filtering log: https://uploads.adguard.com/up04_tb1up_Monosnap.png
You'll need to know how to create basic filtering rules:
- https://adblockplus.org/filter-cheatsheet#blocking
- https://adblockplus.org/filter-cheatsheet#blocking2
- https://adblockplus.org/filter-cheatsheet#blocking3
- https://adblockplus.org/filter-cheatsheet#options
You'll need to learn CSS basics, CSS selects specifically: https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors
This knowledge is crucial for creating "element hiding" rules:
Full documentation on the filtering rules syntax:
You'll be given a set of test pages. Here's what you need to block on these pages:
- Ads (block ad networks, hide ad placeholders). Definition.
- Analytics (discover & block third-party analytics). Definition.
- Social widgets. Definition.
Please pay attention to the website functionality. You must not break it in any way.
The final result of the test is a text file divided into sections like in the example:
!
! Test page 1: https://example.org/
!
! Ads
||adverising.org^$third-party
###banner
! Analytics
||tracker.org^$third-party
! Social widgets
||social-widgets.org^
!
! Test page 2: https://example.com/
!
....