This document discusses Safari app extensions for macOS. It provides a history of extensions in Safari and introduces Safari app extensions, which are bundled within macOS apps rather than distributed separately. Benefits of Safari app extensions include automatic updates through the Mac App Store and secure two-way communication between the extension and host app. The document also covers migrating existing extensions to the Safari app extension model and demonstrates communication between the extension and host app.

1. Safari App Extensions
Cleared up
Sanaa Squalli macOS Developer
@Dashlane
CocoaHeads October 2016
@sanaasqualli

2. @sanaasqualli
2010 2011 2012 2014
Safari 5
History
Extensions in Safari
JS CSS HTML
Safari Extension Gallery
Automatic Updates
Popover
Extension Menu
Windows
Safari 6 App Extensions
iOS & OS XOS X & Windows
New events
Share
Photo
Today
Custom Keyboard
Finder
Action

3. @sanaasqualli
App Extensions
Native code
Distributed within an app, not standalone
One loop Life Cycle
Safari Custom Action Extension only on iOS

4. @sanaasqualli
2010 2011 2012 2014 2015 2016
Safari 5
History
JS CSS HTML
Safari Extension Gallery
Automatic Updates
Popover
Extension Menu
Windows
Safari 6 App Extensions
iOS & OS X
Safari App Extensions
macOSOS X & Windows Paid program
Auto Updates
only for gallery
Content BlockerNew events
Share
Photo
Today
Custom Keyboard
Finder
Action

5. @sanaasqualli
Safari App Extensions
What’s new and what are the benefits?
Compatibility: Safari 10 on El Capitan or Sierra
Built using: JavaScript, CSS and Swift / Objective-C
Safari App Extension is bundled inside a macOS app
Distributed via Mac App Store
No mismatch revision between app and extension
Securely communicates with the app using the shared ressources
Possibility to check if the extension is enabled

6. @sanaasqualli
Migrate To Safari App Extensions
Old Extensions
Background
Popover
Injected
JS
JS, HTML, CSS
JS
Extension

7. @sanaasqualli
Migrate To Safari App Extensions
Apple Developer Docs
Use Xcode to create an app extension
Global page must be now done in native code
Popovers are created in Native code
Few changes between the extension and the injected script
Cannot create multiple menu items
Cannot create extension bar

8. @sanaasqualli
Background
Migrate To Safari App Extensions
Dashlane Extension Example
Popover
Injected
Dashlane
JS
JS, HTML, CSS
JS
Dashlane Extension

9. @sanaasqualli
sendToHost()
receiveFromHost()
Background (JS)
macOS Safari App Extension (Swift)
Migrate To Safari App Extensions
Hacking Safari App Extensions
Basic Architecture (2-way communication) using JavaScript Core Framework

10. @sanaasqualli
Demo
Hacking Safari App Extensions

11. @sanaasqualli
Q&A