Computer >> คอมพิวเตอร์ >  >> ระบบเครือข่าย >> อินเทอร์เน็ต

วิธีดูซอร์สโค้ดของส่วนขยาย Chrome

วิธีดูซอร์สโค้ดของส่วนขยาย Chrome

ส่วนขยายที่คุณติดตั้งในเบราว์เซอร์ Chrome บนคอมพิวเตอร์ของคุณเป็นเพียงกลุ่มของไฟล์ซอร์สโค้ดที่ทำกิจกรรมที่กำหนดไว้ล่วงหน้า คนขี้สงสัยบางคนอาจต้องการดูโค้ดที่สร้างส่วนขยายเหล่านี้ ในขณะที่ดูซอร์สโค้ดของหน้าเว็บใน Chrome นั้นง่ายพอๆ กับการคลิกขวาที่หน้าและเลือกตัวเลือก การเข้าถึงซอร์สโค้ดของส่วนขยาย Chrome นั้นไม่ใช่เรื่องง่าย

อย่างไรก็ตาม ไม่ควรหยุดคุณจากการดูซอร์สโค้ดของส่วนขยาย เมื่อใช้สองวิธีต่อไปนี้ คุณจะสามารถดูซอร์สโค้ดของส่วนขยาย Chrome บนคอมพิวเตอร์ของคุณได้

วิธีการต่อไปนี้แสดงให้เห็นโดยใช้ Mac

ดูซอร์สโค้ดของส่วนขยาย Chrome ใน File Explorer

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

1. เปิด Chrome บนคอมพิวเตอร์ของคุณและพิมพ์ chrome://extensions ลงในแถบที่อยู่และกด Enter จะเปิดรายการส่วนขยายในเบราว์เซอร์

วิธีดูซอร์สโค้ดของส่วนขยาย Chrome วิธีดูซอร์สโค้ดของส่วนขยาย Chrome

2. เมื่อหน้าส่วนขยายเปิดขึ้น ให้เลือกช่องที่ระบุว่า "โหมดนักพัฒนาซอฟต์แวร์" ที่มุมบนขวา คุณควรดูรายละเอียดเพิ่มเติมเกี่ยวกับส่วนขยายในหน้า

วิธีดูซอร์สโค้ดของส่วนขยาย Chrome วิธีดูซอร์สโค้ดของส่วนขยาย Chrome

3. ตอนนี้คุณควรจะสามารถเห็น ID ของส่วนขยายที่แสดงบนหน้าจอได้ สิ่งที่คุณต้องทำที่นี่คือบันทึก ID ของส่วนขยายที่มีไฟล์ซอร์สโค้ดที่คุณต้องการดู

ในตัวอย่างต่อไปนี้ ฉันได้เน้นรหัสสำหรับส่วนขยาย “Adblock สำหรับ Youtube” ฉันจะเปิดเผยซอร์สโค้ดของส่วนขยายนี้ตามขั้นตอนต่อไปนี้

วิธีดูซอร์สโค้ดของส่วนขยาย Chrome วิธีดูซอร์สโค้ดของส่วนขยาย Chrome

4. เมื่อคุณมี ID สำหรับส่วนขยายแล้ว ให้พิมพ์ chrome://version ลงในแถบที่อยู่ของเบราว์เซอร์แล้วกด Enter มันจะช่วยคุณค้นหาโฟลเดอร์ที่มีไฟล์นามสกุลอยู่

วิธีดูซอร์สโค้ดของส่วนขยาย Chrome วิธีดูซอร์สโค้ดของส่วนขยาย Chrome

5. ในหน้าเวอร์ชัน Chrome ให้ไฮไลต์และคัดลอกค่าของ "เส้นทางโปรไฟล์" ไปยังคลิปบอร์ดของคุณ แสดงในภาพหน้าจอต่อไปนี้

วิธีดูซอร์สโค้ดของส่วนขยาย Chrome วิธีดูซอร์สโค้ดของส่วนขยาย Chrome

6. เปิด Finder (หรือตัวจัดการไฟล์ของระบบปฏิบัติการของคุณ) คลิกที่ "ไป" ที่ด้านบนและเลือก "ไปที่โฟลเดอร์ ... " จะช่วยให้คุณสามารถเข้าถึงโฟลเดอร์ส่วนขยายบน Mac ของคุณ

วิธีดูซอร์สโค้ดของส่วนขยาย Chrome

7. วางเส้นทางโปรไฟล์ที่คุณได้คัดลอกไปยังคลิปบอร์ดของคุณลงในแผงไปที่โฟลเดอร์ แล้วคลิก "ไป" เพื่อเปิดโฟลเดอร์นั้นในหน้าต่าง Finder

วิธีดูซอร์สโค้ดของส่วนขยาย Chrome วิธีดูซอร์สโค้ดของส่วนขยาย Chrome

8. ดับเบิลคลิกที่โฟลเดอร์ “ส่วนขยาย” บนหน้าจอต่อไปนี้เพื่อเปิดโฟลเดอร์ที่มีส่วนขยายทั้งหมดของคุณ

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

ตอนนี้ให้มองหาโฟลเดอร์ที่มีชื่อเดียวกับรหัสส่วนขยายที่คุณจดบันทึกไว้ในขั้นตอนใดขั้นตอนหนึ่งข้างต้น นั่นคือโฟลเดอร์สำหรับส่วนขยายของคุณ

วิธีดูซอร์สโค้ดของส่วนขยาย Chrome วิธีดูซอร์สโค้ดของส่วนขยาย Chrome

9. ไฟล์นามสกุลทั้งหมดควรอยู่ในโฟลเดอร์ และคุณสามารถเปิดไฟล์เหล่านั้นด้วยโปรแกรมแก้ไขที่คุณชื่นชอบเพื่อดูรหัส

นั่นคือวิธีที่คุณสามารถดูซอร์สโค้ดของส่วนขยาย Chrome ได้โดยไม่ต้องใช้เครื่องมือของบุคคลที่สาม ถ้าคุณไม่รังเกียจที่จะติดตั้งส่วนขยาย ส่วนต่อไปนี้เหมาะสำหรับคุณ

ดูซอร์สโค้ดของส่วนขยาย Chrome โดยใช้ส่วนขยาย

1. เปิด Chrome บนคอมพิวเตอร์ของคุณ ไปที่หน้าโปรแกรมดูแหล่งที่มาของส่วนขยายของ Chrome บน Chrome เว็บสโตร์ แล้วคลิก "เพิ่มลงใน Chrome"

วิธีดูซอร์สโค้ดของส่วนขยาย Chrome วิธีดูซอร์สโค้ดของส่วนขยาย Chrome

2. คลิกที่ “เพิ่มส่วนขยาย” บนหน้าจอต่อไปนี้

วิธีดูซอร์สโค้ดของส่วนขยาย Chrome วิธีดูซอร์สโค้ดของส่วนขยาย Chrome

3. หลังจากเพิ่มส่วนขยายในเบราว์เซอร์ของคุณแล้ว ให้เปิดหน้าของส่วนขยายใน Chrome เว็บสโตร์ เช่น หน้าส่วนขยายตัวอย่าง Markdown

เมื่อหน้าเว็บโหลดขึ้น ให้คลิกที่ไอคอน CRX ในแถบส่วนขยายใน Chrome แล้วเลือก “ดูแหล่งที่มา”

วิธีดูซอร์สโค้ดของส่วนขยาย Chrome วิธีดูซอร์สโค้ดของส่วนขยาย Chrome

4. คุณควรจะเห็นซอร์สโค้ดของส่วนขยายที่เลือกในหน้าต่าง Chrome

วิธีดูซอร์สโค้ดของส่วนขยาย Chrome วิธีดูซอร์สโค้ดของส่วนขยาย Chrome

บทสรุป

หากคุณอยากทราบซอร์สโค้ดของส่วนขยายที่คุณติดตั้งในเบราว์เซอร์ คำแนะนำข้างต้นจะช่วยคุณได้โดยใช้สองวิธีง่ายๆ