Phần 1: Nền Tảng — Mô Hình Tư Duy

Chắc hẳn bạn đã từng sử dụng tiện ích “Reader View” trên trình duyệt, các ứng dụng lưu bài viết như Pocket, hoặc các web clipper. Về bản chất, hầu hết chúng đều dựa vào một thư viện huyền thoại, có từ lâu đời: Mozilla Readability.js.

Mặc dù Readability rất tốt, nhưng nền tảng web hiện đại đã tiến hóa cực nhanh. Các trang web ngày nay có công thức toán học phức tạp (MathJax/KaTeX), các khối code chi tiết với cú pháp được bôi màu, chú thích chân trang lồng nhau, cùng nội dung được render bằng JavaScript (như X/Twitter hay ChatGPT). Readability thường xuyên cắt bỏ hoặc xuất rác các phần này ra mã HTML vô cùng tệ để chuyển đổi thành Markdown.

Hãy chào đón Defuddle bởi kepano (người tạo ra Obsidian Web Clipper).

Mô Hình Tư Duy: Hãy nghĩ Defuddle là Readability 2.0 chuyên trị cho hệ tín đồ Markdown. Nó là một công cụ trích xuất nội dung có khả năng “nhìn” vào một trang web lộn xộn, thực hiện tách lọc chính xác nội dung cốt lõi, và chuẩn hóa mạnh mẽ các chi tiết phức tạp (như toán học, code, chú thích) thành định dạng HTML sạch, ngữ nghĩa nhất có thể, để các công cụ chuyển từ HTML sang Markdown (như Turndown) sau chót cho ra kết quả hoàn hảo.

Phần 2: Điều Tra — Kiến Trúc Chuyên Sâu

Defuddle được viết hoàn toàn bằng TypeScript và được thiết kế để chạy đồng nhất nguyên bản trên Browser, Node.js, và qua CLI.

Kiến trúc dạng Luồng (Pipeline)

Khi bạn đẩy một tài liệu qua Defuddle, luồng mã HTML sẽ đi qua từng khâu:

1. Trích xuất (Site-Specific hoặc Theo Suy Đoán/Heuristic)
2. Chuẩn hóa (Elements Pipeline)
3. Chấm điểm & Thanh lọc (Scoring & Cleanup)

1. Extractor Registry (Kho trình trích xuất)

Mozilla Readability áp dụng một tập quy tắc đồ sộ chung cho mọi trang web. Còn Defuddle giữ riêng biệt một Kho Trình Trích Xuất (src/extractors/).

Nếu bạn parse một trang blog ngẫu nhiên, hệ thống sẽ dùng suy đoán (heuristics). Nhưng nếu parse một trang đã biết, hệ thống sẽ chạy thuật toán bóc tách riêng. Defuddle tích hợp sẵn hỗ trợ đặc biệt cho:

• AI Chats: chatgpt.ts, claude.ts, gemini.ts, grok.ts
• Mạng Xã hội & Forum: reddit.ts, hackernews.ts, x-article.ts, twitter.ts
• Media & Code: github.ts, youtube.ts

Các bộ trích xuất này biết đúng chóc nơi các payload dữ liệu ẩn mình trên cấu trúc DOM và không cần phải lờ mờ suy đoán. Nó còn có cả tùy chọn useAsync dùng để tìm lại cứu tinh qua các API bên thứ thứ 3 (như FxTwitter) nếu DOM trả về là một chiếc khung SPA trắng bóc.

2. Chuẩn hóa Khâu Trung Gian Pipeline

Sự kì diệu của Defuddle xảy ra tại src/elements/. Khi xác định và giữ được nội dung cần, Defuddle chuyển thể nó sao cho engine Markdown converter không bị hóc:

• Khối Code (code.ts): Mò ra thẻ pre > code. Cạo sạch số thứ tự dọc rìa hay những thẻ span tạo syntax highlight màu mè, trả về duy nhất một cấu trúc thẻ ngữ nghĩa mộc <code data-lang="js" class="language-js"> chuẩn.
• Toán học (math.ts): Trực tiếp rà soát và nắm bắt MathJax, KaTeX và MathML. Dùng thư viện (mathml-to-latex và temml cho bản ‘full’), chuyển láng giềng toán học này sang định dạng gò bó <math data-latex="...">.
• Chú thích - Footnotes (footnotes.ts): Kiểm soát tất tần tật hệ tham thiếu chú thích (dạng móc [] hoặc lũy thừa) và ráp cấu trúc chuẩn HTML lại dưới đáy bài, giúp cho lúc gọi Markdown converter bảo đảm tính đúng ký tự [^1].
• Tiêu đề Headings (headings.ts): Tước chức thẻ H1 thành H2, bỏ các thẻ href nội tuyến link móc neo trỏ trên trong heading, và “tỉnh táo” loại đi tiêu đề đầu nếu hoàn toàn y như trang <title>.

3. Tree Shaking & Phân luồng Bundles

Defuddle xuất ra làm 3 gói (targets) riêng:

• defuddle/core: File siêu nhỏ chạy nhẹ trên trình duyệt. Tuyệt nhiên không cài cắm thư viện nào (zero payload code).
• defuddle/full: Chạy trình duyệt, nhưng nhét cả núi thư viện MathML/LaTeX phân giải nặng tay.
• defuddle/node: Khung kiến trúc cực ưu việt cho dân chuyên đào số (backend scraping) thông qua JSDOM engine.

Phần 3: Chẩn Đoán — Defuddle Có Thể Trợ Giúp Các Lập Trình Viên Đạt Được Gì

Dành riêng cho những kỹ sư đang mày mò hệ thống scrape, đường truyền đưa liệu (ingestion pipeline) trên AI, hoặc viết app phục vụ năng suất làm việc, Defuddle giải đáp ngọn ngành biết bao nhiêu nhức đầu.

Nỗi Đau 1: Bóc Nhắn Tin AI Chat (Log)

Thử bóc hội thoại của Claude hay ChatGPT dùng bản Readability như thường, hệ tầng DOM sâu ngút ngàn dễ làm bộ tính điểm nghẹt máy. Trình nhận diện đặc dĩ chatgpt.ts hoặc claude.ts nắm chuẩn khung bóc nội suy cực sạch, cho ra rành rọt bong bóng câu chữ (bubble message), rất hoàn mỹ nếu mang tống vô Obsidian vault riêng hay nhón làm dữ kiện ngõ context frame khác cho AI.

Nỗi Đau 2: Giữ Trọn Code Lẫn Toán

Clip vào blog có đầy công thức Toán vơi cả code mảng Python, thông thường hay hỏng toang dấu nháy ngược, và công thức bị cắt lem. Khóa lại mọi rủi ro với Defuddle Standardize Pipeline, ngay khi pipe đầu ra thẳng vào Turndown, cam đoàn có ```python chuẩn code format lại, đồng thời bắt ngay LaTeX $$a \neq 0$$.

Payload (Metadata) Hiện Khởi Trả

Gửi truy xuất lệnh xong, không thuần nhất HTML là thu về. Defuddle thồn gộp cục thông tin Metadata dầy đặc:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

{
  "author": "John Doe",
  "title": "Quantum Computing 101",
  "content": "<article><h2>Introduction</h2>...</article>",
  "description": "A beginner's guide to qubits.",
  "image": "https://example.com/hero.jpg",
  "schemaOrgData": { ... },
  "wordCount": 1250,
  "parseTime": 42
}

Phần 4: Cách Bắt Tay Giải Quyết Sử Dụng Cùng Defuddle

Ít phút thôi hệ sinh thái lập trình của bạn cũng đã tích hợp êm ru.

System Ngành Python hoặc Gõ Lệnh (Web Scraping Bật Nhanh)

Cần trút nhanh nguyên file bài ngoài DOM bằng nhát gõ bash lệnh:

1
2
3
4
5
6
7

npm install -g defuddle

# In ra ranh giới Payload JSON đọng vị
defuddle parse https://example.com/article --json

# Ném thẳng dạng gỉ nguyên Markdown
defuddle parse https://example.com/article --markdown

Kỹ Hệ Node.js (Scraper cho Backend hay Gỡ Trục AI Core)

Quy định cấu hình kho package.json trỏ Type là "type": "module" nếu tạo API bóc Web hoay chèn thẳng dữ kiện về Vector DB.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

import { JSDOM } from 'jsdom';
import { Defuddle } from 'defuddle/node';

async function extractArticle(url) {
  // Bước 1: Gọi lệnh JSDOM Fetch file DOM gốc.
  const dom = await JSDOM.fromURL(url);
  
  // Bước 2: Truy tải dữ liệu với bộ lọc Defuddle
  const result = await Defuddle(dom, url, {
    markdown: true,
    removeImages: false
  });
  
  console.log(`Tiêu Đề Báo: ${result.title}`);
  return result.contentMarkdown; // Output tinh ròng là Markdown!
}

Triển Khai App/Tiện Ích Cho Web Front-End (Chrome / React Extensions)

1
2
3
4
5
6
7

import Defuddle from 'defuddle';

// Truyền vào thông qua giao điểm môi trường document ngay Live Browser
const extractor = new Defuddle(document, { debug: false });
const payload = extractor.parse();

console.log(payload.content); // Lean, standardized HTML

Mô Hình Tư Duy Cuối Cùng

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

┌────────────────────────────────────────────────────────────┐
│                         Defuddle                           │
│                                                            │
│  "Readability v2.0 tái sinh vì kỷ nguyên Workflow Markdown"│
│                                                            │
│  Tính Chất Trích Xuất:                                     │
│  → Cắt đo trực trị hệ Extractors (Reddit, ChatGPT, GitHub) │
│  → Nhúng Heuristic suy theo phán đoán nếu Blog vãng lai    │
│                                                            │
│  Phẩm Giá Chuẩn Hóa Riêng Biệt Của Defuddle:               │
│  → Code blocks: Cắt bay rác line numbers, giữ khung ngữ.   │
│  → MathJax: Đâm dịch KaTeX sang khối cấu trúc MathML/LaTeX │
│  → Chú thích/Footnote: Ráp khối phẳng liệt kê list gọn bưng│
│                                                            │
│  Môi Trường Chạy êm ru:                                    │
│  → Browser Frontend Zero rác dependency thư viện.          │
│  → Tích hợp Cực mượt vào khối Backend Node.js qua JSDOM    │
│  → Gõ thẳng CLI output ăn ngay khối Code markdown (cờ cắm) │
└────────────────────────────────────────────────────────────┘

Mã Nguồn GitHub: kepano/defuddle
Tự Kiểm Chứng / Playground: Defuddle Playground