创建一个简单的Safari扩展

之前做过一个把网址转为二维码的Chrome 扩展,想在 Safari 中也使用这样的扩展,搜索了一下貌似没有同类型的,所以自己打造了一个 Safari 扩展,并且把过程记录下来。 获得开发者证书 要建立一个 Safari 扩展,首先需要生成一个开发者证书。访问Apple 开发者中心,加入 Safari Developer Program,加入开发者计划是免费的。加入开发者计划后就可以生成证书了,访问Certificates, Identifiers & Profiles,点击右上角的加号,生成一个开发者证书。成功后将证书下载到本地并导入 Keychain Access 中。 在 Safari 中创建扩展 打开 Safari,在菜单中选择Safari—Preferences-Advanced,勾选最下方的Show Develop menu in menu bar,如图。 这时在菜单栏中会出现Develop菜单,选择Develope-Show Extension Builder,打开扩展编辑器,点击左下角的*+,选择New Extension*,保存到一个位置(例如 Desktop)。 这时,Desktop 文件夹中会出现一个demo.safariextension文件夹,这个文件夹里的内容就是我们生成的 Safari 扩展的根目录。如果前面的开发者证书已经正确导入,扩展的介绍里会出现 Safari 开发者的 Id。 编辑扩展基本信息 扩展建立后,下面会有一票东西需要填写,首先填写扩展的基本信息。 Display Name: 扩展的显示名称 Author: 作者名字 Description: 插件介绍 Website: 插件网站 Bundle Identifier: 这里需要填写唯一 id Update Manifest: 这里需要填写一个 plist 格式文件的地址,Apple 会定期检查这个地址中的 Version,如果有升级,就会访问插件的下载地址更新插件,当然,如果插件只是自用而不提交 Safari Extensions Gallery 的话,这一栏可以不填,plist 文件格式如下: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> <plist version="1.0"> <dict> <key>Extension Updates</key> <array> <dict> <key>CFBundleIdentifier</key> <string>com.zangzhiya.url2qrcode</string> <key>Developer Identifier</key> <string>开发者ID</string> <key>CFBundleVersion</key> <string>1</string> <key>CFBundleShortVersionString</key> <string>1.0</string> <key>URL</key> <string>http://simpleapples.com/images/url2qrcode-safari/url2qrcode.safariextz</string> </dict> </array> </dict> </plist> Access Level: 这里需要选择插件对页面访问的权限,比如我们我们要做的 URL 转二维码插件,需要获取当前 Tab 的 URL,那么这里需要选择 ALL ...

十月 23, 2014 · 1 分钟 · Zhiya

AS3下载管理器

工作中需要一个应用内的全局下载管理器,于是使用 AS3 实现了一个。 使用一个数组来存储下载列表,当向列表中添加一个新的下载项时,会检查列表,如果有未下载项,则下载该项,下载完成后再次检查列表,当目前有进行中的下载时,不添加新的下载进程,以保证同时只有一个下载进程。 github: https://github.com/simpleapples/AS3DownloadManager

四月 24, 2013 · 1 分钟 · Zhiya

browser.js-浏览器和操作系统识别

本人制作的浏览器识别 js。 将 browser-min.js 导入到 html 的头文件中,会返回全局变量 browser,其中 browser.browser 代表浏览器,browser.engine 代表浏览器内核,browser.version 代表浏览器版本,browser.system 代表操作系统。 未压缩版本下载:http://labs.simpleapples.com/browser/browser.js.zip(6.025kb) 已压缩版本下载:http://labs.simpleapples.com/browser/browser-min.js.zip(1.387kb) 演示地址:http://labs.simpleapples.com/browser github: http://github.com/simpleapples/browser.js

十二月 11, 2012 · 1 分钟 · Zhiya

MagicSearch

晚上看到一个 OSX 上的应用,叫Alfred,是一个类似 spotlight 的工具,但比 spotlight 要强大很多。 不仅可以在里面搜本地程序,而且在搜索的内容前加“>”就可以输命令,可以直接输入算式,也可以自定义搜索引擎,采用诸如“google 你好世界”的方式搜索。 突发奇想,是不是用 Javascript 也可以实现? 于是,首先实现了多搜索引擎集成的功能。 不想用以前那种下拉菜单的形式,想用自动补全的形式,着实忙活了好长时间,算是把功能做出来了。 例如,输入“douban 平凡的世界”就可以在豆瓣搜索“平凡的世界”,输入“weibo 前端”就可以搜索“前端”相关的微博。 还可以输入“t”+回车,然后再输入关键字,就可以搜索淘宝了。 目前只加入了简单的几个搜索工具(因为帮我设计界面的 AlisterTT 同学只给我了这几个图标= =!): 微博、google、豆瓣、淘宝、亚马逊。 我给他起了个响亮的名字,MagicSearch,将来如果能做到手机客户端上当然更好了,应该会很有用。 还有很多东西和细节有待修改。而且计算器的功能也没有加进去,电脑快没电了,只能等到明天了。 先放个截图: 对了,还有演示地址(初步版本,轻拍): http://labs.simpleapples.com/magicsearch update1: 昨天晚上犯懒,没有把搜索引擎的图标和到一张图上,导致输入 amazon 等搜索引擎名字敲回车之后,右边的图标因为网速没有出来,现在和到一张上了。 另外放出 github 地址: http://github.com/simpleapples/magicsearch 至于进入其它搜索引擎之后如何不能返回默认的 google 搜索的时候,只要点击右边的搜索引擎图标就可以了。 update2: 添加字典、发电子邮件和计算四则运算功能。 字典功能:输入 dict 加上要查的单词或词。 发电子邮件功能:输入 mail 加上电子邮件地址。 四则运算功能:直接输入算式,见图。

十二月 1, 2012 · 1 分钟 · Zhiya

指南针WebApp

使用 javascript 制作了一个指南针的 WebApp。 监听了 DeviceOrientation 事件,设备在变换方位时会产生 alpha、beta、gamma 三个值,而其中的 alpha 值就是目前的角度值。 window.addEventListener('deviceorientation',function(event) { target.style.transform = 'rotate(' + event.alpha + ')'; },false); alpha 值以正北为 0°,顺时针增加到 360°,对应的就是指南针指针的旋转角度。 使用 css3 的 transfrom 属性就可以旋转指针。 最后对指南针的度数进行判断,计算出方向(如北偏东 XX 度,南偏西 XX 度等)。 只能在支持 DeviceOrientation 的浏览器上正常使用(mobile safari、android 4.0+ browser、mobile ) 演示地址: http://labs.simpleapples.com/compass GitHub: http://github.com/simpleapples/compass update1: 发现这个应用在 iPhone 下会出现将手机初始方向认成正北的问题。= =! 解决方法是使用 webkitCompassHeading 来获取角度,而不是 alpha 值。webkitCompassHeading 的值是设备方向和地磁北极的角度差,而 alpha 值是设备转动的角度。参见苹果文档: http://developer.apple.com/library/safari/#documentation/SafariDOMAdditions/Reference/DeviceOrientationEventClassRef/DeviceOrientationEvent/DeviceOrientationEvent.html 在安卓平台的 Opera 浏览器下 alpha 值就是设备和北极的角度差,可能是 Opera 对 html5 的支持比较好。

十一月 14, 2012 · 1 分钟 · Zhiya