Chrome浏览器扩展开发之汇率查询工具

2011-04-25

因为经常看国外的东西,所以呢就需要经常看一下美元之类的汇率是多少,并转换成人民币是多少钱。以前经常用Google的onebox来查汇率,不过每次都要打开一个新的页面来查,太麻烦了。所有就想有没有更简单的方法,由于基本上都是用Google Chrome来上网,所以就想开发一个Chrome扩展来查询汇率。查了一下Google Chrome 扩展开发的api发现都是英文的(咱英文不好呀!),后来就在网上找了一些相关的资料。然后就开始开发这个汇率查询的扩展了。

做这种汇率查询的工具,最重要的是要找到一个提供最新汇率数据的api,然后再根据这个api来开发这个工具。找了好久发现新浪的汇率api做的挺好的(不过好像没有公开,是在他们网页上抠出来的……),就用了这个api,地址是:http://hq.sinajs.cn/list=JPY,CHF,GBP,EUR,HKD,AUD,CAD,USDCNY使用方法就是用<script>标签引用就可以了,很方便。

下面就开始真正的开发过程了,首先建立一个文件夹(随便取什么名字),然后在里面新建一个txt文件,将文件名改为“manifest.json”(注意扩展名),然后用一些代码编辑器打开(注意不要用文本文档打开,因为编码会出错)。然后再里面添加以下内容:

{
    "name": "汇率转换工具",
    "version": "1.0",
    "description": "汇率转换工具",
    "icons": {"128": "128.png","24": "icon.png"},
    "browser_action": {
        "default_icon": "icon.png",
        "popup": "huilv.htm"
    },
    "permissions": [      "http://foxrate.org/"    ]
}

下面解释一下上面代码的意思,name是名字,version是版本号,description是扩展的描述,icons是扩展的图标,分为128像素和24像素的,browser_action浏览器上的设置,default_icon是显示在浏览器右上角的图标,popup是当点击图标后弹出的页面,permissions是允许访问的网站。

再将上面涉及到的文件添加进去,包括两个图标文件(128.png、icon.png),和一个html页面(huilv.htm),添加完后就编写这个html页面了,这个其实跟正常的网页设计是一样的,主要是要使用js来处理汇率的计算等。下面是我写的汇率查询工具的部分代码:

var menoyType = {
    "JPY": "日元",
    "CHF": "瑞郎",
    "GBP": "英镑",
    "EUR": "欧元",
    "HKD": "港元",
    "AUD": "澳元",
    "CAD": "加元",
    "USD": "美元",
    "USDCNY": "元"
};
function getResult() {
    var from = document.getElementById("selectFrom")[document.getElementById("selectFrom").selectedIndex].value;
    var floatFrom = from == "USD" ? 1 : (window["hq_str_" + from].split(","))[8] * 1;
    if (("_EUR_GBP_AUD_").indexOf(from) != -1) {
        floatFrom = 1 / floatFrom;
    }
    var to = document.getElementById("selectTo")[document.getElementById("selectTo").selectedIndex].value;
    var floatTo = to == "USD" ? 1 : (window["hq_str_" + to].split(","))[8] * 1;
    if (("_EUR_GBP_AUD_").indexOf(to) != -1) {
        floatTo = 1 / floatTo;
    }
    var count = document.getElementById("txtCount").value;
    count = eval(count);
    var result = count / floatFrom * floatTo;
    document.getElementById("resultSpan").innerHTML = Math.round(100 * count) / 100 + menoyType[from] + "=" + result.toFixed(4) + menoyType[to];
}
window.onload = function () { getResult(); }

最后就是将这个文件夹添加到Google Chrome的扩展中,方法是:打开 工具->扩展程序->开发人员模式->载入正在开发的扩展程序,浏览到开始的时候创建的文件夹,然后确定就可以了。如果你想将扩展程序打包成crx文件供其他人使用的话,可以点击扩展程序页面上的打包扩展程序,同样浏览到前面的文件夹,然后确定就可以了,完成后会生成一个crx文件。就可以直接使用这个文件来安装扩展了。下面提供我写的扩展程序的完整代码下载:汇率查询工具

其实Chrome扩展开发也挺简单的,就是写html页面和javascript,不过如果要把扩展提交到Google Chrome扩展中心的话好像挺麻烦的,还要交5美元的入门费,这让我情何以堪呐……据说360弄了一个360浏览器极速版(Chrome内核的),然后还要弄一个扩展平台,入门是免费的,唉,以后可能要在360的平台上发布我的扩展了,虽然我不大喜欢360……