如何開發油猴腳原本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. 代碼不夠優雅，須要去掉硬編碼