WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Meet Safari Web Extensions on iOS

Meet Safari Web Extensions on iOS

SafariWeb ExtensionsiOS 15
观看原视频

Highlight

iOS 15 首次支持 Safari Web Extensions，开发者可用标准 WebExtensions API 编写跨平台扩展，通过 App Store 分发，用户在 Safari 设置中按需授予每个站点访问权限。

核心内容

Web Extensions 让用户能深度定制浏览器体验：屏蔽广告、翻译网页、管理密码、高亮代码。这些扩展用 HTML、CSS 和 JavaScript 编写，基于各大浏览器通用的 WebExtension API 标准。

iOS 15 之前，Safari Web Extensions 只能在 macOS 上运行。从 iOS 15 开始，用户可以在 iPhone 和 iPad 上安装扩展。这意味着同一个扩展代码可以覆盖 Safari 的全平台用户。

iOS 上的 Web Extensions 有一个关键区别：它们是 App 的一部分。用户从 App Store 安装”包含扩展的 App”，然后在 Safari 设置中启用扩展。这个设计让扩展遵循 iOS 的安全模型和隐私原则。

Sea Creator 示例扩展展示了典型用法：在网页中将海洋生物名称替换为 emoji，在起始页面显示每日海洋知识，计数器跟踪已替换的单词数。用户首次在某个站点启用扩展时，Safari 会弹出权限请求，用户可以选择允许访问”仅此站点”或”所有站点”。

详细内容

扩展与 App 的关系

（04:20）在 iOS 上，Web Extensions 必须作为 App 的一部分存在：

安装 App Store 上的 App
    ↓
在 Safari 设置中启用扩展
    ↓
按站点授予访问权限
    ↓
扩展开始工作

Xcode 13 提供了 Safari Extension App 模板。新建项目时选择这个模板，Xcode 会生成：

  • 一个 iOS App 容器
  • 一个 Safari Extension target
  • 扩展所需的 manifest.json 和基础文件

关键点：

  • 扩展是 App 的嵌套 target
  • App 本身可以是空的（仅作为载体），也可以提供额外功能
  • 一个 App 可以包含多个扩展
  • 用户删除 App 时会一并删除扩展

Safari Web Extension Converter

（05:40）如果你已经有为其他浏览器编写的扩展，可以用转换工具快速移植：

xcrun safari-web-extension-converter /path/to/extension/folder

这个命令会：

  1. 分析现有扩展的 manifest.json
  2. 创建一个新的 Xcode 项目
  3. 将扩展文件添加到项目中
  4. 生成 iOS/macOS 适配的配置

关键点：

  • 支持从 Chrome、Firefox、Edge 等浏览器扩展转换
  • 自动处理不同浏览器的 API 差异
  • 保留原始扩展的所有功能
  • 输出双平台项目，可在 iOS 和 macOS 上运行

iOS 特有的限制与适配

iOS 上的扩展需要考虑以下限制：

功能macOSiOS说明
Sidebar（侧边栏）支持不支持在 iOS 上可用 popup 替代
DevTools 面板支持不支持无法在 iOS 上调试扩展本身
Native Messaging支持支持与容器 app 通信的方式
起始页面支持支持自定义新标签页

关键点：

  • 代码需要做平台检测：if (navigator.platform.includes('iPad'))
  • popup 在 iOS 上以更小的弹窗形式展示
  • 触摸事件需要适配（更大的点击区域）
  • 尽量避免依赖鼠标悬停等桌面特有交互

权限模型与用户隐私

（11:20）Safari 继承了 macOS 端的权限模型到 iOS：

// manifest.json 中的权限声明
{
  "permissions": ["activeTab", "storage"],
  "host_permissions": [
    "https://*/*"
  ]
}

用户首次启用扩展时的交互流程：

  1. Safari 显示扩展能访问的数据类型
  2. 用户选择”允许”或”拒绝”
  3. 用户可以选择访问范围：“此站点”或”所有站点”
  4. 用户可以在 Safari 设置中随时撤销权限

关键点：

  • activeTab 权限：只在用户主动点击扩展时访问当前标签
  • <all_urls> 需要用户明确授权才能工作
  • 用户可以为每个站点单独设置权限
  • Safari 状态栏会在扩展激活时显示图标

调试技巧

（13:15）在 iOS 上调试扩展：

  1. 在 Safari 设置中启用扩展
  2. 连接设备到 Mac
  3. 在 Safari 的”开发”菜单中选择设备和网页
  4. Web Inspector 会显示扩展的 context（popup、background、content script）

关键点：

  • iOS Safari 需要在设置中启用”Web Inspector”
  • 一次只能调试一个 context（popup 或 background 或 content script）
  • 使用 console.log() 在 Web Inspector 中查看输出
  • 使用 browser.runtime.sendMessage() 测试消息传递

核心启发

  • 内容提取与笔记：开发一个扩展，在阅读文章时提取关键信息发送到容器 App。用户点击扩展图标时，App 通过 Native Messaging 接收文章标题、URL 和选中文本，存入本地数据库。入口 API：browser.runtime.sendNativeMessage()。

  • 自定义起始页面：在扩展的 manifest.json 中声明 chrome_url_overrides 覆盖新标签页。为用户提供个性化起始页，显示书签、待办事项或新闻摘要。配合 browser.storage.local 保存用户配置。

  • 跨站点数据同步：利用 browser.storage.sync 在用户的多个设备间同步扩展设置和用户数据。当用户在桌面端保存了一组书签或配置后，iOS 端自动同步。注意数据有大小限制（100KB per item）。

  • 隐私友好的密码管理：开发密码填充扩展，但只在用户主动点击时填充当前站点密码，不自动扫描所有表单。用 activeTab 权限替代全站点访问，密码存储在容器 App 的 Keychain 中，不通过 Web APIs 暴露。

关联 Session

评论

GitHub Issues · utterances