Skip to main content

uBlock origin

The best info filter!

Try to block early in the pipeline, from best to worst:

  1. Prevent request
    1. Block domain
    2. Block URL
  2. Remove part of response
  3. Change cosmetics

Block domain​

cnn.com

# implicitly converted to ||cnn.com^

Block URL​

https://news.un.org/zh/story/2019/05/1034202$all

Prevent request​

2 approaches: static filter and dynamic filter

  • Static filter

    • For entities that are meant to be blocked all the time
    • The standard way, same as other adblockers
    • Can further specify the partiness and entity type

  • Dynamic filter

    • For entities that are meant to be blocked most of the time
    • Easier to test and debug
    • Cannot sync/backup with an URL (can sync with uBlock origin server)

Static filter​

Address part​

This part specifies the server url that hosts the resources

  • Wildcard: *

    • * is added to the start and the end of the address by default

  • Exception rule: @@

  • Start of domain: ||

  • Selecting all subdirectories: ^

    • Address can end here
    • Can only be followed by character like ? or /

  • Select exact URL: put the URL in a pair of |

Block option part​

This part is optional

  • To select asset types: $
  • Asset types:
    • script
    • xmlhttprequest
    • subdocument (frames)
    • stylesheet
    • image
    • domain= (originating domain)
  • Inverse: ~

Read more​

https://adblockplus.org/filter-cheatsheet

For a more detailed read: https://help.eyeo.com/en/adblockplus/how-to-write-filters

Dynamic filter​

  • Easy mode: selectively block requests (the best approach)
  • Medium mode: block 3rd-party scripts and frames by default. Need to unblock sites by whitelisting their 3rd party scripts
  • Hard mode: block all 3rd-party network requests by default

Browser pop-up tool​

Color meanings:

  • Red: block
  • Grey: exception

Reject response​

The purpose of HTML filters is to remove elements from a document before it is parsed by the browser.

<domain>##^<body>

  • Means removing the element from response html
  • Useful for blocking inline scripts and large complex elements
  • For Gecko-based browsers only
foo.example##^script:has-text(nuisanceCode)

The above filter means: for any web pages from the foo.example web site, remove all inline script tags which contains the string nuisanceCode.

https://github.com/gorhill/uBlock/wiki/Inline-script-tag-filtering

Example of inline nusance code​

Websites use inline scripts and styles to bypass adblockers

Example of inline paywall js
//  For the content locking
//
//
// When content lock template is shown...

tp.push([
    'addHandler',
    'showOffer',
    offerParams => {
        console.log('__PEXP offer', offerParams)

        if (offerParams.containerSelector == '.piano-content-lock') {
            // ...we add a gradient strip above our template container (it's name should correspond to a specified one in Composer)...
            document
                .querySelector('.piano-content-lock')
                .classList.add('template-shown')
            // ...and hide everything after it within the same HTML container (also, the name should be checked)
            document
                .querySelectorAll('.piano-content-lock ~ *')
                .forEach(function (x) {
                    x.hidden = true
                })

            // hide the Read More
            document.querySelector('.expand').remove()
            document.querySelector('.contract').remove()

            document.querySelector('.twitter-tweet').remove()

            // hide the comments section
            document.querySelector('#comment-policy').remove()
            document.querySelector('#comment-block').remove()

            // expand the content area to include the lock content
            var $btext = $('.bigtext')
            var currentMiniHeight = $btext.attr('data-miniheight')

            // increase content area height by 200 to accomodate the rendered height of the paywall offer
            $btext.css(
                'height',
                parseFloat(currentMiniHeight.slice(0, -2)) + 200 + 'px'
            )
        }
    },
])
Example of inline paywall style
// a simpler workaround is to override `overflow: hidden` to `overflow: visible`

<style type="text/css">
    .sponsored .page-headline,
    .sponsored .storyareawrapper p {
      font-family: georgia;
    }

    .bigtext {
      display: block;
      overflow: hidden;
      color: #787878;
    }

    .expand, .contract {
      cursor: pointer;
      font-weight: bold;
      padding: 15px 0;
      text-align: center;
      color: #b00021;
      font-size: 20px;
    }

    .expand:hover, .contract:hover {
      color: #555;
    }

    .hide {
      display: none;
    }
</style>

Change cosmetics​

  • To select elements inside iframe, need to write rules regarding the iframe domain
  • Strictly in the format <domain>##<body>
    • <domain> is optional, just the domain or subdomain
    • <body> consists of CSS selector followered by a pseudo selector

Pseudo selectors syntax: https://github.com/gorhill/uBlock/wiki/Procedural-cosmetic-filters

Hide elements​

  • Select the element default to hide it
  • Can hide popup, large media, iframe directly in browser popup tool
Examples
reddit.com##body a
baike789.com##.s-box ul:nth-child(2)
google.com##h3:has-text(Videos):upward(7)

Style elements​

Add something like :style(color:red !important;) to the element selector

reddit.com##body a:style(color:red !important;)

uBlock origin mechanism​

Rule list cache​

  • To purge all remote and local cache, press shift when clicking "Purge all caches" (keep local cache if shift is not pressed)
  • Default update every 5 days

Inspection order​

  1. Dynamic filters
  2. HTML filters
  3. Whitelist
  4. Url filter
  5. Static filter

Script injection​

About no-floc

FLoC is a user tracking mechanism by Google (Federated Learning of Cohorts). uBlock filters – Privacy list blocks it by default.