给SOB右上角添加一键已读按钮-GreasyFork脚本
一、前言
内容说明
本文讲述的是，通过TamperMonkey插件，执行一段js脚本。然后在阳光沙滩右上角左边的铃铛旁边，添加一个一键已读按钮。
长这样： 
样式都是手写的，可以自定义。
为什么会产生这个需求？
不是说我不尊重大家的回复。而是我每次我收到消息，我就会打开那条动态，然后一条一条的查看完所有回复。
大家都知道的是，一条动态下会有多条回复。我只要打开了动态，那么所有的回复我都会看完。
此时，所有的回复我已经一次看完了，但是右上角还是有小红点，而且我知道这些红点都是我已经看过的消息。
那么此时，再一条条重复点击消息去消除小红点就不太合适。
万幸的是，大锯哥提供了一个 一键已读全部消息的接口：
GET https://api.sunofbeaches.com/ct/msg/read
只要调用一次这个接口，就可以实现一键已读。
二、实现逻辑
思路很清晰了，就是产生一个按钮。然后点击它发送请求。发送完毕请求后，将右上角的小红点隐藏掉。
-
怎么添加一个按钮？
使用js的dom操作。
首先找到铃铛所在的位置，找铃铛的父亲，然后创建一个节点。把节点添加到铃铛父亲的第一个儿子那里。
-
怎么对按钮添加样式？
直接在body标签下，创建一个style标签，然后标签的内容就是css字符串。
为了字符串编写更加方便，使用es6的 `` 表达式，支持换行
-
怎么发送请求？用什么发送请求？
如果可以选，自然是使用axios这种比较方便。但是我们是额外的脚本添加到别人的网站。依赖越少越好，越接近原生越好。
所以我选择了使用 fetch。
fetch是js提供的原生ajax接口，并且调用起来和axios很像，很方便。
发送请求时，不要忘记在请求头携带 sob_token.
sob_token的获取方式：直接从cookie中取出，取出第一个即可。但是我发现cookie中有很多sob_token，作用域不太一样，用 / 作用域的sob_token似乎就能调用上面所说的接口。此处请 @拉大锯 大哥说明下sob_token具体用哪个
-
怎么隐藏右上角的小红点？
红点是一个标签，找到他，让他的
display:none;即可 -
如何让这段js代码执行？
需要用到一个插件，TamperMonkey 或者 暴力猴 或者游猴。都可以。因为脚本内容都是原生js，兼容性应该是相当不错的
脚本已经上传到GreasyFork https://greasyfork.org/zh-CN/scripts/440351-sobclear
三、具体代码
代码中有比较详细的注释，也比较简单。懂js dom 基础就可以看懂了。
let cssStr = `
#clear-msg{
color: #0084ff;
margin-right: 12px !important;
}
`;
/**
* 添加css样式
* @returns {boolean}
*/
function initCss() {
let addTo = document.querySelector('body');
if (!addTo)
addTo = (document.head || document.body || document.documentElement);
//创建style标签
let cssNode = document.createElement("style");
cssNode.setAttribute("type", "text/css");
//设置css值
cssNode.innerHTML = cssStr;
try {
addTo.appendChild(cssNode);
} catch (e) {
console.log(e.message);
}
}
/**
* 获取cookie值
* @param name
* @returns {string|null}
*/
function getCookie(name) {
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}
/**
* 发送请求清除消息
*/
function clearMsg() {
// https://api.sunofbeaches.com/ct/msg/read
fetch('https://api.sunofbeaches.com/ct/msg/read',{
headers:{
'sob_token':getCookie('sob_token')
}
})
.then(response => {
console.log(response)
let ring =document.querySelector('.el-badge__content')
ring.style.display="none"
})
.then(data => console.log(data));
}
//创建节点
let clsBtnParent = document.getElementById('header-login-success');
let newnode = document.createElement("i");
//设置id
newnode.setAttribute('id', 'clear-msg')
newnode.setAttribute('class', 'el-icon-delete')
//添加到节点中
clsBtnParent.insertBefore(newnode, clsBtnParent.firstChild);
//初始化样式
initCss();
//添加点击事件
setTimeout(() => {
newnode.onclick = function () {
clearMsg()
}
}, 1000)
ccTyL 回复 @断点-含光君 
