本帖最后由 aimeibb 于 2011-7-22 18:03 编辑
软件名称:搜狗高速浏览器 3.0 版本(支持开放平台)
实现目标:扩展小工具,点击按钮“小幽默”在浮动窗口中显示随机小笑话,且动态变化。
下面就跟着我来实现这个目标吧,其实很简单:
1、创建一个工作目录xiaoyoumo来存放源文件。
2、创建名为manifest.xml的文件,并写入以下内容。(推荐使用Notepad++文本编辑器)
<?xml version="1.0" encoding="utf-8"?>
<extension>
<id>com.sogou.xiaoyoumo</id>
<name>小幽默</name>
<show_icon>true</show_icon>
<description>小幽默,小笑话,冷笑话,让你的生活开心一笑!</description>
<popup page="popup.html" width="400" height="200"/>
<version>1.0</version>
<request_api_version>1</request_api_version>
<author>
www.xiaoyoumo.net</author>
</extension>
特别注意:manifest.xml需使用utf-8无bom头方式编码,否则安装时会显示乱码。
下面解释一下命名格式及要求:
id 为扩展的唯一标示,同时用作扩展安装后的目录,要求id格式为类Java库名的命名格式,要求每个扩展在名字前面都要有公司名之类的命名空间。
name 是扩展工具的名称。
show_icon 为bool类型,表示扩展是否会在工具箱中显示图标。
description 为扩展工具的简单描述,说明此扩展的功能及作用。
popup 为子标签,实现弹出气泡的功能,并规定气泡的显示宽度与高度。
version 表示扩展的版本,将作为升级的依据。
request_api_version 为扩展需要用户浏览器api_version的最小值。如果api_version大于用户浏览器本身的api_version,则扩展无法安装。
author 为扩展工具作者的名字。
3、创建名为popup.html的文件,并写入以下内容。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
* {margin:0px; padding:0px;}
</style>
</head>
<body>
<iframe width="100%" height="200" frameborder="0" scrolling="no" src="http://www.xiaoyoumo.net/suiyi_sogou.php"></iframe>
</body>
</html>
这是一个符合w3c标准的html网页,编码格式与调用的网站内容保持一样。此处设为 charset=gb2312 编码。
用样式表 * {margin:0px; padding:0px;} 实现满屏显示。
然后用iframe嵌套网站的内容页面就行了。建议为此扩展专门制作显示内容,以达到最佳的显示效果。
4、用图像处理软件制作2个PNG图标:16*16像素和32*32像素,最好为32位色,显示效果最佳。
推荐使用Fireworks制作PNG图标,然后用IcoFX将16*16像素的PNG转化名为default.ico图标。
32*32像素的PNG命名为default-big.png图标。将default.ico和default-big.png放入刚才创建的xiaoyoumo文件夹。
http://www.sem1.net/content/uploadfile/201107/f0ff09ebf7dcb4a3636d5f97f996d87d20110721020507.gif
5、将制作的4个文件进行zip打包,生成后缀为.sext的安装软件。
这4个文件分别为:manifest.xml(主文件)popup.html(气泡)default.ico(工具栏图标)default-big.png(安装图标)
首先,安装winzip压缩软件。同时选中这4个文件,右键菜单,“Winzip”,“添加到压缩文件... ”
http://www.sem1.net/content/uploadfile/201107/b0a6e1c72e72d4581acc5356a9ba188520110721020507.gif
然后,在弹出的对话框中,输入压缩包的名称,直接写xym.sext (.sext为搜狗浏览器扩展后缀,可以直接识别,双击就可以安装。)特别注意一点,选择自定义压缩格式为:Zip:不压缩。
最后,点确定生成xym.sext文件。
6、双击生成的xym.sext文件,搜狗浏览器提示安装插件,选择”是“就行了。这时,在工具栏中就可以看到你的大作了,呵呵。
http://www.sem1.net/content/uploadfile/201107/ffd6f3bdbd722128b27a21744323fd9d20110721020507.gif
点击图标”小幽默“试一下,弹出的气泡将随机显示小笑话,可以定制内容、速度、字体颜色和背景颜色。
http://www.sem1.net/content/uploadfile/201107/195c22f7e6f0c7a72ccd318da6fb3dbc20110721020138.gif
用了最短的时间,打造了一个最简单的扩展工具,效果还算不错吧,有很多改进的地方。
案例网站:小幽默
http://www.xiaoyoumo.net
软件下载:
http://www.xiaoyoumo.net/com.sogou.xiaoyoumo.1.0.sext
搜狗高速浏览器3.0下载:
http://ie.sogou.com
本文参考搜狗浏览器的官方“开发文档”写成,特此说明。
2011.7.22
---------------------------------------------------
将本插件转化为谷歌Chrome插件,欢迎各位测试!
Chrome插件下载:
http://www.xiaoyoumo.net/chrome_xiaoyoumo.crx