博客园网摘chrome插件源码分析
测试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": "Cnblogs Wz(博客园网摘)", //插件名
"version": "2.2", //插件版本
//插件描述
"description": "This is a Cnblogs Wz plug-in, you can bookmark article to Cnblogs Wz(这是一个博客园网摘插件,可以收藏文章到博客园网摘)",
//指定插件应用图表的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 插件主页面
<!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>
<title>博客园——网摘</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
//加载css js
<link href="main.css" rel="stylesheet" type="text/css" />
<script src="jquery.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
</head>
//加载初始化
<body onload="init()">
<div id="wrapper">
<div id="header" style="margin: 0px">
<a href="http://www.cnblogs.com/" target="_blank">
<img src="imgs/logo_small.gif" alt="博客园" id="logo" />
</a>
<span id="help">
<a href="http://home.cnblogs.com/wz/" target="_blank" title="我的网摘—博客园">我的网摘</a>
</span>
</div>
<div id="panel_add">
<table cellspacing="8px">
<tr>
<td style="width: 40px;">
网址：
</td>
<td>
<input name="tb_url" type="text" id="tb_url" value="" /><span class="redcolor">*</span>
</td>
</tr>
<tr>
<td>
标题：
</td>
<td>
<input name="tb_title" type="text" id="tb_title" value="" /><span class="redcolor">*</span>
</td>
</tr>
<tr>
<td>
标签：
</td>
<td>
<input name="tb_tags" maxlength="50" type="text" id="tb_tags" style="float: left;" />
<span id="select_block" onclick="showTag();">选择标签</span><span class="greencolor">（逗号隔开）</span>
</td>
</tr>
<tr>
<td>
摘要：
</td>
<td>
<textarea name="ta_summary" onKeyDown='if(this.value.length>200){event.returnValue=false;}' id="ta_summary" style="width: 280px; height: 80px;"></textarea><br />
<span class="greencolor">（不超过200字）</span>
</td>
</tr>
<tr>
<td colspan="2" style="padding-left: 48px;">
<input id="isPrivate" type="checkbox" name="isPrivate" /><label for="isPrivate">私有网摘</label>
</td>
</tr>
<tr>
<td colspan="2" style="padding-left: 28px;">
<input type="submit" name="btn_submit" value="收藏" onclick="addwz()" id="btn_submit" class="btn_submit" />
<span id="errormsg"></span>
</td>
</tr>
</table>
</div>
//用来显示提示信息
<div id="as">
</div>
</div>
//显示标签选择项
<div id="tags_box"></div>
</body>
</html>
main.js 提交表单数据，查询显示可用标签js
function init() {
cnblogs_data()
}
//从tab中获取网页url和title初始化主页面中相应文本输入框
function cnblogs_data()
{
//调用chrome API获取当前tab页句柄
chrome.tabs.getSelected(null, function (tab) {
//$即jquery实例，$("#tb_url")取document中id为tb_url的元素
$("#tb_url").val(tab.url);
$("#tb_title").val(tab.title);
});
return true;
}
function addwz() {
var isprivate="on";
//如果选中私有网摘，则isprivate取值为空
if ($("#isPrivate").attr("checked")) {
isprivate = "";
}
//初始化提交数据集
var wz = {};
//取值
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();
return false;
}
//如果有多个标签，则通过正则表达式将中文'，'替换为英文','
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/>登录地址：<a href=\"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编码
function htmlEncode(input) {
var ret = $("<div/>").text(input).html();
// /g表示全部转换
ret = ret.replace(/['"]/g, """);
return ret;
}
//点击事件后添加选中标签
function addTag(tagName) {
var TagStr = 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;
}
}
//显示标签选择框
function showTag() {
$("#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 //执行回调函数
});
}
}
function showTag_CallBack(data) {
$("#select_block").html("选择标签");
//创建关闭div
var close_div = "<div id='cover_context'><div id='cover_title'>选择标签：<div id='conver_close'><a onclick='closeTag();'>关闭</a></div></div> <div id='conver_tag'>";
//这句没有用到
var close_div_bottom = "<div id='cover_bottom'><a href='javascript:void(0);' onclick='closeTag();' title='关闭标签框'>X</a></div>";
//将html代码与数据连接到一起，返回的data中应该包括onclick='addTag(name);'的事件
var htmlStr = "<div id='cover_block'></div>" + close_div + data + "</div></div>";
//赋值显示
$("#tags_box").html(htmlStr);
}
function closeTag() {
$("#tags_box").hide();
//重置显示标签按钮css样式
$("#select_block").html("选择标签").css("cursor", "pointer");
}
3.组件升级链接 http://home.cnblogs.com/wz/tools/chrome/updates.xml
--OVER
