新的用户界面及事件 使Safari扩展开发如虎添翼

本文将逐个介绍新引入的特性,并配以简单的代码实例,相信">开发人员会更易掌握。

Safari 一直对 Apple 来说是很重要的,近几年 Apple 更是频频出击:推出扩展功能,推出 Windows 版本,在 HTML5 的支持上也不遗余力。在 Safari 5.1 中引入了很多新特性,其中有些是需要配合 Mac OSX 的最新版本(Lion)才能最大的发挥它的特性,有些是跨平台通用的。这里我们可以先看几个例子:

阅读列表(reading list):Apple 终于在 Safari 上推出了类似于“稍后再读”的功能,这个功能有点类似与现
有的 “Read it later” 和 “Instapaper”,可以把网址先存在列表里等以后有时间的时候再翻出来
慢慢品读。不同点在于 “Read it later” 和 “Instapaper”的应用范围已经非常广泛了,在许多应用中都已经整合了这俩个服务,而且它们还提供了离线阅读的功能。而阅读列表的优势在于通过直接集成在 Apple 自家的浏览器中可以享受一些便利,
例如可以通过 iCloud 自动将桌面版 Safari 的阅读列表与 iOS 中的 Mobile Safari 无缝同步,对用户来说非常易用,而且通过与 Mac 应用的集成使得添加网址十分方便。 阅读器与 Mac 整合:通过和 Mac 的整合,Lion 系统中的很多应用里,都可以通过按住 Control 键再点击来把链接加入到阅读列表当中,非常方便。 扩展功能窗口(extension popover):在 Safari 的工具栏按钮上可以绑定浮动窗口,当点击工具栏按钮时可以弹出。 扩展菜单(extension menu):在 Safari 的工具栏中终于可以添加下拉菜单了。 Multi-Touch 手势:Safari 5.1 中终于将 iOS 中大家已经非常熟悉的 Multi-Touch 手势引入到了桌面版,这样在 Lion 下通过触摸板就可以双指开合来缩放网页上的文字和图片,也可以双指轻拍来自动缩放。当然也可以通过手势轻扫来前进和后退页面。 惯性滚动:iOS 上很赞的惯性滚动也被搬到了桌面版 Safari 上,当您用手势向上或者向下滚动时,即使手指已经离开触摸板,惯性滚动会让滚动继续维持少许,就像现实世界中的惯性滚动一样。

更多的 Safari 5.1 特性可以参考 Apple 官方的网址,这里就不一一列举了。让我们回到重点,Safari 5.1 对于扩展开发者来说,有什么变化呢?嗯,让我们从两个方面来看看吧,一方面是在 Safari 5.1 中新增加了哪些扩展事件,另一方面是新增加的扩展界面。

新增事件介绍

针对窗口 / 标签页的新增事件介绍

在之前的 Safari 版本中,我们可以通过 API 来打开一个窗口或者标签页,也能够获取到当前已经打开了的窗口和标签页。但是却不能获取到这些窗口和标签页的状态变化,比如我们想在标签页激活或者停用时做一些事情就不行,这无疑限制了扩展的功能。在 Safari 5.1 中,这一现状终于得到了改善,它对窗口 / 标签页的状态发生变化时 Safari 会触发相应的事件,我们的扩展中只要在适当的地方监听这些新增事件就可以了。这些事件包括:

打开 / 关闭 (Open/Close):当窗口 / 标签页第一次打开或者关闭时 Safari 会发送此事件给相应的对象 激活 / 非活跃 (Activate/Deactivate):当窗口 / 标签页被激活或者非活跃时 Safari 会发送此事件给相应的对象 导航前 (Before Navigate):当有新 URL 即将加载时 Safari 将会发送次事件给相应对象,在这里我们能在页面加载前做出判断来阻止某些网页。 导航 (Navigate):当新 URL 页面的主体加载完成时 ,Safari 将会发送次事件给相应对象

时间: 2024-10-29 11:22:25

新的用户界面及事件 使Safari扩展开发如虎添翼的相关文章

让Safari更好用,10款实用Safari扩展推荐

今天苹果正式宣布了支持从Mac App Store下载 Safari 扩展,Safari 扩展可以理解为专门服务于 Safari 的应用,它能增强浏览器的功能,提升我们的使用体验.本文介绍的 Safari 扩展目前还没有上架 Mac App Store,不过都能正常使用.关于已上架 Mac App Store 的 Safari 扩展,过两天我会单独出一篇文章来详细介绍. 其实 Safari 也有不少实用的扩展,虽然数量没有 Chrome 那么多,不过还是有一些值得拿出来跟大家分享的.今天我想跟大

RichFaces 4.0 Final发布 一种新的用户界面组件套件

如今,客户希望并且已经开始期望基于浏览器的应用程序提供桌面特性.RichFaces 是用于 JavaServer Faces(JSF)的一种新的用户界面组件套件.除了其他优点外, RichFaces 还提供内置的 JavaScript 和 Ajax 功能,从而满足客户期望.Joe Sam Shirah 根据最近的现场项目经验,将一些新的工具添加到您的工具箱中,包括通过 Facelet 使用 RichFaces 的常见设置,以及一些特定的组件示例. 虽然在初始阶段客户的应用程序可以只使用一个 se

weex-html5 扩展开发指引

Weex是一个高可扩展性的跨平台动态化开发方案,你可以在现有组件基础上定制自己需要的三端组件.你可以为Weex API模块添加新的方法,或者创建新的API模块和新的加载器.本文将介绍一些步骤和技巧用于帮助开发者更好的扩展weex-html5的组件,API或者加载器. 首先要明确的是,组件和API模块是基于weex的扩展,但是独立于weex,组件的定义本身是不需要依赖于weex的,这样有助于组件的分散化管理,去除中心化依赖. 其次,当你扩展一个组件,你需要同时扩展三端的组件(android, io

PHP扩展开发入门教程

 这篇文章主要介绍了PHP扩展开发入门教程,本文讲解了使用C语言在Linux系统下开发一个PHP扩展应该具备的最基本知识,需要的朋友可以参考下     PHP扩展开发 我准备在此系列博文中总结我有关PHP扩展开发的学习和感悟,力图简单清晰地描述在Linux系统下开发一个PHP扩展应该具备的最基本知识.水平较低,难免有错误,望指出. 准备工作 首先要获取一份PHP源码(可以从Github上签出,或者到官网上下载最新的稳定版),然后编译之.为了加快编译速度,我们推荐禁用所有额外的扩展(使用--dis

Firefox(火狐)浏览器扩展开发初探

        最近开发一个FF的扩展,自动完成公司的订餐操作,主要完成的功能很简单:登陆网站,执行一个特定操作,并在ff的状态栏内显示执行的成功或者失败的状态.以前没有写过FF扩展,需要从头学习,在完成这个扩展过程中,有些收获记录下来,一方面自己记录,另一方面也方便有此需求的同学.在整个开发过程中碰到一些问题,也走了一些弯路,希望对其他同学有所帮助.         由于是第一开发FF扩展,没什么经验,所以,第一步先去搜索些关于FF插件开发的文档.先几乎把所有关于FF插件开发的中文文档看个边,

Chrome(谷歌)浏览器扩展开发初探

        FF(火狐)浏览器插件已经完成了,确实也很好用,但是有些同学不习惯使用ff浏览器,喜欢使用谷歌浏览器,点击这里查看上篇问题.那么我们就开发一个chrome的扩展,实现订餐功能.         在FF浏览器扩展中,我们使用xul定义FF的界面,使用javascript实现处理逻辑,在谷歌浏览器中,我们同样不需要学习activeX,也不需要学习com,只是使用html和javascript即可实现开发谷歌浏览器扩展的功能,只是为了简单起见,我们这次手动点击按钮,出发订餐操作.   

PHP扩展开发入门教程_php实例

PHP扩展开发 我准备在此系列博文中总结我有关PHP扩展开发的学习和感悟,力图简单清晰地描述在Linux系统下开发一个PHP扩展应该具备的最基本知识.水平较低,难免有错误,望指出. 准备工作 首先要获取一份PHP源码(可以从Github上签出,或者到官网上下载最新的稳定版),然后编译之.为了加快编译速度,我们推荐禁用所有额外的扩展(使用--disable-all选项),但最好打开debug(使用--enable-debug选项)和线程安全(使用--enable-maintainer-zts),但

php扩展开发实例详解

h1. 一.自动化建立扩展框架 到源码ext目录下 帮助 1 ./ext_skel --extname=xiami_ext 生成如下几个文件文件列表: * CREDITS * EXPERIMENTAL * config.m4 * config.w32 * php_xiami_ext.h * tests * xiami_ext.c * xiami_ext.php .c文件就是C语言系列的源文件,而.h文件则是C语言的头文件,即C系列中存放函数和全局变量的文件.子程序不要定义在*.h中.函数定义要放

chrome扩展开发其他地方调用sendmessage里的response

问题描述 chrome扩展开发其他地方调用sendmessage里的response var sysconfig={}; chrome.runtime.sendMessage({type : 'getload'}, function(response){ sysconfig=response.configs; console.log(sysconfig);//可以打印出来 }); console.log(system);///打印为空对象 background.js里是 case 'getloa