ublock-origin-filters - กำจัดสิ่งรบกวนด้วยฟิลเตอร์ uBlock Origin

• ชุดรวม ฟิลเตอร์ uBlock Origin ส่วนตัวสำหรับกำจัดสิ่งรบกวนที่ไม่จำเป็นบนบางเว็บไซต์
• ใช้วิธีอนุญาตเฉพาะงานที่ต้องการทำในแต่ละเว็บไซต์ และปิดใช้งานองค์ประกอบอื่นที่อาจดึงความสนใจ
• วิธีใช้งานคือเพิ่ม 0-include-all.txt ไปที่ Filter Lists > Import... ของ uBlock Origin เพื่อนำเข้าฟิลเตอร์
• วัตถุประสงค์ของฟิลเตอร์ตามเป้าหมาย
  • ป๊อปอัปบัญชี Google: ปิดใช้งานป๊อปอัป Google ที่น่ารำคาญซึ่งปรากฏบนหลายเว็บไซต์
  • YouTube: กำจัดสิ่งรบกวนอย่างวิดีโอแนะนำ การเล่นอัตโนมัติ คำแนะนำ Shorts ฯลฯ และเน้นการใช้งานเพื่อดูวิดีโอ ค้นหา และอัปโหลด
  • Twitter: กำจัดสิ่งรบกวนอย่างฟีดและแถบด้านข้าง และเน้นการใช้งานเพื่อดูฟีดทวีตของโปรไฟล์เฉพาะ ดูเนื้อหาทวีตกับความคิดเห็น และเขียนทวีต
  • LinkedIn: กำจัดสิ่งรบกวนอย่างฟีดและแถบด้านข้าง และเน้นการใช้งานเพื่อดูโปรไฟล์และบริษัท อ่านโพสต์เฉพาะ ตอบข้อความ และเขียนโพสต์
  • Stack Overflow และ Stack Exchange: กำจัดคะแนน รูปโปรไฟล์ และการแจ้งเตือนการโต้ตอบ และเน้นการอ่านคำตอบอันดับบนสุดของคำถาม
• มีบันทึกว่าปัจจุบันใช้ส่วนขยาย Firefox ชื่อ Unhook สำหรับ YouTube และอาจสามารถแทนที่ด้วยฟิลเตอร์ได้

[GN⁺]

ความคิดเห็นจาก Hacker News

• หลังจากบล็อกโฆษณาและแถบด้านข้างไปเยอะแล้ว การขยายองค์ประกอบข้อความที่เหลือให้ใช้พื้นที่ว่างนั้นอีกครั้งก็มีประโยชน์
  เช่น :xpath(//main/div):style(min-width: 80% !important) อะไรทำนองนี้
  ยิ่งไปกว่านั้น สำหรับบางไซต์ก็เคยพยายามใส่กฎ column-count: เพื่อให้หน้าจอดูเหมือนหนังสือพิมพ์ แต่มีอะไรให้ปรับมากกว่าที่คิด และ เลย์เอาต์ DOM ของเว็บไซต์ยุคใหม่แทบจะเหมือนพื้นที่ปนเปื้อน
  https://developer.mozilla.org/en-US/docs/Web/CSS/column-coun...
  ตัวอย่างขั้นต่ำของการฉีด column-count: ด้วย uBlock อยู่ที่นี่: https://i.ibb.co/k3bRwhP/example-1.webp
  theguardian.com###maincontent:style(margin-left: -28vw !important; min-width: 90vw !important; column-count: 4 !important)
theguardian.com##div:style(border: none !important)

  • ถึงจุดนี้ การดึงคอนเทนต์ผ่าน RSS แล้วจัดสไตล์เป็นรูปแบบคอลัมน์ใน reader อาจจะดีกว่า
    ผมชอบรูปแบบคอลัมน์ และสำหรับสิ่งที่อ่านเป็นประจำ ก็กำลังพยายามกลับไปใช้ RSS เป็นหลักพร้อมกับ smart filter หลายตัว รู้สึกว่าตั้งแต่แรกไม่ควรทิ้ง RSS ไปเลย
  • ถ้าทำให้สิ่งนี้ทำงานทับ Reading Mode ของ Firefox ได้ก็คงดี
  • ผมค่อนข้างชอบตกแต่งหลาย ๆ ไซต์ใหม่ด้วย uBO และ Stylus แต่หลายกรณี แค่สลับไปใช้ Reader Mode ก็เร็วกว่าและดีกว่า
    ไม่ได้ทำได้เสมอไป แต่ก็ทำได้ค่อนข้างบ่อย
  • กฎแรกเป็นทริกที่ดี บางครั้งถ้าลบองค์ประกอบบางอย่างออก เว็บไซต์ก็พังได้

• ใน uBlock Origin ให้ไปที่ Options > Filter Lists > Annoyances แล้วเปิดรายการต่อไปนี้ก็พอ
  "AdGuard – Annoyances"
"EasyList – Annoyances"
"uBlock filters – Annoyances"
  แบบนี้จะกำจัด องค์ประกอบน่ารำคาญ 99.9% ของเว็บไซต์ได้โดยไม่ทำให้ฟีเจอร์หลักเสีย ผมทำแบบนี้ทุกครั้งที่ติดตั้ง Chrome ใหม่มาหลายปีแล้ว และได้ผลดีมาก

  • จริง ๆ แล้วอินเทอร์เน็ตมีอยู่ สองเวอร์ชัน และเราใช้เวอร์ชันไหนก็ขึ้นอยู่กับว่าตั้งค่า ad blocker ไว้ดีแค่ไหน
    ช่วงวันหยุดผมใช้แล็ปท็อปของแม่ แล้วงงอยู่พักหนึ่งว่าทำไมเว็บที่เข้าไปถึงดูต่างออกไปมาก แทบทุกไซต์ถูกโฆษณาปูเต็มไปหมด มีแบนเนอร์คั่นระหว่างย่อหน้า แถบด้านข้างที่เต็มไปด้วยโฆษณา แม้แต่ภาพพื้นหลังที่ขายของด้วย จนต่างจากภาพที่คุ้นเคยโดยสิ้นเชิง
  • AdGuard ดีกว่า EasyList ไหม?

• ถ้าใช้ uBlock Origin ผมสงสัยว่าก่อนเริ่มโปรเจกต์นี้ เคยลองส่งฟิลเตอร์เหล่านั้นไปยังรายการ uBlock Annoyances หรือ EasyList Annoyances แล้วหรือยัง
  น่าจะช่วยคนได้มากกว่าการสร้างรายการ Annoyances ใหม่อีกอันมาก
  https://github.com/uBlockOrigin/uAssets

  • นี่ไม่ใช่แค่องค์ประกอบน่ารำคาญธรรมดา แต่ใกล้เคียงกับ ฟีเจอร์หลัก ของไซต์
  • รายการ Annoyances บางรายการอาจลบแม้กระทั่งสัญญาณทางสายตาว่าเว็บไซต์มี RSS feed ออกไปมากเกินไป
  • ไม่รู้จักรายการนี้มาก่อน น่าลองเพิ่มเข้าไปในฟิลเตอร์ของผม แล้วตรวจดูว่ากฎที่ผมสร้างไว้ใช้กับที่นั่นได้ด้วยไหม

• โดยส่วนตัวแล้ว บนคอมพิวเตอร์ที่ใช้ทำงาน ผมต้องซ่อน คำถามที่กำลังเป็นที่นิยม ของ Stack Exchange ไว้ สำหรับผมมันแทบจะเหมือนหญ้าแมวสำหรับแมวเลย
  askubuntu.com###hot-network-questions
serverfault.com###hot-network-questions
stackexchange.com###hot-network-questions
stackoverflow.com###hot-network-questions
superuser.com###hot-network-questions
  อีกอย่าง หลายเว็บไม่สนใจ prefers-reduced-motion เลย ผมจึงมักซ่อนสิ่งรบกวนสายตาอย่างคารูเซลไม่รู้จบหรือแอนิเมชันตกแต่งน่ารัก ๆ อยู่บ่อย ๆ

  • ตั้งใจเข้าไปแก้คำถามเรื่องวงจรชีวิตของคอมโพเนนต์ React แต่รู้ตัวอีกทีก็กดเข้าไปอ่านข้อยกเว้นกฎสุดซับซ้อนของ Dungeons & Dragons แล้ว
  • ผมไม่เคยสนใจคอลัมน์นั้นเลยมานาน เพราะสมองเรียนรู้ไปแล้วว่าอะไรที่อยู่ตำแหน่งนั้นล้วนเป็นของตกแต่งไร้ประโยชน์
    วันหนึ่งลองอ่านคำถามบางข้อจริง ๆ แล้วก็ประหลาดใจที่เนื้อหาน่าสนใจมาก และเข้าใจเต็ม ๆ ว่าทำไมถึงเหมือนหญ้าแมว โชคดีที่มีสวิตช์ให้ปิดเองได้ เลยหลีกเลี่ยงการติดได้
  • ผมก็คล้ายกัน แต่ใช้ element picker เฉย ๆ รูปแบบกฎเลยต่างไปนิดหน่อย
    stackoverflow.com##.c-pointer.js-quack-btn
stackoverflow.com##.js-step01.js-step.step.ws-nowrap
stackoverflow.com##.js-step02.js-step.step.has-width.ta-center
stackoverflow.com##.quack-popover--arrow
stackoverflow.com###overlay-header
stackoverflow.com###feed-link
stackoverflow.com##.mb16.s-anchors__default.s-anchors.s-sidebarwidget__yellow.s-sidebarwidget
stackoverflow.com##.grid--cell.js-reactions
stackoverflow.com##.mb16.s-anchors__grayscale.s-anchors.s-sidebarwidget__yellow.s-sidebarwidget
    น่าเสียดายที่ไม่ได้ใส่คอมเมนต์ไว้ว่าแต่ละอันใช้ทำอะไร อันหนึ่งอาจเป็นแบนเนอร์แนวขอให้โหวต และอีกอันน่าจะเป็นกล่อง “Featured on Meta” กับแถบด้านซ้ายที่ไม่เคยใช้เลย ถึงด้านบนจะไม่มี แต่ช่วงหลังผมก็เพิ่มการบล็อกป๊อปอัป “New Search AI Experience” ที่น่ารำคาญเข้าไปด้วย
    ดีที่มีชุดกฎแยกสำหรับแบนเนอร์คุกกี้ แต่กฎชุดนั้นแหละที่ก่อปัญหามากที่สุด ถ้าไม่โต้ตอบกับแบนเนอร์คุกกี้ บางเว็บจะทำงานไม่ถูกต้อง หรือไม่โหลดเลย ผมเกลียดอินเทอร์เน็ตยุคใหม่ที่ไม่มี uBlock จริง ๆ
  • กฎพวกนี้ยอดเยี่ยมเลย น่าจะช่วยส่ง PR ของ StackOverflow ให้ repo นี้ได้: https://github.com/mig4ng/ublock-origin-filters/pull/4

• ผมใช้วิธีคล้าย ๆ กัน แต่เป้าหมายของผมคือ การปกป้องความเป็นส่วนตัว และหลีกเลี่ยงฟีดจากอัลกอริทึม
  ใช้ส่วนขยาย Redirector ของ Firefox เพื่อรีไดเรกต์ลิงก์ YouTube, Twitter, StackOverflow ไปยังฟรอนต์เอนด์ทางเลือกอย่าง Piped, Nitter, AnonymousOverflow ตามลำดับ มีรายการโปรเจกต์และอินสแตนซ์เหล่านี้ที่ยังได้รับการดูแลอยู่ด้วย
  ส่วนใหญ่เป็นโอเพนซอร์สเสรี เคารพความเป็นส่วนตัว และด้วยคุณสมบัติของการเป็นซอฟต์แวร์ที่มีจริยธรรม ก็เลยบังเอิญให้ฟรอนต์เอนด์ที่ปราศจากสิ่งรบกวนมาด้วย
  https://github.com/digitalblossom/alternative-frontends
  https://farside.link

  • ดีมากเลย ผมเคยใส่ไอเดียคล้าย ๆ กันไว้ใน bucket list ว่าจะสร้างบริการทางเลือกที่ไม่มีสิ่งรบกวน แล้ว somehow รีไดเรกต์ไปใช้มัน
    ดีใจที่รู้ว่ามีคนคิดเหมือนกัน และมีเวอร์ชันที่ทำไว้ใช้งานออนไลน์แล้ว

• เมื่อก่อนผมเคยรวบรวมวิธีลบ ของตกแต่งหลอกให้จ่ายเงิน บน Reddit กับ Twitter ไว้
  reddit.com##.awarding-icon
reddit.com##.awardings-bar
reddit.com##.give-gold-button
twitter.com##:xpath(//div[contains(@style, "hex-hw-shapeclip-clipconfig")]):style(clip-path: circle(50%) !important)

  • ตอนนี้ Reddit ยุติ awards ไปแล้ว แต่ฟิลเตอร์ยังคงมีผลกับโพสต์เก่า ๆ
  • กฎสุดท้ายทำอะไรเหรอ?

• เป็นกฎสำหรับกำจัด ป๊อปอัป Login With Google ที่กระจายอยู่ทั่วอินเทอร์เน็ต
  accounts.google.com/gsi/iframe
  มันไม่ทำให้ปุ่มล็อกอินด้วย Google เองพัง ดังนั้นถ้าจำเป็นจริง ๆ ก็ยังล็อกอินด้วยบัญชี Google ได้

  • เดี๋ยวลองใช้ดู ถ้าโอเคผมก็อาจเพิ่มเข้าไปด้วย ป๊อปอัปพวกนั้นน่ารำคาญ

• ผมใช้ฟิลเตอร์ uBlock Origin สำหรับ Hacker News แบบนี้อยู่
  news.ycombinator.com##.comment:style(max-width: 70ch !important; overflow: hidden !important;)
news.ycombinator.com##.c00:style(color: #3f3f3f !important;)
news.ycombinator.com##.comhead:style(background: #e6e6df; font-weight: italic; color: #686868 !important;)
news.ycombinator.com##.hnuser:style(background: #e6e6df; font-style: italic; color: #575757 !important;)
news.ycombinator.com##html:style(filter:invert(100%) hue-rotate(180deg); background: white)
  จำกัดความกว้างของคอมเมนต์ไว้ที่ ประมาณ 10 คำ เพื่อให้อ่านง่ายขึ้น และปรับสีบางส่วนด้วย ถ้ามีจุดที่ควรปรับปรุงก็อยากให้บอกกัน

  • ไม่รู้มาก่อนว่าสามารถเพิ่ม สไตล์ ในฟิลเตอร์ uBlock ได้
    เพราะเรื่องความอ่านง่ายและความสะดวกในการดีบัก ผมน่าจะยังชอบ Stylus มากกว่าอยู่ดี แต่ก็เป็นเรื่องที่ดีที่รู้ไว้
    แล้ว font-weight: italic; ดูเหมือนจะเป็น typo

• ผมใช้ uBlock ในลักษณะคล้ายกัน มีฟิลเตอร์ที่ปรับเองสะสมไว้หลายร้อยรายการตลอด 8 ปีที่ผ่านมา และล่าสุดเพิ่มกฎสำหรับ ซ่อนสปอยเลอร์ บน IMDb
  ! 2023-09-05 Hide episode's description and image (+ watchlist for not breaking the layout) [new experimental IMDb layout]
imdb.com##article.episode-item-wrapper .ipc-slate
imdb.com##article.episode-item-wrapper .ipc-html-content
imdb.com##article.episode-item-wrapper .ipc-watchlist-ribbon
! 2023-09-05 Hide top rated episode's description both on a TV page and an episode page
imdb.com##[data-testid="episodes-top-rated-card"] ul + div

  • อาจจะดีถ้าซ่อนด้วยว่านักแสดงคนนั้น ปรากฏตัวกี่ตอน ในผลงานนั้น ผมเคยโดนข้อมูลแบบนั้นเล่นงานมาหลายครั้งแล้ว
  • สงสัยว่าคุณได้เปิดเผยฟิลเตอร์อื่น ๆ ไว้ด้วยไหม แชร์ให้ดูได้ไหม?

• Arc มีฟีเจอร์พื้นฐานสำหรับปรับแต่งให้ดูดีขึ้น เรียกว่า Boosts สร้างเองได้ด้วยการคลิกไม่กี่ครั้ง และถ้าต้องการก็เพิ่ม CSS/JS แบบกำหนดเองได้ด้วย
  ผมใช้มันเยอะมากเพื่อตัดองค์ประกอบที่รบกวนสมาธิออกจากเว็บไซต์ส่วนใหญ่ เช่น Facebook, Twitter, Reddit, Medium, Gmail, YouTube ฯลฯ และมันเปลี่ยนชีวิตได้จริง ๆ
  Boosts ที่ผู้ใช้อื่นแชร์ไว้ดูได้ที่นี่: https://arc.net/boosts

  • ผมชอบ แท็บแนวตั้ง ของ Arc มาก เมื่อก่อนเคยใช้แท็บแนวตั้งที่มีแท็บซ้อนกันใน Firefox และเวิร์กโฟลว์มันดีมาก
    การกัก rabbit hole ของแท็บที่เกิดขึ้นตอนเจาะลึกหัวข้อใดหัวข้อหนึ่งไว้ในกลุ่มเดียวได้นั้นยอดเยี่ยมมาก พอเสร็จแล้วก็ปิดกลุ่ม เหลือไว้เฉพาะแท็บเดิมที่อยากเก็บไว้ ซึ่งผมคิดถึงสิ่งนั้น
    ตอนนี้ไม่ได้ใช้แล้ว เพราะต้องใช้เวลาตั้งค่า และไม่มีวิธีง่าย ๆ ในการจัดการแบบประกาศเหมือนโค้ดเพื่อแชร์ข้ามอุปกรณ์และเก็บระยะยาว ถ้าหาวิธีได้ก็อาจกลับไปใช้
    เคยลอง Arc แล้ว แต่มีหลายอย่างที่ไม่ถูกใจ มันไม่ใช่โอเพนซอร์ส และ Boosts ก็ดูเหมือนจะไม่ใช่ด้วย มันใช้ Chromium เป็นฐาน ซึ่งไม่สอดคล้องกับจุดยืนของผมที่อยากให้ Firefox หรือเบราว์เซอร์อื่น ๆ รักษาส่วนแบ่งตลาดไว้ได้ ไม่ได้เกลียด Google แต่ไม่อยากให้บริษัทเดียวครอบงำเว็บ และดูเหมือนว่าจะใช้ได้แค่บน macOS, iOS แต่ไม่แน่ใจว่าตอนนี้ยังเป็นแบบนั้นอยู่ไหม
  • Arc มี UI ของเบราว์เซอร์ ที่ดีที่สุดเท่าที่เคยมีมา ส่วนที่เหลือโดยพื้นฐานแล้วยังติดอยู่ในยุคปลายทศวรรษ 2000