前情提要
逛論壇或網站常常有惱人的蓋板廣告，要馬就是要你登入、註冊， 要馬就是搞一堆課程的販售廣告， 對重視使用者體驗的人來說，真的是一場噩夢！ 為了解決這個問題，我模擬了AdBlock的其中一個功能，刪除頁面上的元素！
乾乾淨淨才是王道阿。
效果
按下ctrl+Q啟動刪除元素模式：
被選取的會加上邊框色彩，讓人確認是否要刪除：
點選確認後：
煩人的元素就此消失在這個永恆的宇宙裡。
觀念筆記
套件一：toastr
```javascript= //toast.js cdn匯入
const toastJS = ` <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.js"></script>`
$('body').append(toastJS);
[測試效果反應網站](https://codeseven.github.io/toastr/demo.html)
[[十分鐘學習] toastr - 簡易提示訊息](https://ithelp.ithome.com.tw/articles/10197861)
### 套件二：SweetAlert2
```javascript=
//設定cdn使用Sweetalert套件
let Sweetalert2=`<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>`
$('html').append(Sweetalert2)
有提供很多API範例，還可以自己定義可愛的小動物XD
監聽鍵盤組合鍵
document.addEventListener('keydown', function(e){
if(e.which==81 && e.ctrlKey==true){
//.....
}
Object.assign 動態修改樣式
用JS動態修改CSS的三種寫法，花式JS玩弄樣式，嚇死你的同事！
油猴程式碼
```javascript= // ==UserScript== // @name 刪除廣告元素 // @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world! // @author You // @match :///* // @require https://code.jquery.com/jquery-3.6.3.min.js // @icon https://www.hexschool.com/ // @grant none // ==/UserScript==
(function() { //---------------------------------------
// 宣告變數
let set
let Check = true;
let List=[]
//設定選取的border色彩效果
let styleNeon = `@keyframes neon-color {
from {
filter: hue-rotate(0deg);
}
to {
filter: hue-rotate(360deg);
}
}`
$('style:last').append(styleNeon)
//設定cdn使用Sweetalert套件
let Sweetalert2=`<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>`
$('html').append(Sweetalert2)
//使用者點選某個元素 執行刪除元素function
function SetDeleteEl(e){
e.preventDefault();
set=e.target.class
console.log(set)
const border={
border:"4px dotted red"
}
const Neon={
animation: "neon-color 2.5s linear infinite"
}
const NoBorder={
border:"none"
}
const StopNeon={
animation: ""
}
Object.assign(e.target.style,border)
Object.assign(e.target.style,Neon)
//e.target.remove()
if (Check==true){
Swal.fire({
title: '確定要刪除這個元素?',
showDenyButton: true,
showCancelButton: false,
confirmButtonText: '確認',
denyButtonText: `取消`,
}).then((result) => {
/* Read more about isConfirmed, isDenied below */
if (result.isConfirmed) {
e.target.remove()
List.push(e.target.className)
localStorage.setItem('List',List);
Check=false;
Swal.fire('成功刪除此元素!', '', 'success')
} else if (result.isDenied) {
Check=false;
Swal.fire('動作已取消', '', 'info')
Object.assign(e.target.style,NoBorder)
Object.assign(e.target.style,StopNeon)
};
});
}
//選取流程結束後 解開選取流程的事件綁定
$('body').unbind('click',SetDeleteEl)
}
//toast.js cdn匯入
const toastJS = ` <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.js"></script>`
$('body').append(toastJS);
// 當使用者按下Ctrl+Q 就執行主程序
document.addEventListener('keydown', function(e){
if(e.which==81 && e.ctrlKey==true){
RemoveListItem();
toastr.options = {
// 參數設定[註1]
"closeButton": false, // 顯示關閉按鈕
"debug": false, // 除錯
"newestOnTop": false, // 最新一筆顯示在最上面
"progressBar": false, // 顯示隱藏時間進度條
"positionClass": "toast-bottom-right",
"preventDuplicates": false, // 隱藏重覆訊息
"onclick": null, // 當點選提示訊息時，則執行此函式
"showDuration": "300", // 顯示時間(單位: 毫秒)
"hideDuration": "1000", // 隱藏時間(單位: 毫秒)
"timeOut": "2000", // 當超過此設定時間時，則隱藏提示訊息(單位: 毫秒)
"extendedTimeOut": "1000", // 當使用者觸碰到提示訊息時，離開後超過此設定時間則隱藏提示訊息(單位: 毫秒)
"showEasing": "swing", // 顯示動畫時間曲線
"hideEasing": "linear", // 隱藏動畫時間曲線
"showMethod": "fadeIn", // 顯示動畫效果
"hideMethod": "fadeOut" // 隱藏動畫效果
}
toastr.success( "已開啟刪除元素模式！" );
$('body').on('click',SetDeleteEl)
Check=true
}})
function RemoveListItem(){
if (localStorage.getItem('List')!=null){
item=localStorage.getItem('List').split(',')
for (i=0;i<item.length;i++){
item[i]='.'+item[i]
item[i]=item[i].replaceAll(' ','.')
try{
document.querySelector(item[i]).remove()}
catch{}
}
// item='.'+item
// item=item.replaceAll(' ','.')
// document.querySelector(item).remove()
}
}
//--------------------------------------------------------
})(); ```
心得
短短150行左右的程式碼，就寫得好辛苦！（汗 過去寫過很多次類似的東西，所以基本上沒有卡關的地方， 只是設計邏輯、嘗試的過程還是比想像的還要耗精神( ´•̥̥̥ω•̥̥̥ )
但寫出來比過去快很多，也比過去好看超級多的。 給自己一個讚讚！
重新把localstorge複習一遍，Object.assign、套件使用等。 算是一個確確實實的實力鞏固過程。
延伸
未來可以新增控制黑名單元素的UI。 可以新增、刪除，看有哪些元素被列入要刪除的黑名單。
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
很好的文章，我已拿來作為宣傳內容，分享到眾多公開社團！
https://www.facebook.com/groups/javascript.tw/permalink/5541848932583066/
https://www.facebook.com/groups/javascript.html.css.node/permalink/1816342628760240/
https://www.facebook.com/groups/f2e.tw/permalink/6002559003114748/