您的位置：首页 > 其它

博客园网摘chrome插件源码分析

2012-09-06 15:59 316 查看

测试chrome插件所用版本号19.0.1084.41

参考资料：http://blog.csdn.net/mirkerson/article/details/5901241

http://dato0123.iteye.com/blog/1273341有详细的pptx文档

写在分析前：chrome参考了firefox的设计思路，提供平台，开放API，容许拓展。firefox的拓展插件也容许在chrome上跑。

相对firefox来说，chrome插件的目录结构简单清晰。

1.插件下到本地后，将后缀名.crx修改为.zip，解压后得到目录文件cnblogswz，目录结构如下：

.
│manifest.json	//控制整个插件行为的配置文件
│index.html//点击插件图标后弹出的窗口，是插件的主界面
│main.js//插件界面可以使用的js函数
├main.css//插件界面元件的样式表
│jquery.js
│16.png	//16px应用图标
│48.png//48px应用图标
|128.png//128px应用图标
└─imgs//存放插件界面图片
logo_small.gif

2.对目录文件遍历分析

imgs目录：存放插件界面图片

logo_small.gif//插件界面博客园logo

根目录：重点分析mainfest.json、index.html和main.js三个文件

mainfest.json整个插件的配置文件，作用等同于install.rdf在firefox插件中的作用

{

"name":"CnblogsWz(博客园网摘)",//插件名
"version":"2.2",//插件版本

//插件描述
"description":"ThisisaCnblogsWzplug-in,youcanbookmarkarticletoCnblogsWz(这是一个博客园网摘插件,可以收藏文章到博客园网摘)",

//指定插件应用图表的3种像素图片路径
"icons":{"16":"16.png","48":"48.png","128":"128.png"},

"browser_action":{
"default_icon":"16.png",//插件在扩展栏中显示图标
"popup":"index.html"//插件主页面
},
"update_url":"http://home.cnblogs.com/wz/tools/chrome/updates.xml",//插件更新目录
"permissions":["http://*/","bookmarks","tabs","history"]//开通可以操作的权限
}

index.html插件主页面

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
　　<title>博客园——网摘</title>
　　<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

//加载cssjs
　　<linkhref="main.css"rel="stylesheet"type="text/css"/>
　　　<scriptsrc="jquery.js"type="text/javascript"></script>
　　<scriptsrc="main.js"type="text/javascript"></script>
</head>

//加载初始化
<bodyonload="init()">
　　<divid="wrapper">
　　　　<divid="header"style="margin:0px">
　　　　　　<ahref="http://www.cnblogs.com/"target="_blank">
　　　　　　　　<imgsrc="imgs/logo_small.gif"alt="博客园"id="logo"/>
　　　　　　</a>
　　　　　　<spanid="help">
　　　　　　　　<ahref="http://home.cnblogs.com/wz/"target="_blank"title="我的网摘—博客园">我的网摘</a>
　　　　　　</span>
　　　　</div>
　　　　<divid="panel_add">
　　　　　　<tablecellspacing="8px">
　　　　　　　　<tr>
　　　　　　　　　　<tdstyle="width:40px;">
　　　　　　　　　　　　网址：
　　　　　　　　　　</td>
　　　　　　　　　　<td>
　　　　　　　　　　　　<inputname="tb_url"type="text"id="tb_url"value=""/><spanclass="redcolor">*</span>
　　　　　　　　　　</td>
　　　　　　　</tr>
　　　　　　　<tr>
　　　　　　　　　　<td>
　　　　　　　　　　　　标题：
　　　　　　　　　　</td>
　　　　　　　　　　<td>
　　　　　　　　　　　　<inputname="tb_title"type="text"id="tb_title"value=""/><spanclass="redcolor">*</span>
　　　　　　　　　　</td>
　　　　　　　　</tr>
　　　　　　　　<tr>
　　　　　　　　　　<td>
　　　　　　　　　　　　标签：
　　　　　　　　　　</td>
　　　　　　　　　　<td>
　　　　　　　　　　　　<inputname="tb_tags"maxlength="50"type="text"id="tb_tags"style="float:left;"/>
　　　　　　　　　　　　<spanid="select_block"onclick="showTag();">选择标签</span><spanclass="greencolor">（逗号隔开）</span>
　　　　　　　　　　</td>
　　　　　　　　</tr>
　　　　　　　　<tr>
　　　　　　　　　　<td>
　　　　　　　　　　　　摘要：
　　　　　　　　　　</td>
　　　　　　　　　　<td>
　　　　　　　　　　　　<textareaname="ta_summary"onKeyDown='if(this.value.length>200){event.returnValue=false;}'id="ta_summary"　　　　　　　　　　　　　　　　　　　　style="width:280px;height:80px;"></textarea><br/>
　　　　　　　　　　　　<spanclass="greencolor">（不超过200字）</span>
　　　　　　　　　　</td>
　　　　　　　　</tr>
　　　　　　　　<tr>
　　　　　　　　　　<tdcolspan="2"style="padding-left:48px;">
　　　　　　　　　　　　<inputid="isPrivate"type="checkbox"name="isPrivate"/><labelfor="isPrivate">私有网摘</label>
　　　　　　　　　　</td>
　　　　　　　　</tr>
　　　　　　　　<tr>
　　　　　　　　　　<tdcolspan="2"style="padding-left:28px;">
　　　　　　　　　　　　<inputtype="submit"name="btn_submit"value="收藏"onclick="addwz()"id="btn_submit"class="btn_submit"/>
　　　　　　　　　　　　<spanid="errormsg"></span>
　　　　　　　　　　</td>
　　　　　　　　</tr>
　　　　　　</table>
　　　　</div>

//用来显示提示信息
　　　　<divid="as">
　　　　</div>
　　</div>

//显示标签选择项
　　<divid="tags_box"></div>

</body>
</html>

main.js提交表单数据，查询显示可用标签js

functioninit(){
　　cnblogs_data()
}

//从tab中获取网页url和title初始化主页面中相应文本输入框

functioncnblogs_data()
{

//调用chromeAPI获取当前tab页句柄
　　chrome.tabs.getSelected(null,function(tab){

//$即jquery实例，$("#tb_url")取document中id为tb_url的元素
　　　　$("#tb_url").val(tab.url);
　　　　$("#tb_title").val(tab.title);
　　});
　　returntrue;
}

functionaddwz(){
　　varisprivate="on";

//如果选中私有网摘，则isprivate取值为空
　　if($("#isPrivate").attr("checked")){
　　　　isprivate="";
　　}

//初始化提交数据集
　　varwz={};

//取值
　　wz.url=$("#tb_url").val();
　　wz.title=$("#tb_title").val();
　　wz.tags=$("#tb_tags").val();
　　wz.summary=$("#ta_summary").val();
　　wz.isPrivate=isprivate;
　　if(wz.url.length==0||wz.title.length==0){
　　　　$("#panel_add").hide();
　　　　$("#as").html("网址和标题不能为空！").show();
　　　　returnfalse;
　　}

//如果有多个标签，则通过正则表达式将中文'，'替换为英文','
　　if(wz.tags.length>0){
　　　　wz.tags=wz.tags.replace(/，/g,',');
　　}

//网摘内容取前200
　　if(wz.summary.length>200){
　　　　wz.summary=wz.summary.substring(0,200);
　　}

//收藏按钮显示'正在提交'
　　$("#btn_submit").css("width","80px").css("cursor","default").val("正在添加...").attr("disabled","disabled");

//利用jquery进行ajax提交数据表单
　　$.ajax({
　　　　type:"get",
　　　　url:'http://home.cnblogs.com/wz/AddWZ?url='+encodeURIComponent(wz.url)+'&title='+encodeURIComponent(htmlEncode(wz.title))+　　　　'&tags='+encodeURIComponent(wz.tags)+'&summary='+encodeURIComponent(htmlEncode(wz.summary))+'&isPrivate='+　　　　　　　　　　　　wz.isPrivate,
　　　　　　async:true,
　　　　　　dataType:'Text',

//成功返回响应后，回调函数
　　　　　　success:function(data){

//隐藏添加面板，显示'请登录'提示
　　　　　　　　$("#panel_add").hide();
　　　　　　　　if(data=="请先登录"){

//将字符串转码为html编码后显示
　　　　　　　　　　$("#as").html(data+"<br/><br/>登录地址：<ahref=\"http://passport.cnblogs.com/login.aspx\"　　　　　　　　　　　　　　　　　　　　　　　　　　　　target=\"_blank\">http://passport.cnblogs.com/login.aspx</a>").show();
　　　　　　　　}
　　　　　　　　else{
　　　　　　　　　　$("#as").html(data).show();
　　　　　　　　}
　　　　},

//返回错误响应
　　　　error:function(msg){
　　　　　　console.log(msg.responseText);
　　　　　　$("#errormsg").text("出现异常，请联系管理员:contact@cnblogs.com");
　　　　　　$("#btn_submit").css("width","40px").css("cursor","pointer").val("收藏").attr("disabled","");
　　}
　　});
}

//将单引号转码为html编码

functionhtmlEncode(input){
　　varret=$("<div/>").text(input).html();

///g表示全部转换
　　ret=ret.replace(/['"]/g,""");
　　returnret;
}

//点击事件后添加选中标签

functionaddTag(tagName){
　　varTagStr=document.getElementById("tb_tags").value;
　　if(TagStr.indexOf(tagName)<0){
　　　　if(TagStr=='')
　　　　　　TagStr=TagStr+tagName;
　　　　else
　　　　　　TagStr=TagStr+","+tagName;

　　　　document.getElementById("tb_tags").value=TagStr;
　　}
}

//显示标签选择框

functionshowTag(){
　　$("#select_block").css("cursor","default");
　　if($("#tags_box").html()!=''){
　　　　$("#tags_box").show();
　　}
　　else{

//向博客园请求标签数据
　　　　$("#select_block").html("加载中...").css("cursor","default");
　　　　$.ajax({

//请求url，博客园根据登录状态中保存的用户名查询显示其创建的标签项
　　　　　　url:'http://home.cnblogs.com/wz/GetUserTags',
　　　　　　data:'{}',
　　　　　　type:'post',
　　　　　　dataType:'text',
　　　　　　contentType:'application/json;charset=utf8',
　　　　　　success:showTag_CallBack//执行回调函数
　　　　});
　　}
}

functionshowTag_CallBack(data){
　　$("#select_block").html("选择标签");

//创建关闭div
　　varclose_div="<divid='cover_context'><divid='cover_title'>选择标签：<divid='conver_close'><aonclick='closeTag();'>关闭</a></div></div>　　　　　　　　　　　　<divid='conver_tag'>";

//这句没有用到
varclose_div_bottom="<divid='cover_bottom'><ahref='javascript:void(0);'onclick='closeTag();'title='关闭标签框'>X</a></div>";

//将html代码与数据连接到一起，返回的data中应该包括onclick='addTag(name);'的事件
　　varhtmlStr="<divid='cover_block'></div>"+close_div+data+"</div></div>";

//赋值显示
　　$("#tags_box").html(htmlStr);
}

functioncloseTag(){

　　$("#tags_box").hide();

//重置显示标签按钮css样式
　　$("#select_block").html("选择标签").css("cursor","pointer");
}

3.组件升级链接http://home.cnblogs.com/wz/tools/chrome/updates.xml

<gupdatexmlns="http://www.google.com/update2/response"protocol="2.0">
//唯一值

　　<appappid="cffekinamfocdkmlanbmmfmanmmmefpd">
//提供打包文件

　　　　<updatecheckcodebase="http://home.cnblogs.com/wz/tools/chrome/cnblogswz.crx"version="2.2"/>

　　</app>

</gupdate>

--OVER

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航