gh-x-html — GitHub Finally Plays Your Videos (and Your Playwright Reports)

May 27, 2026

Cover แบบ clickbait: 'GitHub finally plays your videos.' พร้อมรูปเบนบนเวที TED ถือไมค์ และ pill ที่เขียนว่า '/gh-x-html — Chrome extension'

gh-x-html ใช้ได้แล้วบน GitHub — Load unpacked ได้เลย Chrome Web Store listing อยู่ใน review

เหตุผลจริงๆ ที่ผมสร้างมัน ผมไม่ได้สร้าง gh-x-html เพื่อโชว์ HTML สวยๆ ผมสร้างเพราะ ผมโพสต์วิดีโอใน GitHub issue ตลอดวัน คลิป Playwright ของ UI bug screen capture ของ flow ใหม่ คลิป 12 วินาทีของ modal ที่พัง ทุกวันนี้พวกนี้ไปลง Google Drive ขอ shareable link วาง markdown link reviewer คลิกออก รอ Drive โหลด ดู กลับมา friction ซ้อนกัน review ลากยาว วิธีแก้ก็โง่ๆ คือ render วิดีโอตรงที่ posted ไว้

content เดียวกัน เป็น markdown แล้วเป็น gh-x-html

นี่คือการเปรียบเทียบที่สำคัญ Q2 release status เดียวกัน — ตัวเลขเดียวกัน option เดียวกัน decision เดียวกัน — เขียนสองแบบ ซ้าย: best ที่ markdown ทำได้ใน comment ของ GitHub ขวา: content เดียวกันในรูป x-html fence Screenshot ทั้งสองมาจาก issue #5 browser tab เดียวกัน

Playwright capture แบบ side-by-side ของ issue #5 ซ้าย: Section A — Q2 release status เขียนเป็น markdown ปกติ (heading, bullet, table, checkbox list, disclaimer ที่บอกว่า 'sparkline render ไม่ได้ ผู้อ่านต้องจินตนาการเอา') ขวา: Section B — content เดียวกัน render ผ่าน gh-x-html เป็น dashboard ที่มีชีวิต gradient title, progress bar animated, SVG sparkline จริง, chip picker, decision table ที่ highlight แถวแนะนำสีเขียวมี star, และ dependency flow 5 nodes พร้อม arrow

ฝั่ง markdown คือ เพดาน ของสิ่งที่ GitHub render ได้ natively สำหรับ content แบบนี้ heading, bullet, table ที่ไม่มี style, checkbox สำหรับ vote, และ disclaimer ตรงๆ ว่า “sparkline render ใน markdown ไม่ได้ — ผู้อ่านต้องจินตนาการเอา” ไม่ใช่ strawman นี่คือ best ที่ format ทำได้จริงๆ

ฝั่ง HTML คือ ข้อมูลชุดเดียวกัน ในรูป sandboxed iframe — สี รูปทรง ตำแหน่ง การเคลื่อนไหว ทำงานให้หมด เวลา decide ลดจาก scroll-and-re-read เหลือเหลือบมองเดียว

มันทำอะไร ในเฟรมเดียว

ไม่มี `gh-x-html`

วิดีโอ external → markdown link → Drive → context switch
Playwright HTML report → zip → upload ที่อื่น → ส่ง link ทางอีเมล
Status board สวยๆ → screenshot → เบลอ → ล้าสมัยวันถัดมา
Live demo → recording → upload → link → click → รอ

Medium สู้กับ content viewer ทุกคนจ่ายค่า friction

มี `gh-x-html`

URL .mp4 / .webm / .mp3 ของ host ภายนอก เล่น inline — sandboxed iframe escape CSP ของ GitHub ได้
Drop Playwright HTML report ลงใน fence x-html reviewer scroll ดูใน PR เลย
Status dashboard, ADR mockup, design comp — render สดใน comment ที่ posted
Gate ด้วย author allowlist sandbox iframe ไม่ leak GitHub cookie ให้ script ของ fence

PR คือ artifact ไม่ต้อง context switch ไม่ต้อง re-upload

fence ทำอะไรได้ — ตัวอย่างจริงตัวหนึ่ง

นี่คือ fenced code block เดียวใน GitHub issue comment เดียว ข้างในมี: Q2 release dashboard ที่มี progress bar animated, sparkline ของ request volume 30 วัน, chip picker, decision table ที่ highlight แถวแนะนำ, dependency flow diagram, และปุ่ม Acknowledge — render ทั้งหมดใน sandbox iframe ที่ไม่มี allow-same-origin (opaque origin, ไม่มี GitHub cookie):

Screenshot จริงจาก Playwright — comment ใน GitHub issue ที่มี intro prose แล้วตามด้วย Q2 release dashboard ที่ render inline: header gradient, status card 3 ใบ (Auth 98%, Payments 76%, Search 41%), sparkline 30 วัน, chip picker, decision table ของ backfill strategy ที่ option B แนะนำ, dependency flow diagram, และปุ่ม Acknowledge

ซูมเข้าไปดูเฉพาะ fence ที่ render แล้ว:

Crop เฉพาะ iframe ของ Q2 dashboard — progress bar gradient cyan-magenta, sparkline ที่มีจุดมาเจนต้าที่ยอด, chip row ที่ 'Payments retries' highlight, decision table ที่ shadow index option แนะนำ, และ dependency graph 5 nodes

ถ้าไม่มี extension reviewer ทุกคนเห็น content เดียวกันนี้เป็นกำแพง HTML source sanitizer ชนะ ความหมายหาย

use case ที่ผมสร้างมาให้จริงๆ

Playwright HTML report Drop HTML ของ report ลงใน fence x-html failure, screenshot, trace — เลื่อนดูได้ใน PR ไม่ต้อง Vercel preview ไม่ต้อง Drive link

Bug recording Screen capture ขึ้น r2.dev/clip.mp4 วาง URL ลงไป reviewer เลื่อนถึง เห็น bug เล่นเลย ไม่ต้อง switch context

Visual regression diff Screenshot 2 รูปกับ slider reviewer ลาก หรือ render diff overlay สดๆ fence เป็น HTML ล้วน ทำให้ตรงกับการเปรียบเทียบที่ต้องการ

Status / release board Pill กับ retry count กับ p99 แบบเกือบ real-time ฝังใน issue ที่ track release ชนะ bullet list ที่ไม่มีใครอัพเดต

ADR mockup Flow diagram, decision table, code excerpt ที่มี file:line caption ADR กลายเป็นหน้าเว็บ ไม่ใช่ bullet 800 บรรทัด

Demo link ที่ทำงานจริง Prototype interactive เล็กๆ sandbox ไว้ — script ของ author run ได้แต่ไม่ได้ GitHub cookie เหมือน CodePen ที่ embed ใน comment

เมื่อไหร่ markdown ยังเข้าท่า เมื่อไหร่ gh-x-html ชนะ

Content ของ comment	เข้ากันดีกับ	เพราะอะไร
ตอบเร็วๆ / คุยกัน	markdown ปกติ	ย่อหน้าเดียว ไม่ต้องเปิดเครื่องจักร render
Diff code inline	markdown ปกติ	GitHub ทำได้สวยอยู่แล้ว อย่าไปคว้า HTML
วิดีโอของ bug / regression / feature ใหม่	`gh-x-html`	URL `.mp4` ของ third-party เล่น inline viewer ไม่ต้องออกจาก issue
Playwright report / test trace	`gh-x-html`	Report ทั้งตัว render ใน PR — failure, screenshot, trace เลื่อนดูได้
Status dashboard / release board	`gh-x-html`	สีจริง pill จริง sparkline ชนะ bullet list ที่ค้าง
ADR / design walkthrough	`gh-x-html`	Diagram + table + code excerpt ใน artifact เดียวที่มองปุ๊บเข้าใจ การตัดสินใจลงเร็วกว่า

Trust model ในย่อหน้าเดียว

Extension จะ rewrite เฉพาะ comment ที่ author อยู่ใน allowlist ของคุณเอง (เก็บใน chrome.storage.sync seed ด้วย login ของคุณตอนติดตั้งครั้งแรก) Sandbox iframe ใช้ allow-scripts allow-popups allow-popups-to-escape-sandbox — ไม่มี allow-same-origin ซึ่งจะเป็น sandbox escape Script ของ author run ใน iframe ได้ แต่ iframe เป็น opaque origin: ไม่มี GitHub cookie, ไม่เข้า parent DOM, ไม่ navigate top frame เหตุผลเต็มๆ อยู่ใน ADR-0002 กับ ADR-0003

ติดตั้งและลองใช้

git clone https://github.com/ninyawee/gh-x-html
# chrome://extensions → Developer mode → Load unpacked → เลือก directory นี้

Allowlist seed ด้วย GitHub login ของคุณตอนติดตั้งครั้งแรก เปิด issue หรือ PR ไหนก็ได้ drop fence x-html ลง comment reload — fence ก็กลายเป็น iframe ที่ render สดๆ เพิ่มเพื่อนร่วมงานผ่าน popup ตอน onboard ทีม

Chrome Web Store listing อยู่ใน review ระหว่างนี้ “Load unpacked” ก็ใช้ได้

— Ben

Repo: ninyawee/gh-x-html · Showcase issue: #4 — flex what gh-x-html can do · โพสต์พี่น้อง: in-html