HOW TO CONVERT A CHROME EXTENSION INTO A SAFARI WEB EXTENSION, AND UPLOAD TO MAC APP STORE

Bart Solutions

4 min readNov 18, 2020

Original Article: https://www.bart.com.hk/convert-chrome-extension-safari-web-extension-upload-mac-app-store/

Part A: Safari Web Extension Development

Here we use Simple Gmail Notes (Source Code) for the example.

1. Make sure you have Safari 14 and Xcode 12 installed

2. In the terminal, use Xcode command for the conversion

xcrun safari-web-extension-converter <your extension folder>

(click Yes for default options)

3. A brand new Xcode project folder will be created, and Xcode will be automatically launched to open the new project.

The Xcode project will be linked to the source web extension folder, so you need to make sure both source and generated folder exist and have a consistent relative path.

4. Without doing anything further in Xcode, just click run to launch the extension

5. Safari will be opened, yet extension will not appear at first sight. You need to do the following steps first:

5a: safari -> preferences -> enable development menu

5b: safari -> develop menu -> click allow unsigned extension (need to do this every time safari is restarted)

5c: safari -> preferences -> extensions tab -> click the extension

5d: open the web site, click the icon near the address bar, and allow the access

6. Now the extension should be able to be launched, and you could see the content script in the Safari debug console.

7. To check the background script, in the Safari, click Develop -> Web Extension Background Pages

Part B: Distribute Safari Web Extension to App Store

1. Go to App Store Connect, create an identity:

https://developer.apple.com/account/resources/identifiers/list/bundleId

2. In App store connect, create an app of ‘macApp’

https://appstoreconnect.apple.com/apps

In the bundle ID drop down, just select the one newly created

3. Go to Xcode, click Project -> target -> app target, update app category and bundle identifier (use the one in the appstore)

4. Click extension target of project, update bundle identifier.

Note the the project identifier should prefix the extension identifier. E.g. if project identifier is ‘hk.com.bart.simplegmailnotes’, then extension identifier should be something like ‘hk.com.bart.simplegmailnotes.extension’