How do I implement the Safari mobile extension?

Quick walkthrough for adding our safari mobile extension to your current iOS app.

Overview

This will be a brief walkthrough for importing our iOS Safari Extension into an existing iOS App. We will provide you with a complete Xcode project that includes a temporary host app and the Safari Extension App. Which can be used for testing without requiring the extension to be added into your project and for adding the extension into your existing Xcode project.

 

Add a new target in the destination project

We will start by opening up your existing Xcode project and create a new Target.                          File > New>Target...

Select "Safari Extension" from the list of iOS targets.

Name your new target, this can follow your conventions and be anything.

 

Remove the template files

Next, we will remove most of the new files created and replace them with the ones from the extension project.

 

Add the extension files to your project

From the source project, select the following Files/Directories:

  • SafariWebExtensionHandler.swift
  • /assets
  • background.js
  • content.js
  • manifest.json
  • oauth.html
  • oauth.js
  • popup.html
  • popup.js
Drag and drop these into the directory for your Extension in the destination project.

 

 

 

 

 

In the next window, be sure to select the following options:

  • Copy items if needed
  • Create folder references
  • Select only the extension in the targets list.

Finally, we need to copy the info.plist over for the extension.

Use the same options as before, except don't add the file to any targets.

 

Configurations

There are a few configuration settings the host app can send over to the extension to change behavior and help manage user attribution. These are sent to the JavaScript side of the extension by the Native Extension app. Found within SafariWebExtensionHandler.swift.

1. GET_USER_ID(Required) is a unique identifier created by the host app, used to identify which one of your users is using the extension.

2. GET_LAST_LINK_TIMESTAMP(Optional) is used if you are presenting your own affiliate links within the host app, setting this to the current time will prevent the extension from presenting an EMA on the next loaded website.

3. IS_EXTENSION_ENABLED(Required) is a boolean used to enable or disable the extension, this must be set to true for the user to make use of the extension.

4. IS_COUPON_ENABLED(Required) is a boolean used to enable or disable the Couponator functionality, this must be set to true for the user to be presented with available coupons on eligible checkout pages.

5. GET_SPLIT_AMOUNT(Required) is used to control the visuals for how much the end user can earn on a transaction. This is a float that can be between 0 and 1. 

1 = 100% of earnings go to the user.

.5 = 50% of earnings go to the user.

.3 = 30% of earnings go to the user.

These values can either be hard-coded into SafariWebExtensionHandler.swift or set using an app group shared by the extension and the host app.

Success

You have successfully added the extension into your app. It will automatically be installed when the project is run on either the simulator or a physical device.

 

Note:Extensions must be enabled in Safari before Safari will allow them to launch. This is done by selecting 'Manage Extensions' from the pop-up menu within safari.