接着上一篇的《博客备份小工具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   0512620Bstr_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')");elsecontext.Response.Write(callback + "('no')");}

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

四、怎么使用

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

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

五、源码下载

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

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

转载于:https://www.cnblogs.com/zhaopei/p/4388279.html

开发自己的博客转发插件(跨域)相关推荐

  1. 一步步开发自己的博客 .NET版(5、Lucenne.Net 和 必应站内搜索)

    前言 这次开发的博客主要功能或特点:     第一:可以兼容各终端,特别是手机端.     第二:到时会用到大量html5,炫啊.     第三:导入博客园的精华文章,并做分类.(不要封我)     ...

  2. 一步步开发自己的博客 .NET版(3、注册登录功能)

    前言 这次开发的博客主要功能或特点:     第一:可以兼容各终端,特别是手机端.     第二:到时会用到大量html5,炫啊.     第三:导入博客园的精华文章,并做分类.(不要封我)     ...

  3. 【基础】利用 hexo + Gitpage 开发自己的博客

    原文作者:cherry 原文地址:[基础]利用 hexo + Gitpage 开发自己的博客 进入程序员这个坑之后就开始自己在网上扒资料,然而资料太多,情况太复杂,主要是看见别人的博客,感觉好高大上, ...

  4. 价值80元的emlog博客用户注册插件

    介绍: Emlog博客用户注册插件 价值80元免费分享给兄弟们~ 网盘下载地址: http://kekewl.net/Gs3bXfc1Zfx0 图片:

  5. pbp 读取 mysql数据_pbp: Django项目开发,个人博客网站类。

    pbp 项目介绍 首个Django项目开发,个人博客网站类. 框架模型 Django 运行平台 Linux 安装部署 1.安装Python3环境 CentOS 7 curl -o /etc/yum.r ...

  6. uni-app 结合云函数开发小程序博客(二):云函数实现登录注册

    我们研发开源了一款基于 Git 进行技术实战教程写作的工具,我们图雀社区的所有教程都是用这款工具写作而成,欢迎 Star 哦 如果你想快速了解如何使用,欢迎阅读我们的 教程文档哦 本文由图雀社区认证作 ...

  7. Node.js 从零开发web server博客项目--项目初始化

    本篇博客记录了<Node.js 从零开发web server博客项目>的原生开发系列内容. 开篇主要介绍原生项目的搭建,以及初步的项目结构设计. 一.项目初始化 新建项目目录,并进入到项目 ...

  8. 51CTO移动客户端可以在线下载安装啦 - 51CTO博客开发 - 51CTO技术博客

    51CTO移动客户端可以在线下载安装啦 - 51CTO博客开发 - 51CTO技术博客 51CTO移动客户端可以在线下载安装啦 - 51CTO博客开发 - 51CTO技术博客 51CTO移动客户端可以 ...

  9. uni-app 结合云函数开发小程序博客(三):接入云函数,实现完善的列表刷新机制

    我们研发开源了一款基于 Git 进行技术实战教程写作的工具,我们图雀社区的所有教程都是用这款工具写作而成,欢迎 Star 哦 如果你想快速了解如何使用,欢迎阅读我们的 教程文档哦 本文由图雀社区认证作 ...

最新文章

  1. ThinkPHP框架学习之使用数组进行查询
  2. 解决通过Nginx转发的服务请求头header中含有下划线的key,其值取不到的问题
  3. 图片指定区域根据rgb值计算出对应的坐标地址_【水文】震惊!高考期间,这位学生居然能通过图片隐写实现文字通信!...
  4. HDU 1430 关系映射 + 打表 .
  5. RAID重组和数据库数据的修复与验证
  6. 【学习笔记】ABAP OOD设计模式 - 单例模式
  7. return print
  8. 正則表達式,终极使用!3个工具,搞定一切
  9. linux命令帮助怎么看,Linux命令帮助
  10. 社区计生民生工程知识竞赛小结_幸福之基 和谐之本 内江经开区打造精品民生工程...
  11. 小学的题 大学的解法
  12. p2p服务器连接状态,P2P网络老是连接不上怎么回事
  13. 查看DLL中导出的函数及参数
  14. 磁盘分区 如何分出整数
  15. 7-18(查找) 新浪微博热门话题(30 分)
  16. python中temp的用法_python temp是什么
  17. 蚂蚁特工吱指南|用来吃的AR游戏机,奥利奥终于对自己下手了
  18. html5期末大作业——HTML+CSS公益关爱残疾人( 6个页面)
  19. 操作系统——(11)多媒体操作系统
  20. wince buid

热门文章

  1. DbVisualizer 使用方法 图解(可以连接多种数据库的客户端)
  2. c语言股票最大收益_长期持有指数基金是最好的选择?指数基金的历史年化收益率是多少?...
  3. linux串口输出重定向到文件,DOS 下将屏幕打印输出重定向到指定文件中(或重定向到并口/串口)...
  4. 相机模型与标定(一)--相机标定概述
  5. java u0002_老玩法,输出金字塔
  6. c语言计算总分和平均分float,用C语言编程平均分数
  7. PAT (Basic Level) Practice1016 部分A+B
  8. 装饰器模式在 Collections 类中的应用
  9. clickhouse bitmap入门
  10. clickhouse入门与安装