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

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:

1. “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)
2. “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": ".*"
        }
    }
]

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.