目录
声明
对不起大家！我标题党了，其实是在本地修改数据！！！
脚本是免费并且开源的，但我还是把资源上传到了 CSDN，有条件的小伙伴希望支持一下，感谢大家！
本文章未经允许，禁止转载！
本次项目主要是修改以上数据。
用到的技术和工具
- JavaScript
- 脚本管理工具
- Webstorm
前提准备
通过F12可以看到加载的数据
博客数据请求接口
https://bizapi.csdn.net/blog/phoenix/console/v1/data/blog-statistics响应数据（已对敏感数据进行脱敏）
{
"code": 200,
"message": "success",
"traceId": "*",
"data": [
{
"name": "文章总数",
"enName": "article",
"num": 2
},
{
"name": "粉丝数",
"enName": "fans",
"num": 6
},
{
"name": "点赞数",
"enName": "digg",
"num": 11
},
{
"name": "评论数",
"enName": "comment",
"num": 0
},
{
"name": "阅读量",
"enName": "view",
"num": 262
},
{
"name": "积分",
"enName": "score",
"num": 47
},
{
"name": "总排名",
"enName": "rank",
"num": 0
},
{
"name": "收藏数",
"enName": "collect",
"num": 1
}
]
}到此位置准备的数据就此完成。
项目开发
主要的思路就是通过 脚本管理工具 对 响应数据 进行拦截并修改。
1.创建脚本
在 Webstorm 中创建一个 js文件，名为 xxx.user.js
1.你可以用你自己喜欢的编译器，我比较习惯 Webstorm
2.js文件的名称必须是 user.js 结尾，因为这样 脚本管理器 才能识别出来是脚本
初始化脚本如下：
// ==UserScript==
// @name CSDN博客数据修改 // 脚本名称
// @namespace http://tampermonkey.net/ // 命名空间，通常用于区分不同的脚本
// @match https://mp.csdn.net/mp_blog/analysis/article/all // 该脚本将在此URL匹配时执行
// @grant unsafeWindow // 允许访问页面的全局变量
// @run-at document-start // 在文档开始加载时运行脚本
// @version 1.0 // 脚本版本
// @license MIT // 脚本许可证
// @author Berger // 脚本作者
// @description 修改CSDN博客数据，仅供娱乐使用！ // 脚本描述
// ==/UserScript==
(function () {
'use strict'; // 严格模式，避免意外的错误
// 在这里添加具体的代码逻辑以修改CSDN博客数据
})();
2.编写拦截响应方法
我把它封装到utils中，以便后续调用
其中 responseInterceptors 第一个参数是 拦截响应的路径；第二个是 传入一个方法，用于修改响应数据（具体的数据）。
const utils = {
responseInterceptors(hijackUrl, functions) {
// 保存原始的 open 和 send 方法
const originalOpen = XMLHttpRequest.prototype.open;
const originalSend = XMLHttpRequest.prototype.send;
// 重写 XMLHttpRequest 的 open 方法
XMLHttpRequest.prototype.open = function (method, url, async, user, password) {
// 将请求的 URL 和方法存储在当前实例中
this._url = url;
this._method = method;
// 检查 URL 是否包含要劫持的 URL
if (url.includes(hijackUrl)) {
// 添加状态变化的事件监听器
this.addEventListener('readystatechange', function () {
// 当请求完成时（readyState === 4）
if (this.readyState === 4) {
try {
// 解析响应文本为 JSON 对象
const res = JSON.parse(this.responseText);
// 调用提供的函数进行响应修改
const modifiedResponse = functions(res);
// 使 responseText 属性可写，并进行修改
Object.defineProperty(this, "responseText", {
writable: true,
configurable: true, // 使属性可配置
});
// 将修改后的响应文本赋值给 responseText
this.responseText = modifiedResponse;
} catch (error) {
// 处理 JSON 解析错误
console.error("Error parsing response:", error);
}
}
});
}
// 调用原始的 open 方法
originalOpen.call(this, method, url, async, user, password);
};
// 重写 XMLHttpRequest 的 send 方法
XMLHttpRequest.prototype.send = function (body) {
// 调用原始的 send 方法
originalSend.call(this, body);
};
}
};3.创建响应数据修改对象
const responseContentModify = {
modifyBlogStatics(response) {
//文章总数
response['data'][0]['num'] = 9999
//粉丝数
response['data'][1]['num'] = 9999
//点赞数
response['data'][2]['num'] = 9999
//评论数
response['data'][3]['num'] = 9999
//阅读量
response['data'][4]['num'] = 9999
//积分
response['data'][5]['num'] = 9999
//总排名
response['data'][6]['num'] = 9999
//收藏数
response['data'][7]['num'] = 9999
return response
}
}4.创建博客数据拦截方法
function hijackBlogStatics() {
// 博客数据请求接口
const blogStaticsUrl = 'https://bizapi.csdn.net/blog/phoenix/console/v1/data/blog-statistics'
utils.responseInterceptors(blogStaticsUrl,responseContentModify.modifyBlogStatics)
}5.运行
let main = {
init() {
hijackBlogStatics()
},
}
window.addEventListener('DOMContentLoaded', main.init);效果展示
即使网页刷新，效果也依旧存在。
因为此脚本每次都会捕捉到博客数据响应，加以修改。
进一步优化脚本
从上面可以看出来，想要修改的数据被写死在了代码中，这非常不友好，所以我们进一步优化可以在网页中设置数据。
// ==UserScript==
// @name CSDN博客数据修改
// @namespace http://tampermonkey.net/
// @match https://mp.csdn.net/mp_blog/analysis/article/*
// @grant unsafeWindow
// @run-at document-start
// @version 1.0
// @license MIT
// @author Berger
// @description 修改CSDN博客数据，仅供娱乐使用！
// @grant GM_registerMenuCommand
// ==/UserScript==1.引入 资源管理器相关依赖
// @grant GM_registerMenuCommand
// @grant GM_getValue
// @grant GM_setValue这是脚本管理器的命令，可以创建命令菜单
function registerMenuCommand() {
GM_registerMenuCommand('⚙️ 配置博客数据', () => {
alert(111)
});
}
let main = {
init() {
hijackBlogStatics()
registerMenuCommand()
},
}在utils中新增
getValue(name) {
//从本地获取数据
return GM_getValue(name);
},
setValue(name, value) {
//设置数据到本地
return GM_setValue(name, value);
},效果展示
2.引入 SweetAler2
// @require https://registry.npmmirror.com/sweetalert2/10.16.6/files/dist/sweetalert2.min.js
// @require https://registry.npmmirror.com/hotkeys-js/3.13.3/files/dist/hotkeys.min.js
// @resource style https://registry.npmmirror.com/sweetalert2/10.16.6/files/dist/sweetalert2.min.css3.设置对话框
function registerMenuCommand() {
GM_registerMenuCommand('⚙️ 配置博客数据', () => {
main.showBlogStaticsSettingBox()
});
}4.配置逻辑功能
// 博客数据配置
showBlogStaticsSettingBox() {
// 获取博客统计数据
const blogStaticsData = utils.getValue("blogStatics");
console.log(blogStaticsData);
// 使用SweetAlert2展示数据配置对话框
Swal.fire({
title: '博客数据配置',
html:
// 构建输入框用于各项博客统计数据
'<span>文章总数</span><input id="article" class="swal2-input" placeholder="文章总数" value="' + (blogStaticsData == null ? '' : blogStaticsData.article) + '">' +
'<span>粉丝数</span><input id="fans" class="swal2-input" placeholder="粉丝数" value="' + (blogStaticsData == null ? '' : blogStaticsData.fans) + '">' +
'<span>点赞数</span><input id="digg" class="swal2-input" placeholder="点赞数" value="' + (blogStaticsData == null ? '' : blogStaticsData.digg) + '">' +
'<span>评论数</span><input id="comment" class="swal2-input" placeholder="评论数" value="' + (blogStaticsData == null ? '' : blogStaticsData.comment) + '">' +
'<span>阅读量</span><input id="view" class="swal2-input" placeholder="阅读量" value="' + (blogStaticsData == null ? '' : blogStaticsData.view) + '">' +
'<span>积分</span><input id="score" class="swal2-input" placeholder="积分" value="' + (blogStaticsData == null ? '' : blogStaticsData.score) + '">' +
'<span>总排名</span><input id="rank" class="swal2-input" placeholder="总排名" value="' + (blogStaticsData == null ? '' : blogStaticsData.rank) + '">' +
'<span>收藏数</span><input id="collect" class="swal2-input" placeholder="收藏数" value="' + (blogStaticsData == null ? '' : blogStaticsData.collect) + '">',
focusConfirm: false,
showDenyButton: true,
confirmButtonText: '保存数据到本地',
denyButtonText: '清除本地信息',
footer: 'tips：未填写的信息不会被修改',
preConfirm: () => {
// 获取用户输入的数据
const articleNum = Swal.getPopup().querySelector('#article').value;
const fansNum = Swal.getPopup().querySelector('#fans').value;
const diggNum = Swal.getPopup().querySelector('#digg').value;
const commentNum = Swal.getPopup().querySelector('#comment').value;
const viewNum = Swal.getPopup().querySelector('#view').value;
const scoreNum = Swal.getPopup().querySelector('#score').value;
const rankNum = Swal.getPopup().querySelector('#rank').value;
const collectNum = Swal.getPopup().querySelector('#collect').value;
// 验证输入数据
const inputs = [
articleNum,
fansNum,
diggNum,
commentNum,
viewNum,
scoreNum,
rankNum,
collectNum
];
for (let input of inputs) {
const num = Number(input);
// 检查输入是否为非负整数
if (!Number.isInteger(num) || num < 0) {
return Swal.fire({
icon: 'error',
title: '输入错误',
text: '数据必须是大于等于的整数',
});
}
}
// 返回有效输入数据
return { articleNum, fansNum, diggNum, commentNum, viewNum, scoreNum, rankNum, collectNum };
}
}).then((result) => {
// 根据用户的操作处理结果
const { articleNum, fansNum, diggNum, commentNum, viewNum, scoreNum, rankNum, collectNum } = result.value;
if (result.isConfirmed) {
// 保存信息到本地
const blogStaticsData = {
article: articleNum,
fans: fansNum,
digg: diggNum,
comment: commentNum,
view: viewNum,
score: scoreNum,
rank: rankNum,
collect: collectNum,
};
utils.setValue("blogStatics", blogStaticsData);
// 提示用户保存成功
Swal.fire({
icon: "success",
title: "保存成功！",
showConfirmButton: false,
timer: 1300
}).then(() => location.reload());
}
if (result.isDenied) {
// 清除本地信息
utils.setValue("blogStatics", null);
Swal.fire({
icon: "success",
title: "博客数据已清除！",
showConfirmButton: false,
timer: 1300
}).then(() => location.reload());
}
});
},
终极效果
设置数据
即使切换页面，刷新页面，效果依旧在
恢复数据
脚本链接
已同步到greasyfork：CSDN娱乐脚本
https://greasyfork.org/zh-CN/scripts/510074-csdn%E5%A8%B1%E4%B9%90%E8%84%9A%E6%9C%AC
标签：脚本,const,name,手把手,博客,num,CSDN,数据 From： https://blog.csdn.net/qq_22554999/article/details/142500454脚本仅供娱乐，请多多包涵！感谢大家！
原创文章，未经允许禁止转载！！