Building iOS Content Blockers

Introduction to content blocking extensions in iOS 9.

https://webkit.org/blog/3476/content-blockers-first-look
https://gist.github.com/mackuba/e81558926e9a09f06e58

1. Building(iOS(Content(Blockers Kuba%Suder @kuba_suder+•+h.ps:/ /mackuba.eu
3. Why$write$content$blockers? • sanity((hide(ads,(popups) • performance((loading(speed,(mobile(data(plan) • privacy((trackers(spying(on(you(via(cookies) • !((Crystal(<>($100K+)
4. How$to$build$a$content$blocker
5. Start%here: h"ps:/ /webkit.org/blog/3476/content8 blockers8first8look
6. How$to$build$a$content$blocker$app 1. Create(a(new(app. 2. Add(a("Content(Blocker(Extension"(target. 3. Provide(a(JSON(file(with(filter(definiCons. 4. Submit(to(the(App(Store. 5. ... 6. Get(rejected(!((at(least(I(did)
7. Rules&of&the&game 1. Can&block&resources&or&cookies 2. Can&hide&elements&with&CSS 3. Cannot&see&accessed&URLs&(good&for&user,&bad&for&you) 4. Can&be&updated&or&dynamically&generated 5. Runs&inside&Safari&process&(extension) 6. User&can&turn&it&on/off&I&disabled,by,default
8. Filter'format [ { "trigger": { ... }, "action": { ... } }, { "trigger": { ... }, "action": { ... } }, ... ]
9. Blocking)resources { "trigger": { "url-filter": "banner.*", "resource-type": ["image"], "if-domain": ["gazeta.pl"] }, "action": { "type": "block" } }
10. Blocking)elements { "trigger": { "url-filter": ".*", "if-domain": ["onet.pl"] }, "action": { "type": "css-display-none", "selector": "#banner, .cookie, div[title=Sport]" } }
11. Pro$%ps
12. Tips%#1:%Reloading%during%development • switch(it(off(&(on(in(Se/ngs • remember,(it's(off(by(default! • be=er: SFContentBlockerManager. reloadContentBlockerWithIdentifier(id) (from(SafariServices) • put(it(in( application:didFinishLaunchingWithOptions:
13. Tips%#2:%Debugging • use%Safari%inspector%to%find%things%to%block • launch%from%the%desktop%Safari,%Develop%menu • logs%from%the%extension%can%only%be%seen%in%the%system%log • for%device:%Xcode's%Devices%window • for%simulator:%find%the%right%system.log
14. Tips%#3:%Communica0ng%with%the%app • extension)and)main)app)don't)run)in)the)same)process • create)an)App)Group • shared)user)defaults)container • shared)folder)for)exchanging)files
15. Tips%#4:%UI • explain)what)the)app)does • show)how)to)enable)it)(with)screenshots) • beware)of)copyright)issues)9>)don't)use)screenshots)of)real)sites
16. Tips%#5:%Collec.ng%data • you%can%only%collect%new%URLs%if%users%submit%them%to%you • use%a%share%extension • NSExtensionJavaScriptPreprocessingFile%to%get%page% URL/;tle
17. Demo%&me !
18. More%&ps%here: h"ps:/ /gist.github.com/mackuba/ e81558926e9a09f06e58