利用油猴脚本显示扇贝网真实打卡日记

本文首发在我的个人博客：https://jlice.top/p/7kmxm/。欢迎大家前去参观，么么哒~

前一段时间发现扇贝网页版显示的打卡日记和手机上看到的不一致，感觉应该是网页版开发滞后的原因。这种不一致给查卡带来了诸多不便，于是就设法解决该问题。

起初我想到的方案是做一个静态页面放到对象存储上，然后对象存储开启静态服务，静态页面通过Ajax请求手机版的RESTful接口获取数据，然后生成打卡日记。不过，通过反复试验发现这种方法行不通。

$.get(url, function(data){// do something
});

直接使用Ajax请求会报错：

No 'Access-Control-Allow-Origin' header is present on the requested resource.

这是因为服务器不允许跨站。

然后接触到了用JSONP来进行跨站请求。因为js脚本可以跨站，像静态博客的评论功能就是用的跨站js脚本，JSONP的思路是在请求的地址上携带一个callback参数，服务端以这个callback参数作为函数名包裹JSON数据，然后在返回数据时调用这个函数，就把JSON数据传过来了。

$.ajax({url: url,dataType: 'jsonp',success: function(json){// do something}
});

但是，使用JSONP的前提同样是需要服务器端的配合。假如服务器端不适配JSONP，也就是不返回包裹JSON数据的函数，而是依旧返回JSON，那么JSON数据就会被视为javascript脚本运行，会报错：

Uncaught SyntaxError: Unexpected token :

然后想到iframe也可以跨站，于是试试iframe，结果发现依然是想多了：

Refused to display '***' in a frame because it set 'X-Frame-Options' to 'deny'.

也就是iframe也是需要服务器端配合。假如服务器端不允许iframe，那么iframe便不能跨站。

跨站请求其实也比较危险，例如XSS、CSRF。于是，我决定不通过跨站请求，而是利用油猴脚本来实现我的需求，顺便补充了点jQuery。

// ==UserScript==
// @name         显示真实打卡日记
// @namespace    https://www.shanbay.com/
// @version      0.1
// @description  显示时区、真实打卡日记、打卡时间
// @author       文剑木然
// @match        https://www.shanbay.com/checkin/user/*
// @grant        MIT
// @require      https://static.baydn.com/static/scripts/jquery-1.7.2.min.js
// ==/UserScript==$(function(){var url = window.location.href.replace('www.shanbay.com', 'www.shanbay.com/api/v1').replace('?page', '?ipp=10&page');$.get(url, function(json){// 显示时区var timezone = json.data[0].user.timezone;if(json.data.length > 0 && timezone !== 'Asia/Shanghai'){$('h2').html($('h2').html() + '（' + timezone +'）');}// 修改打卡日记for(var i=0; i<10; i++){var idata = json.data[i];var icheckin = $('#checkin').children().eq(i);var number = icheckin.find('span.number');number.html(' ' + idata.num_checkin_days);var note = icheckin.find('div.note');if(json.data[i].note_length === 0){note.html(idata.info);}else{note.html(idata.info + ' , ' + idata.note);}var date = icheckin.find('div.span4');date.html('<strong>' + idata.checkin_date +'</strong>&nbsp;&nbsp;&nbsp;&nbsp;(' +idata.checkin_time.replace('T', '&nbsp;&nbsp;') + ')');}});
});

jQuery中，children()指直接子元素，.find()能递归查找子元素，.eq(i)为第i个元素。用jQuery来修改DOM还是十分简便的。

利用油猴脚本显示扇贝网真实打卡日记相关推荐

日常使用——利用油猴脚本将数据所需要的数据输出的控制台
最近由于碰到需要从网页上扒下来不少数据表的内容,由于网站上有了相应的数据保护,无法直接从网页上复制,通过F12调出查看网页上的表格结构,发现数据卸载 titile属性里面,又设置的是只读. 因此想到利 ...
如何利用油猴脚本（tampermonkey)免费使用知网维普？
1. 首先在浏览器里找到"扩展程序" 谷歌浏览器:自定义及控制chrome--更多工具--扩展程序 Edge浏览器:设置及其他--扩展 ps:自定义及控制chrome} 设置及其 ...
手把手教学：使用油猴脚本对CCTV央视网启用HTML5播放器
Flash Player明天就会阻止加载Flash内容.但是CCTV也仅仅是把新出的视频启用了H5播放器,之前的视频仍然需要Flash插件才能播放.很多人说装一个油猴脚本,可是问题是,不是所有人都玩得 ...
扇贝python离线_Python项目：扇贝网小组查卡助手
扇贝网是一个非常棒的英语学习网站,大家还可以加入一些小组,一起交流学习.共同进步.但是,小组管理起来非常辛苦,尤其是在0点前踢出不打卡的成员,因此考虑利用程序来实现小组查卡自动化. 登录操作扇贝网 ...
一日一技 | 利用油猴插件自定义网页显示字体
浏览器打开网页的字体,可以通过安装油猴插件的方式实现自定义,带来统一的阅读体验. 引言效果图示例如下. 效果图上图左侧,用 Safari 打开百度百科词条页面,默认显示的网页字体是 macOS 中 ...
利用油猴插件 Tampermonkey 编写脚本以屏蔽网页指定元素——以屏蔽百度搜索右边的百度热榜为例
一.起因一直使用 Tampermonkey 中的 AC-baidu-重定向优化百度搜狗谷歌必应搜索_favicon_双列这个插件屏蔽好好的,今天突然屏蔽不了,正好自己编写一个简单的插件试试完成这一 ...
利用油猴插件实现百度云满速下载
提示:这里建议搭配IDM进行下载!!!可以先去了解一下IDM. 下载油猴插件http://tampermonkey.net/ 下载js脚本点我跳转将网页内容全部复制,保存到文本文档中安装油猴插件 ...
使用油猴脚本看视频的过程
1.先在Chrome安装好油猴扩展程序 2.打开https://greasyfork.org/zh-CN 3.搜索[视频] 4.点击[懒人专用] 5.安装脚本 6.打开油猴管理面板,看到脚本已启用
【油猴脚本】改变网页代码块的字体样式/美化LeetCode代码文字显示（CSS；设置@font-face和font-family）
美化网页的代码字体脚本安装地址: 参考:改变网页代码块的字体样式更新日志 V0.1 更新时间:2021年9月20日23:04:41 更新功能: 1.改变LeetCode.CSDN.博客园嵌入的代码 ...

利用油猴脚本显示扇贝网真实打卡日记

利用油猴脚本显示扇贝网真实打卡日记相关推荐

最新文章

热门文章