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.

Success

You have successfully added the extension into your app. It will automatically be installed when the project is ran 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.