✨ วิธีสร้าง Extension Chrome สำหรับดึงข้อมูลสินค้าโดยไม่ต้องเขียนระบบหลังบ้าน

 การสร้าง extension chrome เพื่อดึงข้อมูลจากหน้าเว็บ เช่น หัวข้อสินค้า, รูปภาพ, ลิงก์, และราคา เป็นวิธีที่ทั้งสะดวกและทรงพลังสำหรับนักพัฒนาและผู้ใช้งานทั่วไปที่ต้องการจัดการข้อมูลแบบเรียลไทม์ โดยไม่ต้องพึ่ง API หรือระบบ backend ที่ซับซ้อน

ในบทความนี้เราจะพาคุณเข้าใจขั้นตอนการสร้างปลั๊คอินท์ chrome ตั้งแต่เริ่มต้น พร้อมตัวอย่างการดึงข้อมูลจากเว็บไซต์ขายสินค้า เช่น Shopee หรือ Amazon โดยใช้ XPath และ JavaScript อย่างง่าย

วิธีสร้าง Extension Chrome 

การสร้าง extension chrome เพื่อดึงข้อมูลจากหน้าเว็บ เช่น หัวข้อสินค้า, รูปภาพ, ลิงก์, และราคา เป็นวิธีที่ทั้งสะดวกและทรงพลังสำหรับนักพัฒนาและผู้ใช้งานทั่วไปที่ต้องการจัดการข้อมูลแบบเรียลไทม์ โดยไม่ต้องพึ่ง API หรือระบบ backend ที่ซับซ้อน

ในบทความนี้เราจะพาคุณเข้าใจขั้นตอนการสร้างปลั๊คอินท์ chrome ตั้งแต่เริ่มต้น พร้อมตัวอย่างการดึงข้อมูลจากเว็บไซต์ขายสินค้า เช่น Shopee หรือ Amazon โดยใช้ XPath และ JavaScript อย่างง่าย

🔧 ขั้นตอนการสร้าง extension chrome

• เตรียมโฟลเดอร์โปรเจกต์
• สร้างโฟลเดอร์ใหม่ เช่น `extract_product_extension`
•  ภายในโฟลเดอร์ให้มีไฟล์หลัก: `manifest.json`, `content.js`, `popup.html`, `popup.js`
• เขียน `manifest.json`
• กำหนด metadata และ permission ที่จำเป็น เช่น `"activeTab"`, `"scripting"`, `"storage"`
• ระบุว่า `content.js` จะถูก inject เข้าเว็บเป้าหมาย และ `popup.html` จะเป็น UI ของปลั๊คอินท์
• สร้าง `popup.html`**
• เป็นหน้าต่างที่ผู้ใช้จะกรอก XPath และกดปุ่มเพื่อดึงข้อมูล
• สามารถเพิ่ม `<input>` สำหรับ XPath และ `<button>` สำหรับสั่งดึงข้อมูล
• เขียน `popup.js`
• รับค่าจากผู้ใช้ แล้วใช้ `chrome.tabs.sendMessage()` ส่งไปยัง `content.js`
• รับข้อมูลกลับมาแล้วแสดงผล หรือ export เป็นไฟล์ TXT/CSV
• เขียน `content.js`
• ใช้ `document.evaluate()` เพื่อดึงข้อมูลจาก DOM ตาม XPath ที่ส่งมา
• สร้าง object เช่น `{ title, price, image, url }` แล้วส่งกลับไปยัง popup

จุดเด่นของการสร้างปลั๊คอินท์ chrome แบบนี้

1. ไม่ต้องใช้ API หรือ token ใด ๆ
2. ดึงข้อมูลจากหน้าเว็บที่ผู้ใช้เปิดอยู่ได้ทันที
3. เหมาะสำหรับงาน scraping แบบเบา ๆ หรือ automation ส่วนตัว
4. สามารถต่อยอดให้ export ข้อมูลเป็นไฟล์ หรือเชื่อมกับ Google Sheets ได้

🎯 ตัวอย่างการใช้งานจริง

สมมติว่าเราต้องการดึงชื่อสินค้าและราคาจาก Shopee  

เราสามารถใช้ XPath เช่น `//div[contains(@class,'product-title')]` และ `//span[contains(@class,'price')]`  

เมื่อผู้ใช้กรอก XPath แล้วกดปุ่มใน popup ระบบจะส่งคำสั่งไปยัง content.js เพื่อดึงข้อมูลและแสดงผลทันที

📦 สรุป

การสร้าง extension chrome สำหรับดึงข้อมูลสินค้าเป็นวิธีที่ทั้งง่ายและทรงพลัง โดยเฉพาะเมื่อคุณต้องการควบคุมการดึงข้อมูลด้วยตัวเอง ไม่ต้องพึ่งระบบหลังบ้านหรือเครื่องมือขนาดใหญ่อย่าง n8n หรือ Python Scraper

หากคุณกำลังมองหาวิธีสร้างปลั๊คอินท์ chrome ที่ตอบโจทย์งานเฉพาะทาง เช่น การดึงข้อมูลจากหน้าเว็บแบบเรียลไทม์ — นี่คือจุดเริ่มต้นที่ดีที่สุด

📥 ไฟล์ประกอบการเรียนรู้ ไฟล์ปลั๊คอินท์ ดาวน์โหลด