开发自己的博客转发插件（跨域）

    接着上一篇的《博客备份小工具3》我有提到“其实想了想，转发博客干嘛非要在本地客户端转发，直接在博客园的页面用js不就可以达到目的么。想是这么想，还没尝试。等我写完了这个博客就去试试。。”。想法很天真，现实很残忍。本以为，直接ajax异步post请求就可以把当前页面的内容发布。可是，问题来了。我们浏览的页面域名是cnblogs.com，而我们后台发布的域名是i.cnblogs.com。跨域了，亲。问题既然来了，总不能半途而废吧。程序的世界没有办不到，只有想不到。jsonp专门来干这事的。（jsonp资料传送门）。   为什么不用《博客备份小工具3》，因为它是CS的。要是可以直接在浏览页面有个按钮一键转发岂不是爽歪歪。貌似Chrome插件可以专门来干这等坏事。（chrome插件介绍传送门）。好了就这两个重要的点了。

   下面来说说主要的实现思路，首先通过插件在浏览页面给自己找块地盘（添加一个div）。然后div中可以输入用户名、密码登录，取得文章类型。接着就一键发布，把当前页面的内容通过jsonp跨域传到自己开发的后台发布~是不是很简单呢？哈哈，其实我觉得挺难的。中间遇到了很多问题。就现在，估计还有很多的bug。

   好了，先看看效果图。感觉爽吗？要是当心安全问题，下面我会把所有源码开放。大伙可以改进。^_^

一、开辟一片空间

插件content_script中配置的content_script.js,在content_script.js中可以直接操作当前浏览页。哈哈，这还了得，这岂不是到哪里都随心所欲了。好吧，那么我们给自己开辟一片空间来做想要的操作。

    var mydata = "";
    mydata += "&url=" + document.location.href;
    mydata += "&type=mytype";
    mydata += "&tag=mytag";

    var html = " <div id='chrome_test_div' style='display:none;background-color:#0094ff; position: fixed; top: 0px; left: 0px; width: 100%;z-index:11'>\
        <table style='width:100%'>\
            <tr>\
                <td>用户名：</td>\
                <td><input id='chrome_test_user' type='text' value='' /></td>\
                <td>密码：</td>\
                <td><input id='chrome_test_pass' type='password' value='' /></td>\
                <td>\
                    <a href='javascript:void(0);' id='chrome_test_a' >\
登录\
</a>\
</td>\
<td>\
文章：\
</td>\
<td>\
<span id='chrome_content_title'></span>\
</td>\
\
<td>个人分类:</td>\
<td>\
    <select id='pop_sel_type_text'></select>\
</td>\
\
<td>\
    Tag标签:\
                </td>\
                <td>\
                    <input type='text' value='' list='pop_sel_tag_text' id='id_pop_sel_tag_text'>\
                    <input type='hidden' id='myhidden' />\
                    <!--<datalist id='pop_sel_tag_text'></datalist>-->\
                </td>\
                <td colspan='2'><input type='button' id='chrome_test_button' value='一键转发'  /></td>\
                <td  id='chrome_meg_td'></td>\
            </tr>\
        </table>\
        <script src='https://git.oschina.net/zhaopeiym/Demo/raw/master/resource/cnblogs/cnblog.Chrome.js?v=123'></script>\
    </div>";

    $("body").prepend(html).css("margin-top", "70px");
    $("#chrome_content_title").text($("#cb_post_title_url").text());
    document.body.scrollTop = 30;
    window.onscroll = function () {
        if (true) {
            var top = document.body.scrollTop;
            if (top <= 0) {
                $("#chrome_test_div").slideDown(200);
            }
            else if (top >= 30) {
                $("#chrome_test_div").slideUp(400);
            }
        }
    }

 

直接添加一个div，然后在div中添加一个table。画上登录要的用户名、密码、文章标题、后台发布的文章类型、tag标签、、、等。

二、登录 获取 你所有的文章分类。

1、用jsonp发送请求

不知道同学们有没有注意到上面的代码中有一段

<script src='https://git.oschina.net/zhaopeiym/Demo/raw/master/resource/cnblogs/cnblog.Chrome.js?v=123'></script>
是的，我所以当前操作页的js都在这个路径下。

function chrome_test_login() {
    var username = $("#chrome_test_user").val();
    var password = $("#chrome_test_pass").val();
    var Section_url = "&username=" + username + "&password=" + password;
    $.getJSON(getjsonUrl + '/BolghelpWeb/Handler1.ashx?OperationCMD=login' + Section_url + '&callback=?', function (data) {
        test(data);
    });
}

 

登录的js。ajax的jsonp使用起来还是蛮方便的。

2、后台代码的登录和取文章分类

登录：

 /// <summary>
 /// 登录
 /// </summary>
 /// <param name="context"></param>
 public void PostLogin(HttpContext context, string username, string password)
 {
     username = context.Request.QueryString["username"];
     password = context.Request.QueryString["password"];

     string loginurl = "http://passport.cnblogs.com/login.aspx?ReturnUrl=http://www.cnblogs.com/";//
     string result = htmlWeb.Load(loginurl).DocumentNode.InnerHtml;
     String __EVENTVALIDATION = new Regex("id=\"__EVENTVALIDATION\" value=\"(.*?)\"").Match(result).Groups[1].Value;
     String __VIEWSTATE = new Regex("id=\"__VIEWSTATE\" value=\"(.*?)\"").Match(result).Groups[1].Value;
     String LBD_VCID_c_login_logincaptcha = new Regex("id=\"LBD_VCID_c_login_logincaptcha\" value=\"(.*?)\"").Match(result).Groups[1].Value;

     StringBuilder str_content = new StringBuilder();
     str_content.Append(@"__EVENTTARGET=");
     str_content.Append(@"&__EVENTARGUMENT=");
     str_content.Append(@"&__VIEWSTATE=" + System.Web.HttpUtility.UrlEncode(__VIEWSTATE, Encoding.UTF8));
     str_content.Append(@"&__VIEWSTATEGENERATOR=C2EE9ABB");
     str_content.Append(@"&__EVENTVALIDATION=" + System.Web.HttpUtility.UrlEncode(__EVENTVALIDATION, Encoding.UTF8));
     str_content.Append(@"&tbUserName=" + System.Web.HttpUtility.UrlEncode(username, Encoding.UTF8));
     str_content.Append(@"&tbPassword=" + password);
     str_content.Append(@"&LBD_VCID_c_login_logincaptcha=" + LBD_VCID_c_login_logincaptcha);
     str_content.Append(@"&LBD_BackWorkaround_c_login_logincaptcha=");
     str_content.Append(@"&btnLogin=登  录");
     str_content.Append(@"&txtReturnUrl=http://www.cnblogs.com/");

     httphelp.PostHtml(loginurl, null, str_content.ToString(), Encoding.UTF8, true);
 }

 

取文章分类：

/// <summary>
/// 取文章类型
/// </summary>
/// <param name="context"></param>
public void PostGetType(HttpContext context)
{
    PostLogin(context, "", "");

    string TypeUrl = "http://i.cnblogs.com/EditArticles.aspx?opt=1";//地址                                
    var typeHtml = httphelp.PostHtml(TypeUrl, null, "", Encoding.UTF8, true);
    HtmlAgilityPack.HtmlDocument response = new HtmlDocument();
    response.LoadHtml(typeHtml);
    var html_trS = response.DocumentNode.SelectNodes("//*[@id='Editor_Edit_APOptions_Advancedpanel1_cklCategories']/tr");

    List<object> objs = new List<object>();
    foreach (var item in html_trS)
    {
        var html_tdS = item.SelectNodes(item.XPath + "/td");
        foreach (var item_td in html_tdS)
        {
            if (item_td.SelectSingleNode(item_td.XPath + "/input") != null)
            {
                var value = item_td.SelectSingleNode(item_td.XPath + "/input").Attributes["value"].Value;
                var name = item_td.SelectSingleNode(item_td.XPath + "/input").Attributes["name"].Value;
                var text = item_td.SelectSingleNode(item_td.XPath + "/label").InnerText;
                objs.Add(new { value = value, text = text, name = name });
            }
        }
    }
    context.Response.ContentType = "application/json";
    string callback = context.Request.QueryString["callback"];
    context.Response.Write(callback + "(" + objs.ToJson() + ")");
}

 

ok，在此就登录，并取到了所有的文章类型。

三、一键发布

其实在发布之前又登录的一次。为什么呢？因为发布需要登录，之前登录的是上一次请求。而上一次请求的session，在这一个是读不到的。可能是因为跨域请求的原因。那没办法的，那就再登录一次吧。反正登录的反法已经独立出来了。只是电脑多干事了。

1、首页在前台页面取得要转发的正文内容

//一键转发
$("#chrome_test_button").click(function () {
    $("#chrome_meg_td").html("");

    var type = $("#pop_sel_type_text").val().split('%')[0];
    var name = $("#pop_sel_type_text").val().split('%')[1];
    var username = $("#chrome_test_user").val();
    var password = $("#chrome_test_pass").val();
    var tag = $("#id_pop_sel_tag_text").val();
    var Section_url = "&type=" + type + "&tag=" + tag + "&name=" + name + "&password=" + password + "&username=" + username;
    $.getJSON(getjsonUrl + '/BolghelpWeb/Handler1.ashx?OperationCMD=Publishing&callback=?' + Section_url + '&url=' + document.location.href, function (data) {
        $("#chrome_meg_td").html("发布成功~<a href='http://i.cnblogs.com/EditArticles.aspx'  target='_blank'>后台查看~</a>");
        $("#chrome_test_div a").css("color", "#fff");
    });
});

 

2、然后是后台发布

 /// <summary>
 /// 发布
 /// </summary>
 /// <param name="context"></param>
 public void PostPublishing(HttpContext context)
 {
     string url = "http://i.cnblogs.com/EditArticles.aspx?opt=1";//地址   

     string callback = context.Request.QueryString["callback"];
     string mydataurl = context.Request.QueryString["url"];
     string mydatatype = context.Request.QueryString["type"];
     string mydatatag = context.Request.QueryString["tag"];
     string mydataname = context.Request.QueryString["name"];

     PostLogin(context, "", "");
     var html = httphelp.PostHtml(url, null, "", Encoding.UTF8, true);
     String __VIEWSTATE = new Regex("id=\"__VIEWSTATE\" value=\"(.*?)\"").Match(html).Groups[1].Value;
     string title = "test", body = "test";
     GetRequest(mydataurl, ref body, ref title);

     body += "</br>==================================<a  href='" + mydataurl + "' target='_blank'>原文链接</a>===此文章由<a href='http://www.cnblogs.com/zhaopei/' target='_blank'>博客转发插件</a>转发==================================";

     StringBuilder str_content = new StringBuilder();
     str_content.Append(@"__VIEWSTATE=" + System.Web.HttpUtility.UrlEncode(__VIEWSTATE, Encoding.UTF8));//随便分类信息和__VIEWSTATE有关    所以 分类  不好弄
     str_content.Append(@"&__VIEWSTATEGENERATOR=FE27D343");//FE27D343   0512620B
     str_content.Append(@"&Editor$Edit$txbTitle=" + System.Web.HttpUtility.UrlEncode("【转】" + title, Encoding.UTF8));
     str_content.Append(@"&Editor$Edit$EditorBody=" + System.Web.HttpUtility.UrlEncode(body, Encoding.UTF8));
     str_content.Append(@"&" + mydataname + "=" + mydatatype);
     str_content.Append(@"&Editor$Edit$Advanced$ckbPublished=on");//发布
     str_content.Append(@"&Editor$Edit$Advanced$chkDisplayHomePage=on");//博客首页显示
     str_content.Append(@"&Editor$Edit$Advanced$chkComments=on");//允许评论
     str_content.Append(@"&Editor$Edit$Advanced$chkMainSyndication=on");//显示在RSS中
     str_content.Append(@"&Editor$Edit$Advanced$txbEntryName=");//友好地址名，只能使用字母、数字、-连字符、_下划线，不超过150个字符
     str_content.Append(@"&Editor$Edit$Advanced$txbExcerpt=");//插入摘要右侧图片
     str_content.Append(@"&Editor$Edit$Advanced$txbTag=" + mydatatag);// Tag标签
     str_content.Append(@"&Editor$Edit$Advanced$tbEnryPassword=");//密码保护
     str_content.Append(@"&Editor$Edit$lkbPost=发布");

     var srcString = httphelp.PostHtml(url, null, str_content.ToString(), Encoding.UTF8, true);//发布

     context.Response.ContentType = "application/json";
     //输出：回调函数名(json数据)
     if (srcString.Contains("发布成功"))
         context.Response.Write(callback + "('ok')");
     else
         context.Response.Write(callback + "('no')");
 }

 

基本上就此完工了。哈哈~

四、怎么使用

有人可能还不知道怎么安装插件。360浏览器你只有把插件直接拖到浏览器里面就可以了。如果是谷歌原版浏览器那么就拖到chrome://extensions/这个页面。还有问题就百度怎么安装插件吧。

不想看源码的 可以直接下载插件使用，安装后打开任何一个博客园文章页面，然后把滚动条滚到最上就可以看到效果了（效果比较隐藏，为了不影响大家正常浏览页面内容）。 【下载地址】

 

五、源码下载

全部源码下载（包括插件源码、后台源码和引用的外部js）。亲，老规矩。如果觉得对您有用，而您又下载了。请您轻轻的点个赞呗~~

 

 PS：这篇文章本来是写于2015-04-02 20:25，准备第二天发布。然，第二天发现登录不了了。原来正好遇上的博客园修改登录方式。整了老半天也没有整出怎么登录，无意看到了一篇文章，借鉴了下思路。搞定！！这里主要也是弄着玩玩，还有很多功能后续再继续完善。如：记住密码、自动登录取分类数据、验证码问题（一般只有晚上才需要）、当然肯定还有很多bug，先这样吧，之后再慢慢修改。