Skip to content

Instantly share code, notes, and snippets.

@ameshkov
Last active September 27, 2018 08:51
Show Gist options
  • Save ameshkov/229eac17b7877616cc7afe369ee4c190 to your computer and use it in GitHub Desktop.
Save ameshkov/229eac17b7877616cc7afe369ee4c190 to your computer and use it in GitHub Desktop.
filters_dev_test.md

AdGuard filters dev test

Prerequisites

In order to do the excercise, you'll need the following:

  1. A clean browser (I'd recommend using Chrome Canary)
  2. AdGuard browser extension
  3. Disable all filters in the extension settings: https://uploads.adguard.com/up04_e711a_AdGuard_Settings.png
  4. Learn how to use Chrome developer tools: https://developers.google.com/web/tools/chrome-devtools/
  5. Additionally, you might want to enable third-party badges indication there
  6. Learn how to use AdGuard's filtering log: https://uploads.adguard.com/up04_tb1up_Monosnap.png

Basics

You'll need to know how to create basic filtering rules:

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:

What you need to do

You'll be given a set of test pages. Here's what you need to block on these pages:

  1. Ads (block ad networks, hide ad placeholders). Definition.
  2. Analytics (discover & block third-party analytics). Definition.
  3. 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/
!

....

Test pages

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment