วิธีดู Source Code ของ Chrome Extension (ดูโค้ดปลั๊กอิน Chrome)

Extension ที่ติดตั้งใน Chrome บนคอมพิวเตอร์ ไม่ใช่อะไรมากกว่ากลุ่มไฟล์ Source Code ที่ทำกิจกรรมที่กำหนดไว้ บางคนที่มีความอยากรู้ อาจอยากดูโค้ดที่สร้าง Extension เหล่านั้น การดู Source Code ของเว็บเพจใน Chrome ง่าย: คลิกขวาเลือก "View Page Source" แตการเข้าถึง Source Code ของ Chrome Extension ไม่ง่ายเท่านั้น

แตสิ่งนั้นไม่ควรหยุดคุณจากการดู Source Code ของ Extension ด้วย 2 วิธีต่อไปนี้ คุณจะดู Source Code ของ Chrome Extension บนคอมพิวเตอร์ได้

วิธีต่อไปนี้สาธิตบน Mac

ดู Source Code ของ Chrome Extension ผ่าน File Explorer

ไฟล์ของ Extension ที่ติดตั้งใน Chrome เก็บอยู่บนคอมพิวเตอร์ แตหายากหากโฟลเดอร์ชื่อแบบวิทยาศาสตร์ แตด้วยวิธีด้านล่าง คุณจะเปิดเผยโฟลเดอร์ที่เก็บไฟล์ Source Code ของ Extension ได้

1. เปิด Chrome พิมพ์ chrome://extensions ใน Address Bar กด Enter จะเปิดรายการ Extensions

2. ที่หน้า Extensions เลือกติ๊ก "Developer mode" มุมขวาบน จะแสดงรายละเอียดเพิ่มเติม

3. ตอนนี้เห็น ID ของ Extensions บนหน้าจอ สิ่งที่ต้องทำ: จด ID ของ Extension ที่อยากดู Source Code

ตัวอย่าง: ผมไฮไลท์ ID ของ Extension "Adblock for Youtube" จะเปิดเผย Source Code ของตัวนี้ในขั้นตอนต่อไป

4. พิมพ์ chrome://version ใน Address Bar กด Enter ช่วยหาโฟลเดอร์ที่เก็บไฟล์ Extension

5. ในหน้า Chrome Version ไฮไลท์และคัดลอกค่า "Profile Path" ไปที่คลิปบอร์ด แสดงในภาพ

6. เปิด Finder (หรือ File Manager ของ OS) คลิก "Go" ด้านบน เลือก "Go to Folder..." เข้าโฟลเดอร์ Extensions บน Mac

7. วาง Profile Path ที่คัดลอกไว้ ในพาเนล "Go to Folder" กด "Go" เปิดโฟลเดอร์ใน Finder

8. ดับเบิลคลิกโฟลเดอร์ "Extensions" บนหน้าจอถัดไป เปิดโฟลเดอร์ที่เก็บ Extensions ทั้งหมด

จะเห็นโฟลเดอร์เยอะ ชื่อซับซ้อน แม้เป็นโฟลเดอร์ของ Extensions ที่ติดตั้ง แตชื่อไม่เหมือนชื่อ Extension ทำให้หายาก หาโฟลเดอร์ที่ชื่อตรงกับ Extension ID ที่จดไว้ข้างต้น นั่นคือโฟลเดอร์ของ Extension นั้น

9. ไฟล์ Extension ทั้งหมดอยู่ในโฟลเดอร์ เปิดด้วย Editor ที่ชอบเพื่อดูโค้ด

นี่คือวิธีดู Source Code ของ Chrome Extension โดยไม่ใช้เครื่องมือภายนอก หากไม่แคร์ติดตั้ง Extension เพิ่ม ส่วนต่อไปสำหรับคุณ

ดู Source Code ของ Chrome Extension ด้วย Extension (Extension Source Viewer)

1. เปิด Chrome ไปที่หน้า "Chrome extension source viewer" บน Chrome Web Store กด "Add to Chrome"

2. กด "Add extension" บนหน้าต่างยืนยัน

3. หลังติดตั้งแล้ว เปิดหน้า Extension ใดๆ บน Chrome Web Store เช่นหน้า "Markdown Preview extension"
4. เมื่อโหลดหน้าเสร็จ คลิกไอคอน CRX ในแถบ Extension ของ Chrome เลือก "View source"

4. จะเห็น Source Code ของ Extension ที่เลือก ในหน้าต่าง Chrome

สรุป

หากคุณอยากดู Source Code ของ Extension ที่ติดตั้งในเบราว์เซอร์ คู่มือข้างต้นช่วยให้คุณทำได้ด้วย 2 วิธีง่ายๆ