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

使用

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

实现方法

根据用户id用jQueryremove相关DOM

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

Tampermonkey中使用jQuery

1
// @require      https://code.jquery.com/jquery-3.3.1.min.js

只针对掘金站点

1
// @include      /^https?:\/\/(\w+\.)?juejin\.im\//

用户id

以我的为例 https://juejin.im/user/58f56b4b0ce463006bc084eb
58f56b4b0ce463006bc084eb就是id

存储和读取blockList


使用localStorage操作, 不做赘述

在页面中加按钮

dropdown-menu
dropdown-menu
action-box
action-box
1
2
3
4
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

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

给按钮增加点击事件

1
$('#juejin').on('click', '.block-btn', block);

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

1
2
3
4
5
6
// 分页
$(window).on('scroll', () => {
    startClear();
});
// 第一次
setTimeout(startClear, 1000);

暂时没好想法,先setTimeout和scroll

发布

利用github的Webhooks同步发布到greasyfork

  1. 初始化import脚本
初始化import脚本
初始化import脚本
  1. 开启webhook并应用
开启webhook并应用
开启webhook并应用

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

小结

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

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

TODO

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