了解 iOS 上的 Safari 浏览器网页扩展

♪ ♪ 嗨 欢迎收看iOS的 认识Safari浏览器网页扩充功能 我是Safari浏览器团队的工程师 大卫克萨达 今天 我将介绍iOS 15中 令人兴奋的新功能 Safari浏览器网页扩展功能 网页扩展功能是一种功能强大的 浏览器扩展功能 允许用户 以多种方式扩充功能 和自定义他们的浏览 这是使用标准网页技术构建的： HTML、CSS和JavaScript 网页扩展功能API已可用于 所有主要桌面浏览器一段时间了 这代表你只需编写 一次浏览器扩展功能即可部署到 所有的浏览器上 进而接触到如此多的用户 但现在 我很高兴地告诉你 iOS 15 即将推出网页扩展功能 让你可以 替更多的用户构建浏览器扩充功能 我现在想向你展示 一个在iOS上执行的 Safari浏览器网页扩展功能 我将展示一个 名为“海洋创作者”的扩展功能 这个扩展功能最初 是为Mac上的浏览器编写的 但我一直在努力将它带到iOS 这个扩展功能向我展示了 关于海洋生物的冷知识

并用表情符号替换海洋生物的名称 让阅读更多关于 海洋生物的信息变得有趣 我们用iPad来看看 好 我刚刚安装了“海洋创作者” 并打开了Safari浏览器 在那里我正在阅读一篇关于鱼的文章 我真的很想开始使用“海洋创作者” 这样我就可以用一些表情符号 来活跃这个页面 因此 我将打开动作选单 并进到新的扩展功能列表 其中显示了我可用的所有扩展功能 包括”海洋创作者“ 我要打开它 好 ”海洋创作者“的另一个功能是 我可以将它放在 Safari浏览器中的前面和中间 使用每次打开新标签页时 使用的自定义起始页 我稍微检查一下 现在我已经打开了”海洋创作者” 它就在动作选单中 可供我使用 当我这样做时 Safari浏览器会问我是否同意 让“海洋创作者”能完全访问该网站 我们将相同的网页扩展功能权限模型 从Mac上的Safari浏览器 引入iOS 这代表我作为用户 能全然控制我的浏览扩展功能 可以访问权限的程度 稍后我会详细地讨论这一点 但我现在会允许“海洋创作者”执行 就像这样 它在页面上 用这些鱼表情符号替换单词 这正是我喜欢阅读的方式 它还打开了这个弹出窗口向我显示 到目前为止我已经替换了多少个单词 但不仅仅是这一页 我已授权“海洋创作者” 在整个网站上工作 因此 当我进到其他页面时 “海洋创作者”仍在为我工作 并在此处为我提供表情符号 一旦我开始使用它 我就不需要特地再次打开它 当然 “海洋创作者”还有一个 我之前提到的功能 当我打开一个新标签页 进行更多浏览时 我看到了来自“海洋创作者”的 这个大胆的新标签页 里面有 今天关于海星的冷知识 再一次 那个计数器向我展示了 “海洋创作者”到目前为止 已经给了我多少表情符号 这很酷 所以这是对在iOS上 执行良好的“海洋创作者”的快速浏览 在本次课程中 我想展示 如何为iOS创建 Safari浏览器网页扩展功能 我将使用“海洋创作者”作为示范 说明我如何采用现有扩展功能 并将其引入iOS 只需进行一些更改 但是 如果你以前从未编写过 浏览器扩展功能 请不要担心 我将向你概述 网页扩展功能的工作原理 以及如何开始创建一个新的扩展功能 在过程中 我会介绍一些除错技术 和最佳做法 以帮助你的扩展功能达到最佳状态 我将用一些关于用户隐私的想法 以及它与Safari浏览器 网页扩展功能的 权限模型的关系来总结 因此 我们的旅程先从创建一个 可以在iOS上执行的 网页扩展功能开始 让我们看看幕后 以了解这是如何运作的 请务必了解 对于Safari浏览器 网页扩展功能是app的一部分 因此 当你想安装网页扩展功能时 请安装其app 与任何其他类型的iOS app一样 可以在App Store上找到 带有Safari浏览器 网页扩展功能的app Xcode拥有构建app 以发布扩展功能所需的一切 因此 当你考虑为iOS构建 Safari浏览器网页扩展功能时 你可能会从三个地方之一开始 也许你正在考虑 从头开始创建一个新扩展功能 或者你已经为另一个浏览器 编写了一个扩展功能 而你想将它带到Safari浏览器 或者你可能已经在Mac上 拥有了一个Safari浏览器扩展功能 并且你想要让它也可以在iOS上使用 我想讨论在每种情况下你可以做什么 所以首先 如果你想 创建一个全新的网页扩展功能 你可以使用Xcode包含的模板 这会非常容易上手 你可以创建一个新的Xcode项目 并使用Safari浏览器扩展功能 App模板 开始构建网页扩展功能 及其包含的app 当你使用此模板时 你将获得一个包含典型网页扩展功能 可能拥有的所有资源的扩展功能 你可以以这个为起点 通过自定义已有的内容 或根据扩展功能的需要 添加或删除部分功能 现在 如果你已经为其他浏览器 构建了网页扩展功能 则可以利用名为 Safari浏览器 网页扩展功能转换器的工具 从现有扩展功能 自动创建Xcode项目 你只需在命令行上执行转换器 提供扩展功能资源的路径 它将创建一个新的Xcode项目 将你的扩展功能打包到原生app中 在Xcode 13新功能中 Safari浏览器 网页扩展功能转换器创建了 一个默认支持iOS 和macOS上的Safari浏览器的项目 默认情况下 新创建的项目 会在原始路径中引用 现有扩展功能的资源 而不是复制它们 最后 如果你过去已经 设置过Xcode项目 来构建适用于macOS的 Safari浏览器网页扩展功能 你还可以使用转换器 升级该项目 让它也支持iOS 你可以执行转换器 并提供rebuild-project选项 以及Xcode项目的路径 然后转换器会向你的项目 增加一个iOS兼容版本的扩展功能 和一个包含的app 现在我想展示Safari浏览器网页 扩展功能转换器的 实际应用 用回顾我第一次 将“海洋创作者”引入iOS的步骤

所以这是我的大海创作者Xcode项目 我用它在Mac上 为Safari浏览器开发“海洋创作者” 但它现在只支持Mac 我想解决这个问题 所以我要打开一个终端 并输入xcrun safari-web- extension-转换器 我会使用rebuild-project选项 提供我Xcode项目的路径 并执行转换器 它确认了我现有项目的一些细节 并停下来询问我是否想用 跨平台版本覆盖它 此外 每当你执行转换器时 它都会警告你有关 你扩展功能的潜在兼容性问题 在这种情况下 它警告我使用 称为持久性背景页面的东西 iOS不支持该页面 稍后我需要解决这个问题 但是现在 我会让转换器继续执行

完成后 我的项目会自动打开 请注意 这里的文件夹 有iOS和macOS版本的 app和扩展功能 现在 我想看看共享扩展功能组中的 来源文件夹 我在这里找到 “海洋创作者”网页扩展功能的 核心部分 对于那些不熟悉网页扩展功能 API的人 我想解释其中一些部分是什么 因为我稍后会提到它们 我将从清单开始 这是一个JSON档案 描述了扩展功能的结构 它包括重要信息 例如扩展功能的名称 要访问的网站 以及它支持的功能 例如弹出页面或像“海洋创作者”那样的 新标签页 接下来 有一个称为后台脚本的 JavaScript原始代码 当你的扩展功能启用时 浏览器可以在后台执行此脚本 它允许你的扩展功能侦听来自浏览器 或扩展功能其他部分的各种事件 “海洋创作者”的后台脚本 会追踪该计数器 了解它加到网页中的表情符号数量 接下来 还有另一种称为 内容脚本的脚本 浏览器会在用户访问的网页上 自动执行此脚本 一个扩展功能可以有 任意数量的内容脚本 清单指定哪些内容脚本 应该在哪些网站上执行 此脚本使你的扩展功能能够通过 直接操作来扩展和自定义网页 例如 “海洋创作者”的内容页面实际上 是用表情符号替换动物名称 完成了之后 会向后台脚本发送一条信息 以便更新中央计数器 当然 该扩展功能还有一些HTML CSS和其他JavaScript档案 用于新标签页和弹出页面 最后 这里还有一些其他资源 例如本地化的字符串 以及扩展功能的图标和其他图形 因此 所有这些部分组合在一起 构成了“海洋创作者”网页扩展功能 多亏了Safari浏览器 网页扩展功能转换器 我现在有一个项目 可以将所有这些 打包到一个原生app中 我现在可以执行我的项目 所以我可以立即开始在 Safari浏览器中使用“海洋创作者” 现在 我将转到屏幕顶部的 工具栏 选择适用于iOS的“海洋创作者” 然后选择要执行该app的目的地 我没有连接任何iOS设备 因此在这种情况下 我将使用iPhone模拟器

然后我将单击“执行”按钮 Xcode将构建我的app项目 加载模拟器 并执行我的app

这是由网页扩展功能转换器 生成的“海洋创作者”app 包含了“海洋创作者”网页扩展功能 在本次课程的开头 我示范了我可以直接 在Safari浏览器中打开扩展功能 但正如app所建议的那样 我还可以使用“设置” 来管理我的扩展功能 我想在这里展示一下 所以我将切换到设置

进入Safari浏览器 扩展功能 然后进到“海洋创作者” 这是“海洋创作者”的详细信息页面 其中包含有关扩展功能的 一些信息以及将其打开的开关 但是那个开关是灰色的 我还不能打开扩展功能 这代表扩展功能有问题 无法加载 接下来我得要研究一下 我接下来想谈论除错 能够构建你的项目 并安装你的扩展功能 是个很好的第一步 但是当然 知道如何深入挖掘 以找出为什么会出错是不可或缺的 找出网页扩展功能中的错误 并使用例如网页检阅器之类的工具 来除错扩展功能的某些部分很容易 这就是我现在要向你展示的内容 回到设置 底部有一个错误 告诉我iOS上的扩展功能 必须有一个非持久化的后台页面 这听起来很熟悉 这与转换器之前警告过我的问题相同 现在我想回去修复它 所以我回到Xcode 打开清单 并在后台部分 添加一个"persistent":false键 稍后我将更详细地讨论此修正 但就目前而言 这应该能让我修正错误 现在我已经进行了这个更改 我要再次执行该app 以在模拟器上安装更新的扩展功能

“海洋创作者”app就又出现了 看起来我只需要修复一个错误 所以现在我要直接 回到Safari浏览器 而不是返回到“设置”

我要打开Safari浏览器 打开扩展功能列表 然后打开“海洋创作者” 现在看来我可以打开它了 Safari浏览器为我提供了 使用“海洋创作者”的 新标签页体验的选择 我确实想看看它在iPhone上的样子 因为我以前从未见过 所以我将把它设置为我的新标签页

关闭扩展功能列表 然后打开一个新标签 正如我所料 “海洋创作者”提供了新标签页 但是文字真的很小 而且网页看起来不太好 这是我第一次在iOS上 执行这个扩展功能 因此内容尚未调整为 与iPhone兼容 这也不意外 我现在想解决这个问题 为此 我将使用网页检阅器 仔细查看此页面 并试一些我想到的修正 因此 为了使用网页检阅器 我将在Mac上打开Safari浏览器 然后我将仔细检查 Safari浏览器的进阶偏好 以确保启用了开发选单

现在我有了“开发”选单 我可以打开它 选择我一直在使用的iPhone模拟器 然后选择一个页面进行检查 现在 大海创作者有两个选项 如果我想除错后台脚本 我可以选择扩展功能后台页面 但在这种情况下 我想检查新标签页 所以我会选择另一个选项

现在我在网页检阅器中 我想在这里解决的第一件事 是页面的整体大小 默认情况下 iPhone上的 Safari浏览器将网页呈现为 桌面浏览器的大小 然后它会缩小较大的内容 让整个页面适合屏幕 但我不希望这种行为在这里出现 因为它会使文字变太小 因此 当涉及到 iPhone的网页设计时 我将使用一种非常常见的做法 我将添加一个窗口元标记 来告诉Safari浏览器 不要以这种方式缩放内容 我要选择Head元素 增加一个Child元素 然后加入 该窗口meta标签的内容 我要增加标签 并且页面更新 会在模拟器中实时回应此修正 现在所有的文字都是可读的大小 但并不适合屏幕 这是我的下一个问题 我想检查此页面上的元素 以了解为什么它会这样排列

我查看body标签 我注意到这里有一个 包含页面上所有内容的div 如果我仔细检查 并查看右侧的样式表侧边栏 我会注意到该元素的 固定宽度为850 这在桌面上是有意义的 因为窗口可能非常宽 并且你希望文本在某个时候换行 但这在iPhone上起不了作用 因为手机没有那么宽 我认为如果该规则为 内容设置的最大宽度 而不是要求精确的宽度 在这里会更有意义 我可以在这里简单地编辑规则 我将单击宽度 并将其更改为最大宽度 模拟器中的页面会更新 以反映此项修正 现在内容的宽度更适合iPhone 并且所有文字都适合屏幕 现在看起来好多了 但我所做的这些更改 只是这次检阅器课程的临时更改 我想实际将这些更改保存回 我的项目中 这样我就不会遗失了 当我在样式表检阅器中工作时 保存样式表的更新副本真的很容易 我可以简单地按下Command键+S 来保存有更新规则的样式表 我将覆盖我的项目中的 new_tab_page.css

但是对于窗口更改 我将该标记增加到 实时网页而不是静态资源 因此我必须对原始来源 进行相同的更改 我要选择该标签 复制 返回Xcode 打开新标签页的原始代码

然后将内容贴上去

因此 下次我执行“海洋创作者”时 它会使用更新后的 页面原始代码和样式表 而且看起来会跟现在一样好 以上是使用网页检阅器来查看 网页扩展功能的底层结构 准确了解正在发生的事情 并在迭代扩展功能时 尝试潜在变化的几个示范 现在 我只看新标签页 但在开发后期 我显然应该在 iOS上测试扩展功能的 所有其他部分 我会使用相同的工具和技术 你可以在iOS上使用 Safari浏览器的扩展功能设置 来查看网页扩展功能配置中的 任何错误 具体来说 “海洋创作者”存在 使用持久性背景页面的严重错误 但这里也可能存在非严重警告 你应该查看一下 这些详细信息只会出现在设置中 在Xcode除错app 而不适用于从App Store 或TestFlight的副本中 当你更改你的网页扩展功能时 你只需再次执行你的app以更新 设备或模拟器上的扩展功能 当然 网页检阅器允许你 调查扩展功能的网页内容问题 请记住 为了访问网页检阅器 我必须在Mac上的Safari浏览器的 进阶偏好中启用“开发”选单 在我的示范中 我将iOS模拟器用于我的扩展功能 但如果你想使用实际的iOS设备 你还需要在Safari浏览器的 进阶设置中 启用该设备上的网页检阅器支持 要更深入地了解网页检阅器 并了解其一些最新功能 请查看发现网页检阅器改进 现在我已经为iOS创建了 一个Safari浏览器网页扩展功能 并且已经除错了一些基本问题 我想通过一些最佳实践帮您记住 当你在构建iOS上 Safari浏览器的扩展功能时 一些可能需要注意的事情 我将重点讨论 可能与你的扩展功能相关的五个主题 从非持久性后台页面开始 后台页面是浏览器加载 以执行扩展功能的后台脚本的网页 此页面允许你的扩展功能处理 由浏览器或扩展功能的 其他部分发送的事件 但是保持这个页面加载会有性能成本 它会用到内存和电源 就好像你为每个启用的 扩充功能保持打开和执行 一个标签页一样 一直加载所有这些页面 会非常浪费 但是你可以使后台页面非持久化 这代表浏览器只会在你的扩展功能 真正需要工作时加载 浏览器可以稍后在它闲置一段时间后 卸载该页面 这样 性能成本只在你的扩展功能 做一些有用的事情时产生 这很重要 因为后台页面在iOS上 必须是非持久性的 因为系统内存 和电池寿命尤其宝贵 Xcode中的网页扩展功能模板 已经带有非持久性背景页面 因此已经准备好在iOS上执行 但是 如果你有一个像“海洋创作者” 那样使用持久性背景页面的 现有扩展功能 则需要更改为非持久性 你可以通过在清单的背景部分 增加“persistent:”False键 来做到这一点 要了解有关更新扩展功能 以使用非持久性后台页面时 可能面临的一些最佳做法 和潜在问题的更多信息 请查看 《探索Safari浏览器 网页扩展功能改进》 接下来 让我们谈谈响应式设计 正如我们在“海洋创作者”中了解到的 为iOS带来扩展功能 代表它的网页内容可能会 在你之前没有考虑过的新环境中呈现 就像我对“海洋创作者”的 新标签页所做的一样 一定要测试扩展功能的 网页内容的排版 在iPhone和iPad上 并使用可适应各种屏幕尺寸的 响应式设计 但是 要让你的网页内容 在iOS上看起来很棒 屏幕大小的差异 并不是唯一的考量 让我告诉你一些你应该注意的事情 如果你的扩展功能有整页的网页内容 在屏幕底部附近有重要的元素 你可能会发现 它被Safari浏览器的标签栏 或设备的白色横条给覆盖住 在CSS术语中 靠近屏幕边缘的区域 部分内容可能被遮住 这区称为不安全区域 视区中可用区域 就称为安全区域 通过使用CSS环境变量 你可以计算安全区域插图 以确保重要元素 位于安全区域内 在iPhone上 横向屏幕的设置也值得考虑 在这种情况下 设备的显示屏左侧和右侧 也可能有安全区域插图 通过使用类似的CSS 并在你的窗口中 指定viewport-fit参数 你可以为你的网页内容 提供一个边缘到边缘的设计 仍然将重要内容保留在安全区域内

查看《Safari浏览器15的设计》 以了解更多API的信息 这些信息可以让你的网页内容 在iOS上感觉更自在 在iPad和桌面浏览器上 如果你的扩展功能有一个弹出页面 你可能习惯于将它显示为 一个大小合适 以适合其内容的弹出窗口 但是在iPhone上 Safari浏览器 会将此网页显示为表格 这可能对你的内容来说是个意外 该表跨越设备的整个宽度 并且它的排版可能 比内容预期的要高 在这张“海洋创作者” 早期版本的屏幕截图中 内容从屏幕边缘 没有太多内边距 我们为页面中的单个元素 而不是正文设置了背景颜色 所以文字看起来有点挤 背景也没有填满 整个页面 但是我们已经更新了内容的 对齐方式和内边距 给了它更多空间 我们现在在正文上 指定了背景颜色 可以覆盖整个工作表 如果你的扩展功能有弹出页面 请考虑是否应该对你的扩展功能 进行类似的更改 请注意 Safari浏览器也将在横向屏幕中 使用类似的示范文稿 请务必在这些配置中 测试扩展功能的界面 以确保在提供额外空间时 排版是合理的 最后在设计考量中 我想提到动态类型 动态类型是一项功能 允许用户 调整文字和其他视觉元素的大小 你可以缩小内容 更适合屏幕 或放大内容 变得更显眼 请务必在更小或更大的文字尺寸下 测试你的扩展功能的界面 以确保它在用户选择的任何尺寸下 看起来都正常 为了帮助你的网页内容 充分利用动态类型 WebKit具有多种系统字体 能尊重用户的文字大小偏好 并调整大小 你应该在你的扩展功能中 采用这些字体 这样它的文字对用户来说 会很容易阅读 就像Safari浏览器界面的 其余部分一样 因此 这里的主要内容 是在考虑Safari浏览器的 用户界面设计的情况下 设计扩展功能的网页内容 在iPhone上测试所有整页网页内容 以确保能够良好适应屏幕尺寸 并且不会与屏幕底部的 Safari浏览器的 用户界面设计冲突 你应该在iPhone上 测试你的弹出式网页 以确保 排版符合表格样式的表现 并且你应该在各种动态类型尺寸上 测试你的界面 以确保它根据用户的喜好进行调整 有关于Safari浏览器的新界面中 设计网页内容的更多提示 请查看《Safari浏览器15设计》 接下来 触控事件 如果你的扩展功能 当前依赖处理任意点击 和拖动的鼠标事件 请注意 当用户点击iOS时 不会发送相同的事件 你应该改为采用触控事件API 它类似于鼠标API 它与鼠标输入的运作原理相同 但触控事件API还报告触摸 和Apple Pencil输入 现在让我们谈谈 网页扩展功能窗口API 在桌面浏览器上 用户可能会打开多个窗口 你的网页扩展功能可以使用 browser.windowsAPI 来处理这些窗口 在iPad上也是如此 你也可以在iPad上打开 多个Safari浏览器窗口 每个Safari浏览器窗口可能是全屏 也可能是拆分视图 与另一个app并排显示 可能是另一个Safari浏览器 然而 在幕后 每一个窗口的实际上 都被称为iOS上的一个场景 如果你的扩展功能使用了 窗口API 你应该知道Safari浏览器的 每个场景 实际上都有两个窗口： 一种用于常规浏览 一种用于私密浏览 在iPhone上也是如此 即使Safari浏览器只有一个场景 如果我调用browser.windows.getAll API 来查询打开了哪些窗口 则API回传 这两个窗口对象 在第一个窗口中 无痕浏览属性为否 常规浏览为是 这代表我正在查看的窗口 它处于常规浏览状态 而不是私密浏览状态 第二个窗口包含 Safari浏览器场景中的 私密浏览标签页 当然 它的属性与第一个窗口不同 无痕浏览为是 常规浏览为否 现在 当我将Safari浏览器 切换到私密浏览 并再次调用windows.getAll时 API会回传不同的窗口对象 现在 两个窗口中的 常规浏览属性都已更改 第二个窗口现在为常规浏览

这在iPad上的工作原理完全相同 其中一个Safari浏览器场景 由两个窗口表示 但如果我在拆分视图中 打开Safari浏览器的第二个场景 API现在会报告有四个窗口 如果我的扩展功能 侦听windows.onCreated事件 它会在打开拆分视图时 观察到该事件触发两次 新Safari浏览器场景中的 两个新窗口中的每一个触发一次 因此 如果你使用此API 请记住此模型 因为你会遇到一开始 可能没有预料到的额外窗口 除了这个窗口实际是什么模型之外 窗口API还有一些限制 可能会影响你的扩展功能 创建、删除 和更新窗口状态的方法无法使用 在iOS上 窗口放置 完全由用户控制 而不是任何app或扩展功能 当用户从app切换器 关闭Safari浏览器时 windows.onRemoved事件 不会像你期望的 那样被触发 这并没有真正关闭或删除窗口 它只是让用户 从他们稍后离开的地方开始 请注意 这些限制仅适用于 窗口本身 而不适用于这些窗口中的标签页 使用browser.tabsAPI 网页扩展功能仍然可以 根据需求完全控制增加 删除和更新单个标签页 现在 最佳做法中的最后一个 是特征侦测 在将现有扩充功能引入iOS时 你可能会发现某些API无法使用 例如 我刚才提到的窗口API 但是还有一些其他的 比如上下文选单 和WebRequest 如果你的扩展功能的 非必要部分使用此类API 请务必使用特征侦测来处理 它们无法使用的情况 因此 与其无条件地 调用这些API 不如根据这些API的存在 条件化该代码 这样你就可以完全排除 扩展功能的部分内容 并让它在支持的浏览器方面 更为灵活 在采用将来添加的新API时 你也应该使用此模式 因为它们可能无法立即 在所有浏览器或某些用户 可能仍在使用以前版本的 浏览器中使用 最佳做法就说到这边 我现在已经介绍了Safari 浏览器网页扩展功能的许多部分 但我把可以说是 最重要的主题放在最后 那就是用户隐私 用户隐私 是我们所做一切的重要元素之一 因此我们相信用户 在处理个人数据的方式时 应享有透明度和控制权 当然 这包括他们在 Safari浏览器中所做的一切 网页扩展功能可以获得 对用户浏览的 大量访问权限 因此是否应该允许 以及在哪些网站上应该由用户决定 从历史上看 其他浏览器会在你打开扩展功能时 立即为其请求的每个网站 提供完全访问权限 这可能会要求你 预先牺牲隐私以体验扩展功能 但是Safari浏览器的目标更高 通过为网页扩展功能用户 提供透明度和控制权 该扩展功能仅在用户同意时 才允许访问网站 你早些时候 通过“海洋创作者”瞥见了这一点 当我打开它时 它并没有立即开始修改我的页面 但是只有当我明确告诉 Safari浏览器 “是的 我想在这里 使用这个扩展功能 我愿意让它获得权限” 它才能这样做 一旦我为扩展功能提供访问权限 Safari浏览器就会在标签页栏中 告诉我我在此页面上 执行了一个扩展功能 因此我知道该扩展功能 可能会在此处查看我的网页浏览 但是 如果我进到任何 尚未允许扩展功能访问的网站 该指示就会消失 而且我知道 扩充功能没有在此页面上执行 也看不到我在这里做什么 让我们更详细地看看这个权限模型 同样 用户选择你的扩展功能 在特定网站上使用 Safari浏览器将通过 显示一个对话框 来征求用户的同意 该对话框明确地 说明扩展功能试图访问的网站 当用户通过在动作选单中选择它 或使用其任何键盘快捷键 来调用你的扩展功能时 就会发生这种情况 任何隐私敏感的API 都需要此同意才能运作 具体来说 任何显示网址 或标签页标题的API 只会包括此信息 如果你的扩展功能有该网址的权限 Cookies API 只会让你的扩展功能 读取和写入你的扩展功能 有权访问的网站的cookie 并且注入JavaScript和样式表 只允许在网站上 你猜对了 你的扩展功能有权限 如果你扩展功能的脚本 在你的扩展功能 没有所需的权限 但还没有询问用户时 调用了任何一个API Safari浏览器会等待调用 你的完成处理程序 并在屏幕顶部显示一个 无中断的横幅 这让用户知道你的扩展功能 需要更多访问权限 然后用户可以审查 你的扩展功能请求的网站集 他们可以决定允许 或拒绝访问这些网站 你应该避免以这种方式请求 超出扩展功能真正需要的更多权限 对于某些类型的扩展功能 这种考虑权限的方式 可能超出你的需要 例如 在用户访问任何标签页时 共享或注释单个网页的扩展功能 不需要对网站的完全访问权限 而是他们只需要 一次为用户做一件事的权限 对于那些 称为activeTab权限的扩展功能 有一个很好的解决方案 当你的扩展功能 请求activeTab权限时 Safari浏览器将自动授予 你对用户 明确使用你的扩展功能的 标签页的扩展功能权限 并且此权限将仅限于 当前标签页中的当前网站 因此 如果用户将该标签页带到 其他网站 它就会被撤销 Safari浏览器在授予此权限时 不会显示提示 因为不需要用户的长期承诺

要采用此功能 只需将activeTab 添加到清单的允许部分 所有这一切都是说 在Safari浏览器中 用户始终可以控制 他们的扩展功能 可以在哪些网站上运作 因此请注意 你的扩展功能不会自动 在用户访问的每个页面上运作 对于许多扩展功能 activeTab权限 是一种很好的方式 可以访问用户 正在使用你的扩展功能的页面 而不会对除此之外的 任何访问进行窃听 所有这些概念 在我们支持Safari浏览器网页 扩展功能的所有平台上都是相同的 要在macOS上查看此操作 并仔细查看更新扩展功能 以使用activeTab 请查看 WWDC 2020中的 《认识Safari浏览器网页扩展功能》 这就是Safari浏览器 网页扩展功能的 隐私保护权限模型 连同我今天介绍的所有其他内容 我希望这能让你更全面地了解 iOS上的 Safari浏览器网页扩展功能 以及可用于构建它们的工具 我们很高兴看到将在iOS 15上 为Safari浏览器 带来的网页扩展功能体验 包括我们今天在Mac上 已经喜欢的许多扩展功能 以及尚未推出的 出色新扩展功能 因此 如果你是扩展功能开发的新手 我鼓励你查看与本次课程 相关的连结资源 在那里 你能找到可以下载 并亲自试用的示范代码 你可以阅读到更多关于网页扩展功能 API的信息 在Apple的开发人员文档 和MDN网页文件中 如果你已经开发了网页扩展功能 为其他浏览器 或Mac上的Safari浏览器 我鼓励你尝试使用Xcode 13中的 Safari浏览器网页扩展功能转换器 轻松将你的扩展功能带到iOS 如果你有错误报告、建议 或兼容性问题等反馈 我鼓励你在以下网站发送反馈 feedbackassistant.apple.com 如果你想与我们取得联系 或有任何疑问 也可以通过Apple开发者论坛 与我们联系 最后 我想再次推荐你 可能感兴趣的另外两个课程 探索Safari浏览器 网页扩展功能改进将教你 有关Safari浏览器网页扩展功能的 一些最新API Safari浏览器15设计将向你展示 如何让你的网页内容 在iOS 15的Safari浏览器中 看起来很棒 感谢收看 尽情享受WWDC [欢快的音乐]