很多现代的浏览器在地址栏的右边有个搜索框，默认的安装有 Google 搜索等。如下图所示

其实这是 OpenSearch 的一个应用，只要编写相应的微格式的 xml 文件，就可以制定相应的搜索框。

参考 OpenSearch 的定义文档 ，可以基本获得基本的 xml 格式。比如某个典型的的搜索 xml 文件可以这样指定。

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
    <InputEncoding>utf-8</InputEncoding>
    <ShortName>ShortName</ShortName>
    <Description>Description</Description>
    <Image type="image/vnd.microsoft.icon">favicon</Image>
    <Url type="text/html" template="http://who.am.i/search?word={searchTerms}"/>  
</OpenSearchDescription>

上面的 xml 文件很容易理解，除了固定的 xml 根以外，其他的定义从字面上就可以理解：

• InputEncoding 指定搜索的编码，根据网站的实际情况而定
• ShortName 这个是搜索的短名称，比如「Google 搜索」
• Description 针对这个搜索框的描述，比如「淘宝购物搜索 - 只有你想不到，没有你淘不到」
• Image 类似网页的 favicon ，用于标识搜索
• Url 这个是最重要的参数，指定搜索的链接。它有很多参数，一般使用 {searchTerms} 参数指定搜索词即可。参数 type="text/html" 注明返回的是页面（浏览器会跳转到这个页面），如果是其他格式就会使用相应默认程序打开（比如 type="application/rss+xml" 就会使用 RSS 阅读器打开）。

编写 OpenSearch 的 xml 格式就完成了，详细信息可以参阅其 OpenSearch 定义文档 。

下面要在页面中加入这个搜索，基本上可以分为两种方式。分别是页面的在 head 中加入 link 标记（类似 RSS），以及使用 Javascript 方式添加（比如定义某个按钮触发）。

加入 link 标记非常简单，格式如下

<link rel="search" type="application/opensearchdescription+xml" 
            href="http://who.am.i/search.xml" title="ShortName" />

与 RSS 相似，rel 和 type 是固定的，我们主要指定 href （上述 xml 的 url 路径，保险起见使用绝对路径，即 http:// 开头）以及 title （也就是搜索的短标题）即可。

就这样，在 Explorer 以及 Firefox 中打开这个页面就可以看见相应的菜单了，如图所示

使用 Javascript 添加比较麻烦（或许现在的情况会很好多）。我们主要会使用浏览器的扩展功能，在 Explorer 有个 window.external.AddSearchProvider 参数（ 详细文档 ）。

典型的调用方法如下

window.external.AddSearchProvider('http://who.am.i/search.xml');

参数中的链接就是上述 link 中的内容。在 Firefox 下可以使用

window.sidebar.addSearchEngine(
    "http://who.am.i/search.xml",  /* engine URL */
    "favicon.ico",  /* icon URL */
    "ShortName", /* engine name */
    "Description" );            /* category name */

参数和例子如示例代码中所述（ 官方文档 ）。值得注意的是在 Firefox2 版本以后已经「兼容」 Explorer 的 window.external.AddSearchProvider 调用方法（ 详细信息 ）。

那么我们对应的 Javascript 代码就可以这样编写（为了兼容 Firefox2 之前的版本，加入 else if 判断）

function addEngine()
{
    if (window.external || window.external.AddSearchProvider) {
        window.external.AddSearchProvider('http://who.am.i/search.xml');
    } else if (window.sidebar && window.sidebar.addSearchEngine) {
                window.sidebar.addSearchEngine(
                    "http://who.am.i/search.xml",
                    "favicon.ico",  /* icon URL */
                    "ShortName", /* engine name */
                    "Description" ); /* category name */
    }
}

这样，就可以将这个函数注册到某个链接或者按钮的点击事件中，就会跳出个确认框，如图

用户点击确认以后，就加入到浏览器搜索框中了。

--EOF--

Firefox3 即将发布 ， 支付宝 的兄弟们正在完善对于 Firefox 的支持，在这里表示关注和支持。

每个开 Blog 的兄弟都会时刻关注 Blog 上的留言，上次已经说道如何 使用 Gtalk 追踪网站的留言 。

在使用 Google 工具条时发现其实 Google 工具条本身也开放了 API 供用户调用。第一步要做的就是将用户留言做成 RSS 格式的输出（其实也就是 XML 格式，Wordpress 已经有这样的功能了）。

然后我们再写个针对 Google 工具条的 XML 文件即可。格式如下

<?xml version="1.0" encoding="utf-8"?>
<custombuttons xmlns="http://toolbar.google.com/custombuttons/">
    <button>
       <site>在这里设置点击按钮以后进入的网址</site>
       <title>我是按钮的标题</title>
       <description>我是按钮的描述</description>
       <feed refresh-interval="1800">RSS 地址</feed>
       <icon mode="base64" type="image/x-icon">
           base64 以后的 ico 文件内容
       </icon>
    </button>
</custombuttons>

具体的例子可以 参看这里 ，其中 title 与 description 不言而喻，是标题以及描述，最为重要的是 feed 标签。feed 的值就是任何的 RSS 链接，针对本文就是其留言的 RSS 地址。refresh-interval 属性是刷新的间隔时间，单位是秒。

然后我们可以根据 Google 工具栏提供的链接将我们已经做好的 XML 格式的按钮添加到 Google 工具条中。格式为

http://toolbar.google.com/buttons/add?url=<XML 文件 URL 地址>

访问这个生成的链接就可以加入到 Google 工具条了，效果如图上所示。比如

点击这里将 Gracecode.com 的文章加入 Google 工具条

最后，有关多的信息，可以参看 Google 工具条的 中文 API 文档 。

上次提到过跨域 Ajax 的调用问题 ，这次做个总结。众所周知，Javascript 有「同源策略」的限制。但有时候偏偏又要碰到 Ajax 跨域调用的问题，这个时候就需要些「特殊」的方法使脚本正常使用。

总结下目前所能想到的一些策略，具体的可以查看 Yahoo 开发中心的 相关文档 。

使用 iframe

具体详情，可以 参看这里 。

实现的原理就是 iframe 与 父页面 进行 Javascript 通信。完全跨域操作没有测试过，但跨子域名是完全可行的。

优势（部分）

• 全部使用 Javascript 搞定
• 简单，不用学习其他语言

缺点（部分）

• 破坏 HTML 结构
• 客户端的资源占用比较大

服务器端脚本

架构可以先「盗用」 Yahoo 文中 的那张插图。大家也许想到变通的办法了，就是在服务器端编写类似网关的脚本。

比如获取另外个域下的 Json 输出，用 PHP 编写的部分代码如下

header('Content-type: text/javascript');
$url = 'http://x.other.net/json';
if ($content  = file_get_contents($url)) {
    echo $url;
}

很简单的代码，但对于服务器端而言，没有任何的限制。进一步的扩展，可以使用 CURL 库 。

优势（部分）

• 使用没有任何限制
• 对 Javascript 透明

缺点（部分）

• 必须支持服务器端
• Javascript 程序员必须了解服务器端语言
• 服务器端脚本必须与页面在同个域内
• 可能会加重服务器负载

由于相对比较熟悉 PHP 语言，加上后者对于客户端友好，所以在条件允许的情况下，个人还是比较偏向后者。