rxliuli blog

rxliuli blog

马上订阅 rxliuli blog RSS 更新: https://blog.rxliuli.com/atom.xml

发布 Safari 扩展到 iOS 应用商店

2025年8月8日 07:28

背景

今年以来,吾辈开始发布一些 Safari 扩展程序到 AppStore 中,由于吾辈并不使用 iPhone,所以仅发布了 Mac 版本。而这个月吾辈开始实践全平台浏览器扩展的开发,即为所有主流的桌面浏览器(Chrome/Safari/Edge/Firefox)和所有支持扩展的移动端浏览器(Kiwi/Edge/Safari/Firefox)发布相同的插件,这让吾辈将发布 iOS Safari 扩展重新提上日程。

关于如何转换 Chrome 扩展为 Safari 扩展,请参考 转换 Chrome Extension 为 Safari 版本

过程

在已经有一个 Mac Safari 扩展的情况下,为它发布到 iOS 版本理论上很简单。但发布之前,必须通过模拟器调试确保没有漏洞。

使用模拟器测试

首先,在 Target 中选择 iOS 平台,然后选择一个模拟器,建议 iPhone 16 Pro,最后点击 Build 按钮。
1755089514895.jpg

其次,模拟器中的 iOS 扩展的封装 App 就会自动打开。
Simulator Screenshot - iPhone 16 Pro - 2025-08-13 at 20.52.34.jpg

再其次,点击模拟器顶部工具栏的 Home 图标,返回桌面,打开 Settings > Apps > Safari > Extensions 中,即可看到刚刚 Build 的扩展。默认情况下它应该是 Disable 的,进入然后 Enable 即可。如果你无法找到刚刚 Build 的扩展,请参考下面的问题,就我而言,在排查问题的过程中 Claude 4.1 Opus 确实给了不错的提示,让吾辈意识到排查错误的方向和关键词是什么。
1755089694981.jpg
1755089768574.jpg

最后,点击 Home 回到桌面,找到 Safari 打开,你应该能在浏览器工具栏看到刚刚 Build 的扩展。
1755090127320.jpg

参考: Apple 官方视频 2022

发布到 AppStore

在测试完成确认没有漏洞之后,就可以发布到 AppStore 了。

首先,在 Xcode 中选择 Product > Archive 进行打包。
1755090217839.jpg

其次,在弹窗中点击 Distribute App 按钮,接着选择 App Store Connect 作为分发渠道,最后点击 Distribute 按钮,你的 App 就会开始上传到 AppStore 了。
1755090347344.jpg
1755090341984.jpg

但请注意,上传完成之后并未发布,只是上传了一个构建包,还需要到 App Store Connect 添加版本信息、App 描述、截图等一系列常规信息,并提交审核才能最终发布。
1755090522509.jpg

问题

如果没有报错但同时也不生效,那可能不是你的错,只能怪 Apple/Safari 的开发体验太糟。

iOS 里面的 Settings > Apps 中看不到任何 App

如图

Snipaste\_2025-08-08\_07-23-20.jpg

根据这个 社区 issue,可以知道是 18.2 的 bug,升级到 18.4 解决。

Snipaste\_2025-08-08\_07-31-46.jpg

验证

Snipaste\_2025-08-08\_07-32-07.jpg

在 Settings > Safari > Extensions 中始终看不到开发的扩展

如图

Snipaste\_2025-08-08\_08-01-05.jpg

升级至最新版的 XCode 及虚拟机解决,就吾辈而言,是 XCode 16.4 及 iOS 18.4 的虚拟机。

Snipaste\_2025-08-08\_08-43-45.jpg

验证方法是通过 XCode 创建一个全新的 Safari Extension 项目,然后 Build 并检查 Settings > Safari > Extensions 中是否能看到。

Apple 的官方文档几乎没什么用 https://developer.apple.com/documentation/safariservices/troubleshooting-your-safari-web-extension
但吾辈看到一个今年刚出的视频感觉很有帮助 https://www.youtube.com/watch?v=DZe7L70CDPc

CJK 输入法输入的空格不是 \u0020,而是 \u3000

一个很小的问题,CJK 输入法在 Mac 上输入的字符是 \u0020,即便输入的是中文的空格,但 keydown 事件中仍然识别为标准的 \u0020
例如

1
2
3
document.addEventListener('keydown'...

剩余内容已隐藏

查看完整文章以阅读更多