我愛JS · 10月15日

不是共產黨，但是審查低質量雜訊很重要！自己寫一個JS腳本過濾！

本文轉自:https://ithelp.ithome.com.tw/articles/10338948

前情提要

資訊大爆炸。

有時候我們瀏覽技術文章，不一定真的是想學深奧的高級技術。然而劣質低端的文章充斥著，則會降低我們學習的效率、甚至變成噪音與雜訊，干擾我們的思緒。因此針對某些洗文或是質量很低的作者，我們必須列為思想犯，否則會降低閱讀質量，平白浪費自己的時間、平台的版面、上網的電力、看到垃圾資訊的副作用等等....

構思來源

如果有個思想審查警衛可以：去除那些垃圾低端，稱不上技術文章的雜訊。 以確保未來瀏覽文章的時候，不會再被洗文打擾，也可以針對不喜歡的主題去封鎖，讓時間與精神更能專注於自己想要學的資訊。

阻止一些垃圾就是喜歡把自己尚未整理的白痴內容一直丟上來，什麼都還不懂，把技術文章當成個人日記簿，寫一堆自我囈語、無病呻吟，每天大量狂發文章，昭告天下以為這就是努力，欺騙自己也浪費別人的人生。

「思想審查警衛」出動！

功能

把頭像屏蔽
加上思想通緝犯、紅字與刪除線
新增封殺按鈕
版面通知封殺名單與文章數
透過ajax確認某id的最新ID

效果截圖

此截圖僅是腳本示範，跟其使用者無關，本人沒有任何覺得此使用者發的文章是差勁的意味，我認為非常上進、值得學習。

此圖也只是隨機挑user使用，純粹作為範例用途，不代表我個人意見。

腳本下載

https://greasyfork.org/zh-TW/scripts/477283-%E6%80%9D%E6%83%B3%E7%8A%AF%E5%B0%81%E6%AE%BA

原理說明

鄭重聲明，這個示範真的毫無任何私人意味，此腳本也只是針對不同的主題去隱藏，例如我想學python就不想看到JS的文章，因此使用此工具幫忙隱藏罷了。取名做思想警察、比喻成清除垃圾等都只是文學上的趣味。請勿當真Ꮚ･ꈊ･Ꮚ

這次的技術可說比較難，認真難很多！但是趣味性以及功能性是無比的超越！可以說幾乎是我寫系列文以來，最頂、最派的一篇！不過很多觀念已經出現過，在【前端小試身手】系列裡面，每次的腳本都是主打實用，因此cookie或localstorage這種技術當然都會運用到。

JS原始碼

// ==UserScript==
// @license MIT
// @name         👮思想犯封殺
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  把廢文製造機轟出去
// @author       You
// @match       https://ithelp.ithome.com.tw/articles*
// @match        https://ithelp.ithome.com.tw/users/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=ithome.com.tw
// @grant        none
// @run-at document-end
// ==/UserScript==

let URL = window.location.href;
let ArticleSite = "https://ithelp.ithome.com.tw/articles?tab=tech"
let UserSite = "https://ithelp.ithome.com.tw/users/"

// 判斷URL的開頭部分
if (URL.startsWith(ArticleSite)) {
    //文章頁執行清理垃圾程序
    CleanGarbage();
} else if (URL.startsWith(UserSite)) {
    UserCheck();
} else {
    console.log("這邊不執行腳本");
}


// 餅乾儲存的機制函數-------------------------------------------------
function setListInCookie(list) {
    document.cookie = 'myList=' + JSON.stringify(list) + '; expires=Wed, 31 Dec 2099 23:59:59 GMT;';
}

// 從 Cookie 中獲取 list
function getListFromCookie() {
    var cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)myList\s*\=\s*([^;]*).*$)|^.*$/, "$1");
    return JSON.parse(cookieValue) || [];
}


function CleanGarbage(){

// 從本地存儲中獲取數據
var myListData = localStorage.getItem("myList");
// 解析數據到變量 list
var list = myListData ? JSON.parse(myListData) : [];


//list = getListFromCookie()||[]; // 儲存要刪除的字符串名單
// 找到所有CLASS是"qa-list__info-link"的<a>元素
var linkElements = document.querySelectorAll('.qa-list__info-link');
var removedCount = 0; // 初始化已清除的垃圾數量

for (var j = 0; j < list.length; j++) {

// 遍歷這些<a>元素，確保文本內容包含"伍貳捌"，然後刪除其父元素
for (var i = 0; i < linkElements.length; i++) {
    if (linkElements[i].textContent.includes(list[j])) {
        // 開始向上查找父元素
        var parentElement = linkElements[i].parentElement;

        while (parentElement) {
            // 如果找到具有"classname"為"qa-list"的<div>元素，則刪除它
            if (parentElement.classList.contains('qa-list')) {
                parentElement.remove();
                removedCount++; // 增加清除的數量
                console.warn('抓到"'+list[j]+'"這位思想犯');
                break; // 找到並刪除後，結束循環
            }

            parentElement = parentElement.parentElement;
        }
    }
}

    if (removedCount>0){
        // 顯示已清除的垃圾數量
        console.log('已清除他的 ' + removedCount + ' 篇垃圾');}
removedCount=0;
}
}
//-------------------------------------------------------
// 為了防止五百八改名，我們針對他的ID去ajax得到他最新的名稱
function FindBitch() {
  // 使用 Fetch API 獲取指定 URL 的內容
  return fetch("https://ithelp.ithome.com.tw/users/20163468")
    .then(response => response.text())
    .then(data => {
      // 創建一個臨時 div 元素以容納頁面內容
      var tempDiv = document.createElement("div");
      tempDiv.innerHTML = data;

      // 查找 class 為 "profile-header__name" 的元素
      var profileNameElement = tempDiv.querySelector(".profile-header__name");

      if (profileNameElement) {
        // 刪除元素內的所有 <span> 元素
        var spanElements = profileNameElement.querySelectorAll("span");
        spanElements.forEach(function(span) {
          span.remove();
        });

        // 讀取元素的文本內容，去掉前導和尾隨空格
        var text = profileNameElement.textContent.trim();

        // 返回處理後的文本內容
        return text;
      } else {
        return "未找到元素";
      }
    })
    .catch(error => {
      console.error("發生錯誤: " + error);
      return "發生錯誤";
    });
}


//-------------------------------------------------------



function UserCheck(){
  //轉換資料從餅乾到localstorage
                        var currentCookieValue = getCookie("myList");

                        // 2. 存儲數據到本地存儲
                        if (currentCookieValue) {
                            var list = JSON.parse(currentCookieValue);
                            // 存儲到本地存儲
                            localStorage.setItem("myList", JSON.stringify(list));
                        }else{

                            FindBitch()
                                .then(text => {
                                let FirstKill = [text];
                                setListInCookie(FirstKill);
                            })
                                .catch(error => {
                                console.error("找不到五百八:", error);
                            });


                        }



// 刪除不需要的ID
document.querySelector('.profile-header__account').remove();
//封殺按鈕-------------------------------------------------
// 找到具有class為"profile-header__right"的元素
var profileRightElement = document.querySelector('.profile-header__right');
var pullRightElement = profileRightElement.querySelector('.pull-right');

        // 創建一個新按鈕元素
        var BlockBtn = document.createElement('button');
        BlockBtn.textContent = '封殺';
        // 添加樣式和類名到按鈕
        BlockBtn.style.marginTop = '10px';
        BlockBtn.style.width = '100%';
        BlockBtn.className = 'btn btn-trace trace_btn_border BlockBtn';

        // 將按鈕元素添加到"pull-right"元素內部
        pullRightElement.appendChild(BlockBtn);

// 通緝犯名單的cookie------------------------------------------------

// 從 Cookie 中加載 list（例如，頁面加載時）
list = getListFromCookie()||[];
let UserBlock = document.querySelector('.profile-header__name');
let text = UserBlock.textContent.trim();


 // 如果使用者已經在封殺名單內的判斷，已存在或不存在
                if (list.includes(text)) {
                        BlockStart(BlockBtn);
                    }
                    else
                    {
                    // 針對封殺按鈕進行監聽事件
                    BlockBtn.addEventListener('click', function() {
                    list.push(text);
                    setListInCookie(list);

                    //先加入到名單內，然後再執行封殺事件
                    BlockStart();
                    // 輸出到控制台
                    console.log('黑名單新增:' + text);

                        //本地儲存機制-----------------------------
                        let currentCookieValue = getCookie("myList");
                        let list2 = JSON.parse(currentCookieValue);
                        // 存儲到本地存儲
                        localStorage.setItem("myList", JSON.stringify(list2));

        });
                    }
}

// ------------------------------------------------

//封殺事件的函數
function BlockStart(){
    let BlockBtn = document.querySelector('.BlockBtn');
                   BlockBtn.textContent = '已封殺';
                    BlockBtn.disabled = true;
                    BadText();
                    BadImg();
}

//封殺事件函數裡面的細項函數


function BadText(){
// 標記這傢夥是垃圾-------------------------------------------------
    let UserBlock = document.querySelector('.profile-header__name');
    let newHeading = document.createElement('h1');
    newHeading.textContent = '思想通緝犯';

    // 把思想通緝犯這幾個大字加上去
    UserBlock.parentElement.insertBefore(newHeading, UserBlock);
    UserBlock.style.textDecoration = "line-through";
    UserBlock.style.color = "red";

}


function BadImg(){
//圖片進行網點作業XD-------------------------------------------------
var originalImage = document.querySelector('.profile-header__avatar');

// 創建一個包含交叉紅線的覆蓋層 <div> 元素
var overlayDiv = document.createElement('div');
overlayDiv.style.position = 'absolute';
overlayDiv.style.width = '150px';
overlayDiv.style.height = '150px';
overlayDiv.style.background = 'linear-gradient(45deg, black 50%, transparent 50%), linear-gradient(-45deg, black 50%, transparent 50%)';
overlayDiv.style.backgroundSize = '5px 5px, 5px 5px';


overlayDiv.style.backgroundPosition = '0 0, 0 2px';

// 將覆蓋層疊加到圖片上
originalImage.parentNode.appendChild(overlayDiv);

// 設置覆蓋層的位置，以與原始圖像對齊
overlayDiv.style.top = originalImage.offsetTop + 'px';
overlayDiv.style.left = originalImage.offsetLeft + 'px';

// 設置覆蓋層的z-index，以確保它在圖片上方
overlayDiv.style.zIndex = '2';
}

觀念筆記

這個腳本開發足足花了我一整個晚上，將近八小時之久。有趣的是，其中為了進行測試才選某些user當作隱藏對象，否則腳本執行上會出錯。細心的人若觀察原始碼，也會發現裡面有個firstKill，那是必須要的段落，先設置好cookie的首要內容物，才有辦法繼續操作下去( ิ◕㉨◕ ิ)

也就是初始化的概念XD

另一個有趣的點是，為了防止使用者改名導致腳本出錯，我甚至不惜再寫一段ajax，去更新一下ID，這樣不管人家怎麼改，都逃不了，要改成「別抓我」也沒用，這個腳本都還是可以run。

心得後記

我只能說這篇是自從「備份IT幫發文、一眼全覽」最強的JS教學文章！超派，真的不騙( ﾒ∀・) 有些人喜歡看前端小試身手，有些人喜歡前端動手玩創意；其實這兩個系列的本質都是JS的教學，是可以互相連接的，但也有很多不同的重心。

這個系列就是以腳本為主，重點在於創意與發想，打到使用者痛點。【前端動手玩創意】則是以建構網站為起點，任何元素與概念都會變成網頁上的一部分，算是比較基礎工的建立。

如果對JS的強大感興趣，那麼可以把這兩個系列交互看，反覆的閱讀、實際動手操作，這樣一來的學習非常踏實，甚至比YT學習都來的高效率、實際。尤其此系列都是原創發想的腳本，當然超強！喜歡記得關注，未來還有更多超酷的前端內容可以玩，下課⧸⎩⎠⎞͏(・∀・)⎛͏⎝⎭⧹

2個讚 0留言 249瀏覽

按讚的人：

共有 0 則留言

登入之後發表留言

文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式

我愛JS

此人尚未填寫簡介。