Crop - ส่วนขยาย Chrome สำหรับเลือกและจับภาพองค์ประกอบบนเว็บเพจได้อย่างแม่นยำ

สวัสดีครับ ขอแนะนำ Crop ส่วนขยาย Chrome สำหรับจับภาพเฉพาะส่วนที่ต้องการบนเว็บเพจได้อย่างแม่นยำ

Crop เป็นเครื่องมือที่แสดงโอเวอร์เลย์ทับบนหน้าที่กำลังดูอยู่ ทำให้สามารถชี้เมาส์เพื่อเลือกองค์ประกอบ DOM หรือจะลากเลือกพื้นที่เองก็ได้ แล้วคัดลอก/บันทึกเป็น PNG ได้

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

ฟีเจอร์หลัก

• ไฮไลต์องค์ประกอบ DOM เมื่อ hover ด้วยเมาส์
• คลิกเพื่อเลือกองค์ประกอบ
• ลากเพื่อเลือกพื้นที่แบบกำหนดเอง
• ย้ายและปรับขนาดพื้นที่ที่เลือก
• จับภาพ viewport ปัจจุบัน
• จับภาพทั้งหน้า
• จับภาพพื้นที่ที่เลือกซึ่งต่อเนื่องออกไปนอก viewport แบบเลื่อนหน้าจอ
• คัดลอก PNG ไปยังคลิปบอร์ดหรือบันทึกเป็นไฟล์

สิทธิ์การเข้าถึงและความเป็นส่วนตัว

เนื่องจากเป็นส่วนขยายเบราว์เซอร์ เรื่องสิทธิ์การเข้าถึงอาจเป็นสิ่งที่หลายคนกังวล ผมจึงพยายามลดส่วนนี้ให้มากที่สุด

สิทธิ์ที่ใช้อยู่ตอนนี้มีประมาณดังนี้

• activeTab: เข้าถึงได้ชั่วคราวเฉพาะแท็บปัจจุบันที่ผู้ใช้เรียกใช้ส่วนขยาย
• scripting: ฉีดสคริปต์โอเวอร์เลย์เข้าไปในแท็บปัจจุบัน
• clipboardWrite: คัดลอก PNG ที่สร้างไปยังคลิปบอร์ด
• downloads: บันทึก PNG ที่สร้าง

ไม่ได้ขอสิทธิ์แบบกว้างอย่าง debugger, <all_urls>

ภาพหน้าจอจะถูกประมวลผลภายในเบราว์เซอร์แบบโลคัล ไม่ได้อัปโหลดภาพหน้าจอหรือข้อมูลหน้าเว็บไปยังเซิร์ฟเวอร์ และไม่ได้ใส่ telemetry ไว้ด้วย รูปภาพจะออกไปยังคลิปบอร์ดหรือไฟล์ดาวน์โหลดก็ต่อเมื่อผู้ใช้กด Copy หรือ Save เท่านั้น

ข้อจำกัดในปัจจุบัน

เนื่องจากข้อจำกัดของส่วนขยาย Chrome จึงมีข้อจำกัดในกรณีต่อไปนี้

• ไม่สามารถทำงานบนหน้าที่ถูกจำกัด เช่น chrome:// หรือ Chrome Web Store ได้
• ภายใน cross-origin iframe ไม่สามารถตรวจสอบจาก content script ได้ จึงมีข้อจำกัดในการเลือกองค์ประกอบ
• ไม่สามารถเข้าถึงภายใน closed shadow DOM ได้เช่นกัน
• การจับภาพทั้งหน้าปัจจุบันทำงานโดยอิงจาก top-level document
• หน้าเว็บที่มีขนาดใหญ่มากอาจทำให้ PNG ถูก downscale เนื่องจากข้อจำกัดของ browser canvas
• บนหน้าที่มี lazy loading, animation, sticky header/footer จำนวนมาก ผลลัพธ์การ stitch ภาพทั้งหน้าอาจไม่สมบูรณ์

เกี่ยวกับการพัฒนา

สร้างขึ้นบนพื้นฐานของ Chrome Manifest V3

มีการฉีด content script ลงบนหน้าเว็บ และจัดการขั้นตอนเลือก/ปรับขนาด/จับภาพผ่านโอเวอร์เลย์ที่ทำงานบน Shadow DOM ส่วนการจับภาพทั้งหน้าหรือพื้นที่นอก viewport ใช้การผสาน chrome.tabs.captureVisibleTab() เข้ากับการเลื่อนหน้าจอเพื่อ stitch ภาพ

โค้ดบางส่วนที่อ้างอิง/นำมาปรับใช้จาก Firefox Screenshots ยังคงประกาศ MPL-2.0 ไว้ตามเดิม และโค้ดของโปรเจกต์ที่เขียนขึ้นใหม่ได้จัดเตรียมไว้เพื่อเผยแพร่ภายใต้สัญญาอนุญาต MIT โปรเจกต์นี้ไม่ได้เป็นโครงการที่มีความร่วมมืออย่างเป็นทางการหรือได้รับการรับรองจาก Mozilla/Firefox

ลิงก์

Chrome Web Store:
https://chromewebstore.google.com/detail/crop/…

GitHub:
https://github.com/postmelee/crop

หากคุณเป็นคนที่ต้องจับภาพเว็บเพจบ่อย ๆ เช่น ตอนเขียนเอกสาร รายงานบั๊ก หรือรีวิว UI ลองใช้งานดูได้เลย และหากมีจุดที่ใช้งานไม่สะดวกหรือมีไอเดียในการปรับปรุง ก็จะขอบคุณมากครับ