返回> 网站首页

Safari 扩展开发的准备工作

yoours2011-03-02 21:25:06 阅读 1306

简介一边听听音乐，一边写写文章。

首先,开发Safari扩展是免费的，开发Safari扩展,也不需要你学习什么新的技术或是新的编程语言,只要你具有标准的HTML/CSS/JavaScript相关技术就可以了。

启用扩展功能

在Safari 5缺省状态下扩展功能是关闭的,用户需要手工开启这项功能。打开Safari菜单中的"编辑",再点击"偏好设置"菜单选项,在"高级"这个选项页中勾选底部的"在菜单中显示开发菜单"选项。

然后就能从Safari的顶级菜单看到一个独立的"开发"菜单项,从中选择"启用扩展"就大功告成了!

一、启用扩展功能

接下来同样在”开发”菜单中选择”显示扩展创建器(Show Extension Builder)”,就能打开Safari为开发人员准备的扩展开发功能了,点击左下角的”+”按钮就能创建一个新扩展或是打开一个已存在的扩展项目。

让我们回到Safari菜单中的"编辑"里的"偏好设置"菜单选项,这时我们就能在"高级"的选项页旁边看到新增的"扩展"选项页了。由于现在尚未安装任何扩展,所以当前列表是空的,让我们在添加了扩展之后再回来看看发生了什么变化。

二、注册Apple ID并获取Safari扩展开发的签名证书

接下来的工作是,作为一个Safari扩展的开发者,你需要去Apple的网站上注册一个免费的Apple ID (http://developer.apple.com/programs/safari/),此处步骤省略,请跟随Apple注册向导逐步完成即可.接着使用这个Apple ID登录Safari开发者网站,创建一个开发中要使用的签名证书(https://developer.apple.com/safari/certificates/index.action),选择左边标签页的第二个标签(Request Certificates)

创建签名证书

需要注意的是,在Windows和Mac上面的申请证书步骤略有不同,本文中将以Mac环境为例,Windows环境中的步骤请跟随网站上的申请向导逐步完成即可。

在所用的开发机上安装签名证书同样需要注意的是,在Windows和Mac上的签名证书步骤也略有不同。在Windows环境下直接点击生成的证书文件,系统即可自动安装好此证书。而Mac环境下签名证书的步骤是个向导过程,本文写作时,在选择证书安装分类时,在Mac下应选择"登录"而不是"系统"分类。而在Windows环境下有时候Safari不能正常识别出安装好的签名证书,请参看官方网站的相关指引做相应的修改。

安装签名证书

Safari成功识别出安装的签名证书

三、如何制作Safari扩展

好了,通过上面两部分的介绍,相信您已经对Safari扩展有了个大致的了解,也为此准备好了开发环境。在动手编写第一个扩展前,让我们先来了解一下Safari扩展的框架结构及相应开发工具吧。

1. Safari扩展框架结构

我们知道,在Safari扩展中,我们可以如下几个部分来提供扩展功能:

工具栏按钮

扩展工具条

上下文关联菜单

注入(JavaScript)脚本

注入样式表单

而Safari扩展框架中其实是存在了一条分割线,将整个体系结构分为了两个部分:

Safari应用层:包含工具条按钮,扩展工具条,页面标签,页面窗口,上下文菜单等

页面内容层:包含修改页面内容的JavaScript和CSS

而这两部分不能直接调用对方的代码,需要通过给对方发送消息,再由对方的消息处理方法来调用所需的代码。当然,不是每一个Safari扩展都需要做这样的消息调用,例如简单的"关闭网页"按钮扩展就不需要和页面内容层交互,也就不需要消息调用及代理等处理逻辑了。

四、Safari扩展开发工具介绍

接下来我们来看一下Apple为我们提供的开发工具,不是XCode这样的大家伙,也不是让你从零开始完全手工编写所有的代码文件,部署脚本和打包程序。Apple在Safari 5里内嵌了一个叫做"扩展创建器"的工具来简化开发/打包及部署步骤。打开Safari,选择"开发"菜单,再选择"显示扩展创建器"就能看到它了。

五、 Windows下证书安装问题

创建文件：certreq.txt，内容如下：

[NewRequest]

Subject="cn=Safari Developer,o=User"

RequestType=pkcs10

KeyLength=2048

Exportable=TRUE

保存文件后，运行cmd.exe。

接下来创建你的证书请求文件，输入命令：

格式：

certreq -new \<path>\certreq.txt \<path>\newcsr.pem

例子：