如何开发油猴脚本来block掘金用户

随着掘金用户不断增加，或多或少遇到"钢筋"用户。秉着眼不见为净的原则，在官方没有出屏蔽功能的情况下，利用油猴实现block用户。

使用

1. 浏览器安装Tampermonkey扩展
2. 访问脚本网站greasyfork.org安装本扩展
3. 点击页面上脚本扩展的block按钮
4. github.com/stanye/User… 欢迎提issue和PR

实现方法

根据用户id用jQueryremove相关DOM

$(`.username[href="/user/${id}"]`).parents('.item').remove();
复制代码

Tampermonkey中使用jQuery

// @require      https://code.jquery.com/jquery-3.3.1.min.js
复制代码

只针对掘金站点

// @include      /^https?:\/\/(\w+\.)?juejin\.im\//
复制代码

用户id

以我的为例 juejin.im/user/58f56b… 58f56b4b0ce463006bc084eb就是id

存储和读取blockList

使用 localStorage操作, 不做赘述

在页面中加按钮

const actionBox = $('.user-info-block .action-box');
if (actionBox.has('.big-block-btn').length === 0) {
    actionBox.append(`<button ${scope} class="follow-btn btn big-block-btn" style="color: red;">Block</button>`);
}
复制代码

scope样式问题

掘金用了vue的scope，用jQuery新增的内容想要套用原来的样式需要获取到scope生成的hash

const scope = $('.user-info-block .action-box')[0].attributes.item(0).nodeName;
复制代码

给按钮增加点击事件

$('#juejin').on('click', '.block-btn', block);
复制代码

jQuery获取dom早于vue请求数据并渲染

// 分页
$(window).on('scroll', () => {
    startClear();
});
// 第一次
setTimeout(startClear, 1000);
复制代码

暂时没好想法,先setTimeout和scroll

发布

利用github的Webhooks同步发布到greasyfork

1. 初始化import脚本

2. 开启webhook并应用

按提示在github仓库的settings -> webhooks创建hook, 每次仓库更新就会同步更新到greasyfork

小结

本意只是脑子一闪而过的idea，并付诸实现。

良好的社区气氛还是需要大家共同努力的。

TODO

1. 覆盖掘金全站的block脚本
2. 针对某条回复的block
3. blockList管理
4. 代码不够优雅，需要去掉硬编码