给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)