開發(fā)自己的博客轉(zhuǎn)發(fā)插件（跨域）

接著上一篇的《博客備份小工具3》我有提到“其實想了想，轉(zhuǎn)發(fā)博客干嘛非要在本地客戶端轉(zhuǎn)發(fā)，直接在博客園的頁面用js不就可以達(dá)到目的么。想是這么想，還沒嘗試。等我寫完了這個博客就去試試。。”。想法很天真，現(xiàn)實很殘忍。本以為，直接Ajax異步post請求就可以把當(dāng)前頁面的內(nèi)容發(fā)布。可是，問題來了。我們?yōu)g覽的頁面域名是VEVb.com，而我們后臺發(fā)布的域名是i.VEVb.com。跨域了，親。問題既然來了，總不能半途而廢吧。程序的世界沒有辦不到，只有想不到。jsonp專門來干這事的。（jsonp資料傳送門）。 為什么不用《博客備份小工具3》，因為它是CS的。要是可以直接在瀏覽頁面有個按鈕一鍵轉(zhuǎn)發(fā)豈不是爽歪歪。貌似Chrome插件可以專門來干這等壞事。（chrome插件介紹傳送門）。好了就這兩個重要的點了。

下面來說說主要的實現(xiàn)思路，首先通過插件在瀏覽頁面給自己找塊地盤（添加一個div）。然后div中可以輸入用戶名、密碼登錄，取得文章類型。接著就一鍵發(fā)布，把當(dāng)前頁面的內(nèi)容通過jsonp跨域傳到自己開發(fā)的后臺發(fā)布~是不是很簡單呢？哈哈，其實我覺得挺難的。中間遇到了很多問題。就現(xiàn)在，估計還有很多的bug。

好了，先看看效果圖。感覺爽嗎？要是當(dāng)心安全問題，下面我會把所有源碼開放。大伙可以改進(jìn)。^_^

一、開辟一片空間

插件content_script中配置的content_script.js,在content_script.js中可以直接操作當(dāng)前瀏覽頁。哈哈，這還了得，這豈不是到哪里都隨心所欲了。好吧，那么我們給自己開辟一片空間來做想要的操作。

    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標(biāo)簽:/                </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='一鍵轉(zhuǎn)發(fā)'  /></td>/                <td  id='chrome_meg_td'></td>/            </tr>/        </table>/        <script src='https://git.oschina.net/zhaopeiym/Demo/raw/master/resource/VEVb/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。畫上登錄要的用戶名、密碼、文章標(biāo)題、后臺發(fā)布的文章類型、tag標(biāo)簽、、、等。

二、登錄 獲取 你所有的文章分類。

1、用jsonp發(fā)送請求

不知道同學(xué)們有沒有注意到上面的代碼中有一段

<script src='https://git.oschina.net/zhaopeiym/Demo/raw/master/resource/VEVb/cnblog.Chrome.js?v=123'></script>是的，我所以當(dāng)前操作頁的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.VEVb.com/login.aspx?ReturnUrl=http://m.survivalescaperooms.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://m.survivalescaperooms.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.VEVb.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("http://*[@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，在此就登錄，并取到了所有的文章類型。

三、一鍵發(fā)布

其實在發(fā)布之前又登錄的一次。為什么呢？因為發(fā)布需要登錄，之前登錄的是上一次請求。而上一次請求的session，在這一個是讀不到的。可能是因為跨域請求的原因。那沒辦法的，那就再登錄一次吧。反正登錄的反法已經(jīng)獨立出來了。只是電腦多干事了。

1、首頁在前臺頁面取得要轉(zhuǎn)發(fā)的正文內(nèi)容

//一鍵轉(zhuǎn)發(fā)$("#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("發(fā)布成功~<a   target='_blank'>后臺查看~</a>");        $("#chrome_test_div a").css("color", "#fff");    });});

2、然后是后臺發(fā)布

 /// <summary> /// 發(fā)布 /// </summary>