

Safari Application Extensions
Overview of Extending your App with Safari App Extensions
A Content Blocker app extension customizes the way Safari and Safari View Controller handle your content. The extension can tailor your content by hiding elements, blocking loads, and stripping cookies from Safari requests. Your app extension provides content-blocking rules to tell Safari how to manipulate content.
Content-blocking rules are created in a structured format ahead-of-time, declaratively, rather than running extension-provided code at the moment a decision about blocking needs to be made. WebKit compiles the ruleset into a bytecode format that it can process efficiently at runtime, reducing latency between when a page request is created and when it is dispatched over the network. Safari does not request undesired content. By avoiding unnecessary or unwanted downloads, Safari uses less memory and has better performance.
Safari on macOS and Safari on iOS use the same format for content-blocking rules, an array of JSON objects. Each rule contains a trigger dictionary and an action. The trigger specifies when a rule applies, and the action specifies what Safari should do when a match is found.
Begin creating your content-blocking rules by examining the web page resources with Web Inspector. After identifying the elements you want to block, create content-blocking rules that match only those target elements and choose the actions to perform.
Capabilities
- Customize web pages
- Block loading of resource of element
- Add toolbar buttons
- Display popovers
- Add items to context menus on web pages
Benefits
Built Using App Extension
- Developed using Xcode
- Run native code
Distributed with your app
- Sold through the App Store
- Same Version as your app
Type
- Content Blockers
- Page modification and communication with native code
- Extending Safari’s UI
Why are content blockers needed?
Apps will tell safari the content they want to block ahead of time instead of safari consulting with the app during the actual loading process. This model is fast and efficient because it doesn’t have to consult with the app during loading, and the content blockers are compiled into byte code that can be evaluated very efficient.
Content blockers identify the subset of content or resources on a page doesn’t show or even load.
Using a Content Blocker extension, you provide Safari with content-blocking rules that specify how Safari treats content such as images, scripts, and pop-up windows.
There are two main ways to block the using a content blocker:
1) Hide element on a page
2) Block resource from loading altogether
What content blocker can do?
1. Hide element
Each content blocking is JavaScript Object Notation (JSON).
Object content action and trigger dictionaries: The “action” dictionary contains a “type” key with the value “block”, and the “trigger” dictionary contains a “url-filter” key with the value.
For example: "action": { "type": "css-display-none", "selector": "#links" }
We define a tag place and trigger dictionary user for that
"trigger” : { “if-domain”: [“bigbearsgolfblog.com”], “selector” : “.*” }
now,
{ "action": { "type": "css-display-none", "selector": "#links" }, "trigger": { "if-domain": [ "bigbearsgolfblog.com" ], "selector": ".*" }}
Action -> type “css-display-none” is a described as hiding an element and Action -> selector is list of pages or page where we apply an action.
In trigger “if-domain” we specify which domain we want the style to apply to and which resource we want to apply to when loaded.
2. Block a load
For example: "action": { "type": "block" }
Action type is “block”, which means block a load any resource matching the corresponding trigger.
"trigger”: { “url-filter”: [“tracking_script”], “resource-type”: [“script”], “load-type”: [“third-party”] }
1) URL-filter: It is a regular expression that will be checked against the current site’s URL. match any URL’s.
2) resource-type (array of strings, optional): We block the loading script.
3) Load-type: It is an array of strings.
There are two types namely:
- “First-party” (a load is considered as first party when it comes from scheme, domain, and port is the main resource of the page or applies to things loaded from the current site)
- “third-party” (applies to things loaded anywhere but the current site).
4) “URL-filter-is-case-sensitive” (boolean, optional): It changes the “url-filter” case-sensitivity.
5) “if-domain”/”unless-domain” (array of strings, optional): matches the domain of the document.
How to do content blockers on iOS?
Management settings in your app
– API in the SafariServices Framework
- SFContentBlockerManager.reloadContentBlockerWithIdentifie ( identifier: String, completionHandler: ((NSError?) -> Void)? )
Bring Blocking on OS X
- Brought the same model to the Max.
- Faster and more memory efficient.
- canLoad has been deprecated.
Step1: Create Project -> add extension (content blocker) -> run the project -> go to setting -> safari -> content blocker -> enable the option
Step2: Write down in json file
[ { "action": { "type": "css-display-none", "selector" : "div.footer-holder" }, "trigger": { "url-filter": ".*" } } ]

Step3: Once again time go to setting -> safari -> content blocker -> disable the option -> enable the option and reload the safari browser.
Use cases:
1) We can create our own Ad. Blocker application.
2) We can manage children content control using content blocker.
3) Manage safari content violation using own blocker application.
4) Manipulate/Inject Some Styles to Webpage using own application.
Related Blogs



Categories
Related Case Studies






Services
Solutions
Products
Resources
