Where is Content Blocker Extensions documentation?

iOS or OS X? There's a template for iOS but there's 0 documentation. They have a session on friday but that doesnt mean there should be no documentation. +1 on question.

+1 as well -- at least a spec for the JSON format is needed.

Something is definitely missing on this one.

There's no difference. 🙂

A Safari engineer told me to wait for the session on Friday. Hope for a more complete documentation soon anyway.

https://twitter.com/rmondello/status/608920825190727683

Steps so far:

1) Create Project with for example iOS/Application/SingleViewApplication

2) Add Target iOS / Application Extensions / Content Blocker Extension

3) Edit blockerList.json

sample:

[
  {
    "trigger": {
      "url-filter": "www.domain.com/file.png"
    },
    "action": {
      "type": "block"
    }
  },{
    "trigger": {
      "url-filter": "www.domain2.com/file2.png"
    },
    "action": {
      "type": "block"
    }
  }
]

4) Install app

5) change Safari Settings and enable new extension

6) use Safari Browser

=> result for me is currently, that the listed images are blocked, but not js files. The images are then not displayed on the website and on the loaded resources area in the Safari Web Inspector, if the device is monitored through the desktop Safari.

So according to an engineer (https://twitter.com/awfulben/status/609228379699580929), code here (https://developer.apple.com/library/prerelease/ios/releasenotes/General/WhatsNewInSafari/Articles/Safari_9.html) is all we need to know. You can't change tags values or inject CSS/JS. If we want more, we should send radars.

Hey guys,

I did some researching and the json you provide is as you would understand the rules, but what's not clear is the selector. However, here's what I found out; the selector is a simple javascript selector.

Here are some examples:

"selector": "div[id=foo]" // matches <div id="foo">
"selector": "div[id*=bar]" // matches <div id="foobar"> since the * marks the query as 'contains bar'
"selector": "[class=foo],[class=bar]" // matches <div class="foo"> _OR_ <h1 class="bar">, see? it matches on every element
"selector": "[id=foo][class=bar]" // whereas this would match <* id="foo" class="bar">
"selector": "div[id^=foo]" // matches  <div id="foo"> but not <div id="barfoo">, ^ means 'starts with'

I hope this will help you guys.

Look up the w3 selectors reference for more examples!

I'm trying to block a external javascript..

This should be okay according to the session I've watched.

When I look in the webinspector the external javascript is still loaded and visible in the inspector.

Any ideas?

[
    {
        "action": {
            "type": "block"
        },
        "trigger": {
            "url-filter": "beacon",
            "resource-type": ["scripts"],
            "load-type": ["third-party"]
        }
    }
]

Yes, it should be "script" not "scripts". Here's the correct json:

[ 
    { 
        "action": { 
            "type": "block" 
        }, 
        "trigger": { 
            "url-filter": "beacon", 
            "resource-type": ["script"], 
            "load-type": ["third-party"] 
        } 
    } 
]

Thanks for spotting this small error. Errased all content from simulator and build again..

But makes no difference..

Are you sure you enabled the content blocker in settings?

When changing the blocking query (the json) you need to manually re-compile that extension, and that is achieved by first compile the project as usual and then toggling the content blocker switch in settings.

This is not the official documentation but this is all you need to get going: https://www.webkit.org/blog/3476/content-blockers-first-look/

Yes, I did those steps.. I watched the WWDC Session on Block Content Extensions

I did exactly the same as those guys on stage. But can not reproduce the same results...

Did you successfully block some third party scripts, or is it just me?

I spent a lot of time trying to make it work (after seeing the session, reading and re-reading the blog post several times, etc.), here's what finally did it for me:

1. Ran the app containing the extension (it was just a blank iOS app template).
2. Ran the extension
3. Stopped the extension in Xcode
4. Went into Safari Content Blocker settings and toggled the extension on/off
5. Back to Safari, reloaded the page. Works!

So far I verified that image blocking with url-filer and if-domain matching works, have yet to try more complex rules.

Does not look like you can currently debug the extension in Xcode or see log output 😟