Adding a Safari Extension to Capacitor iOS App as an Application Extension

Hello everyone,

I’m working on adding a Safari extension as an application extension to an iOS app created using Capacitor (generated from a React app). My goal is to bundle the Safari extension within the Capacitor app, allowing it to serve as a companion app for the extension. However, I’ve run into issues where the extension does not show up in Safari's extension settings when I run the app on a device or simulator.

Here's an overview of what I’ve done so far:

I initially used Capacitor’s command line tools to generate the iOS app from my React project. This app runs fine on its own. To add the Safari extension, I’m not developing a platform-specific extension from scratch; instead, I used the Xcode command line to convert a Chrome extension to a Safari iOS extension. The converted extension functions correctly if paired with the default Swift app that comes with the conversion. Right now, I effectively have two products: The base Capacitor app (without the extension), which I want as my main app. The standalone Safari extension bundled with the Swift app (from the conversion process). My question is: How can I merge these two products so that the Capacitor app becomes the companion app for the Safari extension, allowing the extension to show up in Safari's settings? Are there specific configurations I should adjust in Xcode or within the manifest files to make this work seamlessly?

Any guidance or best practices from others who have integrated Safari extensions into non-Xcode-based projects would be much appreciated!

Thank you!

You can also test by using an Xcode generated project to ensure the issue is solely occurring in your capacitor app, then compare the settings of both apps to see configuration and setup differences.

Adding a Safari Extension to Capacitor iOS App as an Application Extension
 
 
Q