สร้าง Chrome extension ดูข้อมูลหุ้นในเว็บ set.or.th

สำหรับคนที่ลงทุนในหุ้น คงไม่มีใครไม่รู้จักเว็บ set.or.th ทุกครั้งที่อยากรู้ข้อมูลหุ้น เพียงค้นในกูเกิ้ลว่า set + ชื่อหุ้น ลิ้งค์แรกมักจะเป็นเว็บที่คุณต้องการ

ทว่ามันมีสิ่งที่ผมค่อนข้างขัดใจอยู่นิดหน่อยในเว็บ

1. พอกดลิงค์จาก Google เข้ามา เว็บพาผมไปที่หน้าราคาหุ้น เฮ้ยย คุณ !! ผมมัน VI (Value Invertor) นา ไม่ได้อยากดูราคา อยากรู้แค่ว่าหุ้นมันทำธุรกิจอะไร งบดีไหม ถ้าจะดูราคา ผมเปิด Treading View, Steaming ดูกราฟไม่ดีกว่าหรอ?
2. โอเค หลังจากที่เข้ามาหน้าราคาแล้วผมต้องทำไง? กดไปที่แท็บ “ข้อมูลหลักทรัพย์” ดูเสร็จทำไงต่อ กดไปที่แท็บ “งบการเงิน” แล้วต้องกดไปดู เงินปันผล ที่หน้า “สิทธิประโยชน์” อีก สรุปแล้ว กดหลายทีมาก ซึ่งเว็บมันมี Loading ประมาณ 1-2 วินาที Skeleton วึ๊บๆๆ เสียเวลาไปอีก

เอาตรงๆในมุมมองเดฟแล้วนั้น ผมเข้าใจได้นะว่า การมีหลายแท็บ มันช่วยลด Brandwidth เนื่องจากไม่ต้องดึงข้อมูลทุก API มาพร้อมๆกัน

แต่ส่วนใหญ่ ผมอยากดูเกือบทุกแท็บเลยไง ดังนั้นเราจึงจะมาทำ Chrome extension แก้ปัญหาเรื่องนี้กัน

ก่อนอื่นที่ต้องทำคือ ดูว่า Chrome Extension มันเขียนยังไง พอได้ Concept แล้วค่อยเขียนจริง

Chrome Extension

ส่วนประประกอบหลักๆของมันคือ Menifest.json โครงสร้างประมาณนี้

{
    "manifest_version": 3,
    "name": "SET Summary",
    "description": "Stock summary in SET website.",
    "version": "1.1.0",
    "action": {
        "default_icon": {
            "16": "content-scripts/assets/icon16.png",
            "48": "content-scripts/assets/icon48.png",
            "128": "content-scripts/assets/icon128.png"
        }
    },
    "content_scripts": [
        {
            "js": [
                "content-scripts/main.js"
            ],
            "css": [
                "content-scripts/main.css"
            ],
            "matches": [
                "https://www.set.or.th/th/market/product/stock/quote/*"
            ]
        }
    ]
}

ฟิลด์สำคัญ

manifest_version เวอร์ชั่น Manifest ใหม่ล่าสุดคือ 3

name ตั้งชื่อ

version ตั้งเวอร์ชั่น Extension ของเรา

content_scripts ระบุว่าไฟล์ Js, Css ของเราอยู่ที่ไหน และ Matchs เพื่อบอกว่า Script ทำงานที่ url ใด

เมื่อได้ Minifest.json แล้ว ก็ไปสร้างไฟล์ Js, Css ของเราได้เลย แต่ช้าก่อน

คือผมไม่อยากเขียน document.getElement อะไรแบบนี้ ผมเลยคิดว่าเขียน React ไปเลยดีกว่า ซึ่งเป็นโชคดี ที่มีคนสร้าง Library vite-plugin-chrome-extension ไว้แล้ว เราก็เอามาใช้โล๊ด

Easy Life..

ตัว Library จัดการคอมไพล์ React และจัดการทุกอย่างให้เสร็จเรียบร้อย ดังนั้นเราก็แค่เขียน React เพิ่มเข้าไปเท่านั้น

APIs

สำหรับ API ของเว็บ set.or.th นั้นไม่เป็นปัญหาเท่าไหร่ เพราะเป็น Public API ผมใช้เวลาแกะอยู่ไม่นานก็ได้ API ที่ต้องการทั้งหมด

ดู API list ทั้งหมดได้ที่ Github

Coding

การโค๊ดก็ไม่มีอะไรมาก พยายามทำ Design ให้คล้ายๆเดิม และเรียบง่ายที่สุด จริงๆ ยังติดเรื่อง Responsive อยู่นิดหน่อย แต่ขี้เกียจล่ะ ใครอยากจะช่วยแก้ CSS เพิ่มก็ขอ PR กันเข้ามาได้

การใช้งาน

อย่างที่บอกว่า Lib มันจัดการทุกอย่างให้ ผมก็แค่ Build หลังจากนั้นจะได้โฟลเดอร์ dist มา

• Clone หรือ Download Repository
• ไปที่ Chrome Browser หรือ Microsoft Edge เลือก Extensions
• เปิดโหมด Developer
• กดปุ่ม UnPacked เลือกโฟล์เดอร์ dist
• หลังจากนั้น เมื่อเข้าไปที่ set.or.th ที่หุ้นรายตัว จะมีปุ่มสีเหลือง ด้านซ้านล่าง กดโล๊ดดดดด

ถ้าทำครบทุกขั้นตอนจะได้ปุ่มตามรูป

พอกดปุ่ม SSE จะขึ้นหน้าต่าง สรุปข้อมูลทั้งหมดมาให้เลย

หลังจากนี้เวลาจะดูงบ ก็เลื่อนดูง่ายๆล่ะครับ

แจ้งอีกครั้ง ถ้าใครเจอบัค หรืออยากปรับปรุงให้ดีขึ้น มาช่วยผมแก้ได้ที่ Github