如何为现有React-Native应用添加Safari浏览器扩展目标？

一、在RN项目中添加Safari扩展目标 #

1. 打开RN项目iOS目录下的.xcworkspace文件（必须使用workspace而非单个project文件）
2. 在Xcode项目导航栏中，右键点击主应用目标，选择「New Target」
3. 在模板窗口的「Application Extension」分类下找到「Safari Extension」，点击下一步
4. 填写扩展信息：
   • Product Name：自定义扩展名称
   • Bundle Identifier：需与主应用Bundle ID关联（例如主应用为com.yourapp，扩展可设为com.yourapp.safariextension）
   • 选择开发语言（Swift/Objective-C均可，后续替换为已有的Safari扩展代码）
5. 点击「Finish」完成目标创建，Xcode会自动生成扩展的基础目录结构，随后将你已转换好的Safari扩展代码（前端静态资源、Info.plist配置、扩展逻辑文件）替换默认生成的内容。重点核对扩展Info.plist的关键配置：
   • NSExtensionPrincipalClass：指向你的扩展入口类
   • SFSafariExtensionAttributes：配置扩展权限、弹窗样式等核心属性

二、iOS应用的特定配置与步骤 #

1. 配置App Groups（用于主应用与扩展共享数据） #

• 选中主应用目标，进入「Signing & Capabilities」标签，点击「+ Capability」添加「App Groups」
• 创建格式为group.com.yourapp.shared的App Group（需与主应用Bundle ID对应），并为Safari扩展目标添加相同的App Group
• 数据共享实现：RN端可借助react-native-shared-group-preferences库访问共享数据；扩展端的Swift/OC代码可通过UserDefaults(suiteName: "group.com.yourapp.shared")读写数据

2. Safari扩展权限与UI配置 #

• 在扩展的Info.plist中，完善SFSafariExtensionAttributes下的配置：
  • 需访问网页内容时，添加"accessWebPageContent": true到SFExtensionPermissions
  • 若扩展需弹出UI，配置SFExtensionPopover的width和height参数定义弹窗尺寸

3. 集成React扩展代码到iOS扩展 #

• 将已转换好的React扩展构建产物（index.html、打包后的js/css文件）复制到iOS扩展目录，在Xcode中添加这些文件到扩展目标（勾选「Copy items if needed」）
• 修改扩展的入口ViewController（如SafariExtensionViewController.swift），通过WKWebView加载本地静态资源，示例代码：

  import SafariServices
  import WebKit
  
  class SafariExtensionViewController: SFSafariExtensionViewController {
      static let shared = SafariExtensionViewController()
      private var webView: WKWebView!
  
      override func viewDidLoad() {
          super.viewDidLoad()
          let webConfig = WKWebViewConfiguration()
          webView = WKWebView(frame: view.bounds, configuration: webConfig)
          view.addSubview(webView)
          
          // 绑定布局约束
          webView.translatesAutoresizingMaskIntoConstraints = false
          NSLayoutConstraint.activate([
              webView.topAnchor.constraint(equalTo: view.topAnchor),
              webView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
              webView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
              webView.trailingAnchor.constraint(equalTo: view.trailingAnchor)
          ])
          
          // 加载本地React扩展页面
          guard let htmlUrl = Bundle.main.url(forResource: "index", withExtension: "html") else { return }
          webView.loadFileURL(htmlUrl, allowingReadAccessTo: htmlUrl.deletingLastPathComponent())
      }
  }
  

4. 测试与调试 #

• 选择主应用目标，运行到iOS设备/模拟器后，打开Safari进入「设置」-「Safari浏览器」-「扩展」，启用你的扩展
• 调试扩展：可在Xcode中选择扩展目标，将Safari设为调试目标；或通过Safari开发者工具连接扩展的WKWebView进行调试

5. App Store提交要求 #

• 确保扩展功能符合Apple审核规则：禁止恶意修改网页内容、未经授权收集用户隐私数据等
• 在主应用的App Store描述中明确说明Safari扩展的功能
• 提交时需将主应用与扩展一起打包，Xcode会自动关联两者的提交流程

三、macOS端额外说明 #

macOS Safari扩展的配置逻辑与iOS基本一致，仅部分权限限制更宽松（如允许访问本地文件系统），App Groups配置、React代码集成方式完全通用，扩展窗口尺寸可根据需求灵活调整。

内容的提问来源于stack exchange，提问作者JAINESH DOSHI