区块链技术博客
www.b2bchain.cn

用 Web 技术为 Safari 编写扩展求职学习资料

D0b2wT.gif

本文介绍了用 Web 技术为 Safari 编写扩展求职学习资料,有助于帮助完成毕业设计以及求职,是一篇很好的资料。

对技术面试,学习经验等有一些体会,在此分享。

Session 10665, Meet Safari Web Extensions

今年(2020)苹果宣布引入一种新的 Safari 扩展类型,这种类型使用 Web 技术来为 macOS 上的 Safari 增强功能。在进入正题之前,让我们先回顾下目前 Safari 业已存在的扩展生态系统。目前包含以下类型的扩展;

  • 内容拦截扩展(支持 iOS、macOS)
  • 分享扩展(支持 iOS、macOS)
  • Safari App 扩展(只支持macOS)

现在的 Safari 插件开发对于熟悉 Objective-c 或者 Swift 的开发者来说非常容易入门上手,但事实上,熟悉 JavaScript、HTML 和 CSS 的 web 开发者要比熟悉 Objective-C 或者 Swift 的开发者多的多;而且除了 Safari 插件外,其他主流的浏览器的插件技术都是基于 HTML 等 web 技术来构建(事实上,Safari 扩展在历史上也是可以用 Web 技术来实现的)。

近年来,Apple 在思考如何把更多的 iOS App 的生态引入到 macOS 的生态,所以他们引入了 Mac
Catalyst 技术作为桥接;同样的,如果需要把其他浏览器的插件生态导入到 Safari 的生态,不得不重新启用 web 技术来支持这个目标;所以 Safari Web 插件采用了业界浏览器插件开发的事实标准。使用和其他浏览器插件一样的接口,有助于消除开发者的学习成本。同时,苹果的插件技术选型,让从其他浏览器的插件转化为 Safari Web 插件成为顺理成章的事情 ——把 Safari App Extension升级为Safari Web Extension不是基于技术优劣的选择而是基于市场的考虑。
Safari Web Extension 开发插件技术栈类似其他浏览器上的插件开发,同时也符合苹果一直在强调的隐私控制规范。

下面将介绍的内容如下;

  1. 如何创建 Safari Web 扩展
  2. 重视隐私和权限控制
  3. 如何调试插件
  4. 和 App 通讯的方式

本文不涉及如何移植其他浏览器插件

在开始编写第一个 Safari Web Extension 之前,我们需要了解下,Safari Web Extension 是如何打包、安装到 Safari 里的。Safari Web Extension 必须包含在 Native App 内。当用户从 App Store 下载到电脑后,插件会被自动安装到 Safari 里。

如何创建 Safari Web 扩展

在编写插件之前,你需要 Xcode 12,但Safari Web Extension 是运行在 Safari 14 上的,所以你还需要升级你的 macOS 到 11.0 macOS Big Sur(macOS 10.15 据说也可以,没有尝试)。
创建 Safari Web Extension 有两种途径,一种是为原有的 App 创建一个扩展(Safari Extension);或创建 Safari Extension App ,同时创建一个宿主 App 和 扩展。这里我们采用第二种方式。

依次选择菜单 File -> NewAnd Target -> Safari Extension App,
用 Web 技术为 Safari 编写扩展

创建 Safari Extension App

Xcode 会自动创建好模板的目录结构,
用 Web 技术为 Safari 编写扩展
从目录结构上看,一种分为 3 部分。
用 Web 技术为 Safari 编写扩展

图例2

  • 宿主 App,当宿主 App 启动时可以执行一些 macOS 特有能力的操作,如在 App 界面内做检索、分享等操作。主要文件,ViewController.swift
  • Native Extension 部分。它有部分 macOS 平台的接口的执行权限,和 宿主 App 拥有各自独立的沙盒。最大的区别是它不能有自己的界面。主要文件,SafariWebExtensionHandler.swift
  • Extension Web 部分。它是和网页打交道的主战场,包括展示自定义界面、修改当前活动网页内容,并保存部分信息到另外两部分等操作。主要文件,_localesiconsmanifest.jsonbackground.jscontent.jspopup 等。

其中最最重要的是 Extension Web 部分,我们打开 MDN Web Extensions 查看插件开发的事实规范,来仔细研究下:

分为两部分

一,manifest 文件关键字段释义

manifest.json 是每个扩展都必须包含的文件,用来指定扩展的元数据,如名字、版本,一些扩展的功能点。这个文件的格式是 jsonc,即可以使用注释

{ "extension_version": 1 //  这里是 json 的注释 }

单纯的 JSON 格式不支持注释语法。重要字段整理如下:

关键字段 定义和常用值
default_locale 指定插件文案支持的语言,用来处理国际化
icons 指定在 macOS 和 Safari 各个地方需要显示的图标,建议包括 1024 * 1024 尺寸的。目前使用 Xcode 的模板生成的 manifest 文件是不包含的,需要手动加上去。
background background 里指定在 Safari 运行期间,独立于页面生命周期(甚至是独立于浏览器 windows)的 JS代码,这些代码可以使用所有 Web Extension APIs 的接口;可以访问相同的 window 对象。 除了最常见的 scripts 字段外,还支持 page 字段,他们两是互斥的。
content_scripts content_scripts 定义了页面如何注入 JS 的规则,常见的规则如代码示例1,指定了哪些页面注入哪些 JS 文件。这些 JS 会被注入到目标 Web 页面,去操作目标页面;同时支持注入 JS 和 CSS(目前不支持 CSS);可以指定 JS 注入的时机,由 run_at 字段来指定;同时支持使用 contentScripts 接口动态注册
permissions permissions 是向 Safari 浏览器申请特定的访问权限; 浏览器会帮助我们在用户界面提示用户授权。包括三类权限:1. 适用的网页;2. 可调用 API 范围;3. activeTab 权限
browser_action browser_action 在浏览器上的 toolbar 区域添加一个按钮,点击后会打开一个网页弹窗或者被 background scripts 响应;它的主要目的是处理和具体页面无关的功能逻辑;
page_action page_action 在浏览器上的 URLBar 区域添加一个按钮(注意和 toolbar 的区别),点击后会打开一个网页弹窗或者被 background scripts 响应;主要目的是触发特定页面的逻辑;

代码示例1

"content_scripts": [   {     "matches": ["*://*.mozilla.org/*"],     "js": ["borderify.js"]   } ]

2. 重要的 API 接口释义

WebExtensions 的接口,在background scripts,browser scripts,page scripts,sidebars 等页面里都可以调用;其中一小部分可以在content scripts里使用。

越是强大的 APIs,在使用之前越需要获得用户的授权,这些授权通常在安装插件时,会提示用户。申请权限保持最小范围原则,越少的权限更容易获得用户的授权。

可用 APIs 对象有;activeTab, alarms, background, bookmarks, browserSettings, browsingData, captivePortal, clipboardRead, clipboardWrite, contentSettings, contextMenus, contextualIdentities, cookies, debugger, dns, downloads, downloads.open, find, geolocation, history, identity, idle, management, menus, menus.overrideContext, nativeMessaging, notifications, pageCapture, pkcs11, privacy, proxy, search, sessions, storage, tabHide, tabs, theme, topSites, unlimitedStorage, webNavigation, webRequest, webRequestBlocking,

在 JS 里调用时,需要调用 browser 命名空间,如

function logTabs(tabs) {   console.log(tabs) } // 这里 api 调用时,传入回调的写法;可用和下面使用 promise 的相比较。 browser.tabs.query({currentWindow: true}, logTabs)

大部分的 APIs 都提供使用 callback 获取返回值和返回 promise 的两种方法。把上面的代码改为使用 promise 的实现;
“`javascript
function logTabs(tabs) {

Session 10665, Meet Safari Web Extensions

今年(2020)苹果宣布引入一种新的 Safari 扩展类型,这种类型使用 Web 技术来为 macOS 上的 Safari 增强功能。在进入正题之前,让我们先回顾下目前 Safari 业已存在的扩展生态系统。目前包含以下类型的扩展;

  • 内容拦截扩展(支持 iOS、macOS)
  • 分享扩展(支持 iOS、macOS)
  • Safari App 扩展(只支持macOS)

现在的 Safari 插件开发对于熟悉 Objective-c 或者 Swift 的开发者来说非常容易入门上手,但事实上,熟悉 JavaScript、HTML 和 CSS 的 web 开发者要比熟悉 Objective-C 或者 Swift 的开发者多的多;而且除了 Safari 插件外,其他主流的浏览器的插件技术都是基于 HTML 等 web 技术来构建(事实上,Safari 扩展在历史上也是可以用 Web 技术来实现的)。

近年来,Apple 在思考如何把更多的 iOS App 的生态引入到 macOS 的生态,所以他们引入了 Mac
Catalyst 技术作为桥接;同样的,如果需要把其他浏览器的插件生态导入到 Safari 的生态,不得不重新启用 web 技术来支持这个目标;所以 Safari Web 插件采用了业界浏览器插件开发的事实标准。使用和其他浏览器插件一样的接口,有助于消除开发者的学习成本。同时,苹果的插件技术选型,让从其他浏览器的插件转化为 Safari Web 插件成为顺理成章的事情 ——把 Safari App Extension升级为Safari Web Extension不是基于技术优劣的选择而是基于市场的考虑。
Safari Web Extension 开发插件技术栈类似其他浏览器上的插件开发,同时也符合苹果一直在强调的隐私控制规范。

下面将介绍的内容如下;

  1. 如何创建 Safari Web 扩展
  2. 重视隐私和权限控制
  3. 如何调试插件
  4. 和 App 通讯的方式

本文不涉及如何移植其他浏览器插件

在开始编写第一个 Safari Web Extension 之前,我们需要了解下,Safari Web Extension 是如何打包、安装到 Safari 里的。Safari Web Extension 必须包含在 Native App 内。当用户从 App Store 下载到电脑后,插件会被自动安装到 Safari 里。

如何创建 Safari Web 扩展

在编写插件之前,你需要 Xcode 12,但Safari Web Extension 是运行在 Safari 14 上的,所以你还需要升级你的 macOS 到 11.0 macOS Big Sur(macOS 10.15 据说也可以,没有尝试)。
创建 Safari Web Extension 有两种途径,一种是为原有的 App 创建一个扩展(Safari Extension);或创建 Safari Extension App ,同时创建一个宿主 App 和 扩展。这里我们采用第二种方式。

依次选择菜单 File -> NewAnd Target -> Safari Extension App,
用 Web 技术为 Safari 编写扩展

创建 Safari Extension App

Xcode 会自动创建好模板的目录结构,
用 Web 技术为 Safari 编写扩展
从目录结构上看,一种分为 3 部分。
用 Web 技术为 Safari 编写扩展

图例2

  • 宿主 App,当宿主 App 启动时可以执行一些 macOS 特有能力的操作,如在 App 界面内做检索、分享等操作。主要文件,ViewController.swift
  • Native Extension 部分。它有部分 macOS 平台的接口的执行权限,和 宿主 App 拥有各自独立的沙盒。最大的区别是它不能有自己的界面。主要文件,SafariWebExtensionHandler.swift
  • Extension Web 部分。它是和网页打交道的主战场,包括展示自定义界面、修改当前活动网页内容,并保存部分信息到另外两部分等操作。主要文件,_localesiconsmanifest.jsonbackground.jscontent.jspopup 等。

其中最最重要的是 Extension Web 部分,我们打开 MDN Web Extensions 查看插件开发的事实规范,来仔细研究下:

分为两部分

一,manifest 文件关键字段释义

manifest.json 是每个扩展都必须包含的文件,用来指定扩展的元数据,如名字、版本,一些扩展的功能点。这个文件的格式是 jsonc,即可以使用注释

{ "extension_version": 1 //  这里是 json 的注释 }

单纯的 JSON 格式不支持注释语法。重要字段整理如下:

关键字段 定义和常用值
default_locale 指定插件文案支持的语言,用来处理国际化
icons 指定在 macOS 和 Safari 各个地方需要显示的图标,建议包括 1024 * 1024 尺寸的。目前使用 Xcode 的模板生成的 manifest 文件是不包含的,需要手动加上去。
background background 里指定在 Safari 运行期间,独立于页面生命周期(甚至是独立于浏览器 windows)的 JS代码,这些代码可以使用所有 Web Extension APIs 的接口;可以访问相同的 window 对象。 除了最常见的 scripts 字段外,还支持 page 字段,他们两是互斥的。
content_scripts content_scripts 定义了页面如何注入 JS 的规则,常见的规则如代码示例1,指定了哪些页面注入哪些 JS 文件。这些 JS 会被注入到目标 Web 页面,去操作目标页面;同时支持注入 JS 和 CSS(目前不支持 CSS);可以指定 JS 注入的时机,由 run_at 字段来指定;同时支持使用 contentScripts 接口动态注册
permissions permissions 是向 Safari 浏览器申请特定的访问权限; 浏览器会帮助我们在用户界面提示用户授权。包括三类权限:1. 适用的网页;2. 可调用 API 范围;3. activeTab 权限
browser_action browser_action 在浏览器上的 toolbar 区域添加一个按钮,点击后会打开一个网页弹窗或者被 background scripts 响应;它的主要目的是处理和具体页面无关的功能逻辑;
page_action page_action 在浏览器上的 URLBar 区域添加一个按钮(注意和 toolbar 的区别),点击后会打开一个网页弹窗或者被 background scripts 响应;主要目的是触发特定页面的逻辑;

代码示例1

"content_scripts": [   {     "matches": ["*://*.mozilla.org/*"],     "js": ["borderify.js"]   } ]

2. 重要的 API 接口释义

WebExtensions 的接口,在background scripts,browser scripts,page scripts,sidebars 等页面里都可以调用;其中一小部分可以在content scripts里使用。

越是强大的 APIs,在使用之前越需要获得用户的授权,这些授权通常在安装插件时,会提示用户。申请权限保持最小范围原则,越少的权限更容易获得用户的授权。

可用 APIs 对象有;activeTab, alarms, background, bookmarks, browserSettings, browsingData, captivePortal, clipboardRead, clipboardWrite, contentSettings, contextMenus, contextualIdentities, cookies, debugger, dns, downloads, downloads.open, find, geolocation, history, identity, idle, management, menus, menus.overrideContext, nativeMessaging, notifications, pageCapture, pkcs11, privacy, proxy, search, sessions, storage, tabHide, tabs, theme, topSites, unlimitedStorage, webNavigation, webRequest, webRequestBlocking,

在 JS 里调用时,需要调用 browser 命名空间,如

function logTabs(tabs) {   console.log(tabs) } // 这里 api 调用时,传入回调的写法;可用和下面使用 promise 的相比较。 browser.tabs.query({currentWindow: true}, logTabs)

大部分的 APIs 都提供使用 callback 获取返回值和返回 promise 的两种方法。把上面的代码改为使用 promise 的实现;
“`javascript
function logTabs(tabs) {

Session 10665, Meet Safari Web Extensions

今年(2020)苹果宣布引入一种新的 Safari 扩展类型,这种类型使用 Web 技术来为 macOS 上的 Safari 增强功能。在进入正题之前,让我们先回顾下目前 Safari 业已存在的扩展生态系统。目前包含以下类型的扩展;

  • 内容拦截扩展(支持 iOS、macOS)
  • 分享扩展(支持 iOS、macOS)
  • Safari App 扩展(只支持macOS)

现在的 Safari 插件开发对于熟悉 Objective-c 或者 Swift 的开发者来说非常容易入门上手,但事实上,熟悉 JavaScript、HTML 和 CSS 的 web 开发者要比熟悉 Objective-C 或者 Swift 的开发者多的多;而且除了 Safari 插件外,其他主流的浏览器的插件技术都是基于 HTML 等 web 技术来构建(事实上,Safari 扩展在历史上也是可以用 Web 技术来实现的)。

近年来,Apple 在思考如何把更多的 iOS App 的生态引入到 macOS 的生态,所以他们引入了 Mac
Catalyst 技术作为桥接;同样的,如果需要把其他浏览器的插件生态导入到 Safari 的生态,不得不重新启用 web 技术来支持这个目标;所以 Safari Web 插件采用了业界浏览器插件开发的事实标准。使用和其他浏览器插件一样的接口,有助于消除开发者的学习成本。同时,苹果的插件技术选型,让从其他浏览器的插件转化为 Safari Web 插件成为顺理成章的事情 ——把 Safari App Extension升级为Safari Web Extension不是基于技术优劣的选择而是基于市场的考虑。
Safari Web Extension 开发插件技术栈类似其他浏览器上的插件开发,同时也符合苹果一直在强调的隐私控制规范。

下面将介绍的内容如下;

  1. 如何创建 Safari Web 扩展
  2. 重视隐私和权限控制
  3. 如何调试插件
  4. 和 App 通讯的方式

本文不涉及如何移植其他浏览器插件

在开始编写第一个 Safari Web Extension 之前,我们需要了解下,Safari Web Extension 是如何打包、安装到 Safari 里的。Safari Web Extension 必须包含在 Native App 内。当用户从 App Store 下载到电脑后,插件会被自动安装到 Safari 里。

如何创建 Safari Web 扩展

在编写插件之前,你需要 Xcode 12,但Safari Web Extension 是运行在 Safari 14 上的,所以你还需要升级你的 macOS 到 11.0 macOS Big Sur(macOS 10.15 据说也可以,没有尝试)。
创建 Safari Web Extension 有两种途径,一种是为原有的 App 创建一个扩展(Safari Extension);或创建 Safari Extension App ,同时创建一个宿主 App 和 扩展。这里我们采用第二种方式。

依次选择菜单 File -> NewAnd Target -> Safari Extension App,
用 Web 技术为 Safari 编写扩展

创建 Safari Extension App

Xcode 会自动创建好模板的目录结构,
用 Web 技术为 Safari 编写扩展
从目录结构上看,一种分为 3 部分。
用 Web 技术为 Safari 编写扩展

图例2

  • 宿主 App,当宿主 App 启动时可以执行一些 macOS 特有能力的操作,如在 App 界面内做检索、分享等操作。主要文件,ViewController.swift
  • Native Extension 部分。它有部分 macOS 平台的接口的执行权限,和 宿主 App 拥有各自独立的沙盒。最大的区别是它不能有自己的界面。主要文件,SafariWebExtensionHandler.swift
  • Extension Web 部分。它是和网页打交道的主战场,包括展示自定义界面、修改当前活动网页内容,并保存部分信息到另外两部分等操作。主要文件,_localesiconsmanifest.jsonbackground.jscontent.jspopup 等。

其中最最重要的是 Extension Web 部分,我们打开 MDN Web Extensions 查看插件开发的事实规范,来仔细研究下:

分为两部分

一,manifest 文件关键字段释义

manifest.json 是每个扩展都必须包含的文件,用来指定扩展的元数据,如名字、版本,一些扩展的功能点。这个文件的格式是 jsonc,即可以使用注释

{ "extension_version": 1 //  这里是 json 的注释 }

单纯的 JSON 格式不支持注释语法。重要字段整理如下:

关键字段 定义和常用值
default_locale 指定插件文案支持的语言,用来处理国际化
icons 指定在 macOS 和 Safari 各个地方需要显示的图标,建议包括 1024 * 1024 尺寸的。目前使用 Xcode 的模板生成的 manifest 文件是不包含的,需要手动加上去。
background background 里指定在 Safari 运行期间,独立于页面生命周期(甚至是独立于浏览器 windows)的 JS代码,这些代码可以使用所有 Web Extension APIs 的接口;可以访问相同的 window 对象。 除了最常见的 scripts 字段外,还支持 page 字段,他们两是互斥的。
content_scripts content_scripts 定义了页面如何注入 JS 的规则,常见的规则如代码示例1,指定了哪些页面注入哪些 JS 文件。这些 JS 会被注入到目标 Web 页面,去操作目标页面;同时支持注入 JS 和 CSS(目前不支持 CSS);可以指定 JS 注入的时机,由 run_at 字段来指定;同时支持使用 contentScripts 接口动态注册
permissions permissions 是向 Safari 浏览器申请特定的访问权限; 浏览器会帮助我们在用户界面提示用户授权。包括三类权限:1. 适用的网页;2. 可调用 API 范围;3. activeTab 权限
browser_action browser_action 在浏览器上的 toolbar 区域添加一个按钮,点击后会打开一个网页弹窗或者被 background scripts 响应;它的主要目的是处理和具体页面无关的功能逻辑;
page_action page_action 在浏览器上的 URLBar 区域添加一个按钮(注意和 toolbar 的区别),点击后会打开一个网页弹窗或者被 background scripts 响应;主要目的是触发特定页面的逻辑;

代码示例1

"content_scripts": [   {     "matches": ["*://*.mozilla.org/*"],     "js": ["borderify.js"]   } ]

2. 重要的 API 接口释义

WebExtensions 的接口,在background scripts,browser scripts,page scripts,sidebars 等页面里都可以调用;其中一小部分可以在content scripts里使用。

越是强大的 APIs,在使用之前越需要获得用户的授权,这些授权通常在安装插件时,会提示用户。申请权限保持最小范围原则,越少的权限更容易获得用户的授权。

可用 APIs 对象有;activeTab, alarms, background, bookmarks, browserSettings, browsingData, captivePortal, clipboardRead, clipboardWrite, contentSettings, contextMenus, contextualIdentities, cookies, debugger, dns, downloads, downloads.open, find, geolocation, history, identity, idle, management, menus, menus.overrideContext, nativeMessaging, notifications, pageCapture, pkcs11, privacy, proxy, search, sessions, storage, tabHide, tabs, theme, topSites, unlimitedStorage, webNavigation, webRequest, webRequestBlocking,

在 JS 里调用时,需要调用 browser 命名空间,如

function logTabs(tabs) {   console.log(tabs) } // 这里 api 调用时,传入回调的写法;可用和下面使用 promise 的相比较。 browser.tabs.query({currentWindow: true}, logTabs)

大部分的 APIs 都提供使用 callback 获取返回值和返回 promise 的两种方法。把上面的代码改为使用 promise 的实现;
“`javascript
function logTabs(tabs) {

部分转自互联网,侵权删除联系

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » 用 Web 技术为 Safari 编写扩展求职学习资料
分享到: 更多 (0)
D0b2wT.gif

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们