从搜狗浏览器扩展插件图标以及logo的制作到功能的开发,以及如何把插件封装为安装包,搜狗浏览器扩展插件开发制作详细流程全程记录分享。
假如我们要做一个方便网站站长查看SEO优化信息的扩展插件:
1、创建新文件夹(webseo),所有的文件都放在这个文件夹中
2、制作两个图标
default.ico
规格:16*16default-big.png
规格:32*32ico制作工具:百度ico在线制作
3、创建manifest.xml文件
用Sublime Text编辑输入必要的内容:
<?xml version="1.0" encoding="utf-8"?> <extension> <id>com.quanbaike.seo</id> <name>网站SEO查询工具</name> <show_icon>true</show_icon> <description>快速网站seo查询,站长必备工具,查询百度收录,百度权重,爱站流量,关键字排名词数的插件,作者:全百科</description> <version>1.0</version> <request_api_version>1</request_api_version> <author>全百科</author> <popup page="popup.html" width="430" height="481"></popup> </extension>
另存为,选择UTF-8 – 无BOM:
创建一个stock.html文件,用来存放弹出框的内容。
先简单输入一点代码如下:
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> </head> <body> <p>Hello web! 你好站长!</p> </body> </html>
4、扩展打包:把目录中的所有文件压缩成一个zip文件,再改后缀名为.sext(如webseo.sext)
注意:不是对目录压缩,而是进入目录后选择所有文件后压缩!
5、安装,双击webseo.sext文件,按照提示安装
注:未提交申请官方开发者,自行安装会提示危险,选择信任此扩展文件即可安装。
成功后可以看到:
通过本篇文章是不是发现搜狗浏览器扩展插件制作并不复杂,难就难在想要制作的功能而已,欢迎有能力的小伙伴去开发能造福大众的插件哦。