Convert a Chrome Extension to a Safari Web Extenion


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:

    a. safari -> preferences -> enable development menu


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


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


    d: 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 via 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’

  5. In Xcode -> assets -> make sure all icons are provided

  6. In Xcode click Product -> Archive

  7. Distribute window should automatically appear after the archive action. (If not, click Window -> Organize -> Distribute App)

  8. Select App Store Connect

  9. Open a browser, go to App store connect, click the app, and now you should be able to select the build



    (If the build is not available, check your App Store email and see if there are any error reports.)

  10. Upload all the screenshots and add descriptions to App Store Connect

  11. You are now good to start a review process.