📋 ภาพรวม

เริ่มตั้งแต่ iBrowe เวอร์ชัน 1.73 ในทุกแพลตฟอร์ม (เดสก์ท็อป, Android และ iOS) iBrowe ได้เปิดตัวระบบการกรองโฆษณาแบบ Procedural Cosmetic Filtering ซึ่งเป็นการยกระดับระบบบล็อกโฆษณาเดิมให้ดียิ่งขึ้น โดยระบบใหม่นี้จะ:

  1. บล็อกโฆษณาที่หลบหลีกตัวกรองแบบเดิมได้มากขึ้น

  2. ลดปัญหาเว็บไซต์เสียรูปแบบจากการบล็อกกว้างเกินไป

  3. เจาะจงเนื้อหาที่ไม่ต้องการได้อย่างแม่นยำ โดยอิงจากคีย์เวิร์ด คุณสมบัติขององค์ประกอบ โครงสร้าง HTML และอื่น ๆ

เมื่อรวมกับการบล็อกระดับเครือข่ายแล้ว ผู้ใช้จะได้ประสบการณ์ท่องเว็บที่สะอาด เร็ว และมีประสิทธิภาพยิ่งขึ้น 🌐✨

🔍 1. ทำไม Procedural Filtering ถึงสำคัญ

1.1 ข้อจำกัดของตัวเลือก CSS แบบดั้งเดิม

  • ตัวกรองแบบกำหนดล่วงหน้า (Declarative): ใช้ CSS selector เช่น .ad-banner, .sponsored-post เพื่อซ่อนโฆษณา แต่มักไม่สามารถจัดการกับโฆษณาที่แอบแฝงหรือเปลี่ยนชื่อคลาสได้

  • ชื่อคลาสที่สร้างอัตโนมัติ: เฟรมเวิร์กใหม่อย่าง React หรือ Angular มักใช้ชื่อคลาสแบบสุ่ม ทำให้ตัวกรองเดิมใช้ไม่ได้

  • ไม่เข้าใจบริบท: ไม่สามารถแยกความต่างระหว่างคอนเทนต์ที่คล้ายกันได้ เช่น โพสต์ผู้ใช้กับโฆษณา

1.2 พลังของการจับคู่แบบ Procedural ระบบใหม่ของ iBrowe สามารถใช้เงื่อนไขหลายแบบร่วมกัน เช่น:

  • เนื้อหาข้อความ เช่น ซ่อนองค์ประกอบที่มีคำว่า “Buy Now”, “Sponsored”

  • ความสัมพันธ์ขององค์ประกอบ เช่น ซ่อนเฉพาะเมื่ออยู่ใน container ที่ระบุว่าเป็นโฆษณา

  • ขนาดขององค์ประกอบ เช่น แบนเนอร์ที่ใหญ่ผิดปกติ

  • รูปแบบแอตทริบิวต์ เช่น src หรือ href ที่มีคำว่า adserver

  • ลำดับของลูก เช่น เป็นองค์ประกอบที่อยู่ลำดับที่ 3 ของ container เสมอ

🔨 2.1 ตัวดำเนินการ (Operators) ที่รองรับใน iBrowe iBrowe รองรับตัวดำเนินการหลัก ๆ สำหรับการกรองแบบ Procedural ดังนี้:

:has-text(“…”) → ใช้ตรวจจับองค์ประกอบที่มีข้อความตรงกับที่ระบุ (ไม่แยกตัวพิมพ์ใหญ่-เล็ก)

:has-length(>N) → จับองค์ประกอบที่มีความยาวของข้อความมากกว่าจำนวนที่กำหนด (เช่น ลิงก์ที่สร้างขึ้นโดยอัตโนมัติ)

:xpath(“…”) → ใช้ XPath เพื่อเลือกองค์ประกอบในโครงสร้าง HTML ที่ซับซ้อน

:matches-css(“*”) → ตรวจสอบว่าองค์ประกอบมีค่า CSS ที่ระบุหรือไม่ เช่น position: fixed, z-index: 9999

:nth-child(n) → ระบุองค์ประกอบที่อยู่ในลำดับที่ n ภายใต้พาเรนต์ (เช่น โฆษณาที่อยู่ในตำแหน่งเดิมเสมอ)

:attr(“ชื่อแอตทริบิวต์”, “ค่า”) → จับองค์ประกอบที่มีแอตทริบิวต์ (เช่น data-ad, aria-label) ซึ่งมีค่าที่ระบุ