ChatGPT SmartNavbar

chatgpt-smartnavbar

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

คุณสมบัติ

• Dynamic Navbar : เพิ่ม NAVBAR ที่ตอบสนองต่อการโต้ตอบกับ UI ของ Chatgpt
• เมนูแบบเลื่อนลงอัจฉริยะ : สร้างแบบเลื่อนลงตามแบบไดนามิกตามอินพุตของผู้ใช้หลังจากพิมพ์คีย์ที่ปรับแต่งได้ (ค่าเริ่มต้นคือ << )
• การนำทางแป้นพิมพ์ : นำทางผ่านตัวเลือกดรอปดาวน์โดยใช้ปุ่มลูกศรและเลือกด้วย 'Enter'
• สร้างและจัดการพรอมต์ : ผู้ใช้สามารถสร้างพรอมต์ของตนเองและบันทึกไว้ในหมวดหมู่ที่กำหนดเองเพื่อการเข้าถึงที่รวดเร็ว
• หมวดหมู่ที่กำหนดเองสำหรับพรอมต์ : ผู้ใช้สามารถสร้างเปลี่ยนชื่อและลบหมวดหมู่พรอมของตนเอง พรอมต์สามารถเคลื่อนย้ายได้อย่างง่ายดายระหว่างหมวดหมู่
• การจัดการพรอมต์ : ผู้ใช้สามารถเพิ่มแก้ไขและลบพรอมต์ในหมวดหมู่ใด ๆ ทำให้องค์กรเป็นเรื่องง่าย
• การกำหนดหมวดหมู่ที่ไร้รอยต่อ : อำนวยความสะดวกในการกำหนดและการมอบหมายใหม่ระหว่างหมวดหมู่ที่แตกต่างกันด้วยอินเทอร์เฟซที่ใช้งานง่าย
• Tailwind CSS สไตล์ : ทำความสะอาดทันสมัยและปรับแต่งสไตล์โดยใช้ Tailwind CSS
• ได้รับการปรับให้เหมาะสมสำหรับประสิทธิภาพ : การโต้ตอบที่รวดเร็วและตอบสนองโดยใช้ผู้สังเกตการณ์ DOM ที่มีประสิทธิภาพทำให้มั่นใจได้ว่าประสิทธิภาพจะยังคงราบรื่นเมื่อเพิ่มการแจ้งเตือนและหมวดหมู่มากขึ้น
• การตั้งค่าของผู้ใช้ : ส่วนขยายจะบันทึกการตั้งค่าของผู้ใช้เช่นหมวดหมู่พรอมต์การสั่งซื้อที่รวดเร็วและการปรับแต่งอื่น ๆ เพื่อให้มั่นใจถึงประสบการณ์ส่วนบุคคลในช่วงการประชุม

คุณสมบัติใหม่และการปรับปรุง

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

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

• พฤติกรรมดรอปดาวน์ที่ได้รับการปรับปรุง : ตอนนี้แบบเลื่อนลงอย่างชาญฉลาดผ่านการจับคู่ที่ใกล้เคียงที่สุดเมื่อผู้ใช้เริ่มพิมพ์ดังนั้นการกด 'Enter' จะเลือกการจับคู่ที่ดีที่สุดโดยอัตโนมัติ สิ่งนี้จะช่วยหลีกเลี่ยงการเลือกตัวเลือกที่ไม่เกี่ยวข้องโดยบังเอิญ นอกจากนี้การเลื่อนลงในขณะนี้จะปิดการใช้งานได้อย่างมีประสิทธิภาพมากขึ้นหลังจากใส่ตัวเลือกและจัดการตำแหน่งเคอร์เซอร์อย่างเหมาะสมหลังจากการแทรกเพื่อป้องกันไม่ให้มันรบกวนคีย์ทริกเกอร์การค้นหา

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

• คีย์การเปิดใช้งานแบบเลื่อนลงที่ปรับแต่งได้ : ผู้ใช้สามารถตั้งค่าคีย์ของตัวเองเพื่อทริกเกอร์เมนูแบบเลื่อนลงแทนค่าเริ่มต้น << การปรับแต่งนี้มีอยู่ในป๊อปอัพของส่วนขยายซึ่งให้ความยืดหยุ่นมากขึ้นสำหรับเวิร์กโฟลว์ที่แตกต่างกัน

• การจัดการข้อผิดพลาดและการปรับปรุง UI : ส่วนขยายไม่แสดงข้อความการแจ้งเตือนแบบดิบอีกต่อไปสำหรับการบันทึกการเปลี่ยนแปลงไปยังพรอมต์หมวดหมู่หรือปุ่มเปิดใช้งาน แต่การแจ้งเตือนจะแสดงในลักษณะที่ไม่ล่วงล้ำและดึงดูดสายตาเพื่อปรับปรุงประสบการณ์ผู้ใช้ คุณลักษณะการแก้ไขแบบอินไลน์สำหรับทั้ง ID หมวดหมู่และพรอมต์ตอนนี้อยู่ในหน้าต่างป๊อปอัพเดียวกันทำให้ง่ายต่อการปรับเปลี่ยนองค์ประกอบทั้งสองโดยไม่ต้องกระโดดระหว่างเมนูที่แตกต่างกัน

การปรับปรุงในอนาคต

• พฤติกรรมเคอร์เซอร์กลั่น : การปรับปรุงเพิ่มเติมจะมุ่งเน้นไปที่การรับรองว่าเคอร์เซอร์จะถูกวางไว้อย่างดีที่สุดหลังจากการแทรกทันทีแม้ในสถานการณ์ที่ซับซ้อนซึ่งมีการเพิ่มหลายครั้งอย่างรวดเร็ว
• ส่วนต่อประสานผู้ใช้ที่ได้รับการปรับปรุง : ปรับปรุงการออกแบบเมนูป๊อปอัพเพื่อให้การแก้ไขที่รวดเร็วและหมวดหมู่นั้นใช้งานง่ายยิ่งขึ้นและเพิ่มการตอบรับภาพที่ดีขึ้นสำหรับการกระทำเช่นการออมโดยไม่ต้องแจ้งเตือนที่ล่วงล้ำ
• ความสามารถในการค้นหาขั้นสูง : ดำเนินการปรับแต่งการค้นหาเพื่อจัดการตรรกะการจับคู่ที่ยืดหยุ่นยิ่งขึ้นรวมถึงการยอมรับการพิมพ์ผิดและการสนับสนุนที่ดีขึ้นสำหรับไลบรารีที่มีขนาดใหญ่ขึ้น
• ระบบแนะนำ : ปรับปรุงหรือเพิ่มคุณสมบัติการแนะนำสำหรับพรอมต์ที่ใช้บ่อยที่สุดตามพฤติกรรมของผู้ใช้ สิ่งนี้จะจัดเรียงหมวดหมู่และการแจ้งเตือนใหม่โดยอัตโนมัติตามการใช้งานเพื่อเพิ่มความเร็วและประสิทธิภาพสูงสุด
• การปรับปรุงการออกแบบ : ปรับปรุงการออกแบบของดรอปดาวน์ Navbar และป๊อปอัปเพิ่มสไตล์ที่สวยงามและทันสมัยมากขึ้นโดยใช้ Tailwind CSS เพื่อให้ประสบการณ์ผู้ใช้ที่ดีขึ้น

คุณสมบัติเพิ่มเติมที่ควรพิจารณา

• การซิงค์คลาวด์ : อนุญาตให้ผู้ใช้ซิงค์พรอมต์และหมวดหมู่ของพวกเขาในหลาย ๆ อุปกรณ์โดยใช้ที่เก็บข้อมูลคลาวด์ สิ่งนี้ทำให้มั่นใจได้ว่าประสบการณ์ของผู้ใช้นั้นสอดคล้องกันในสภาพแวดล้อมโดยไม่ต้องส่งออก/นำเข้าด้วยตนเอง
• พรอมต์การส่งออกและนำเข้า : เพิ่มคุณสมบัติเพื่อส่งออกพรอมต์และหมวดหมู่เป็นไฟล์ JSON ซึ่งสามารถนำเข้ากลับเข้าไปในส่วนขยายได้ในภายหลัง สิ่งนี้มีประโยชน์สำหรับวัตถุประสงค์ในการสำรองข้อมูลหรือเพื่อแบ่งปันคอลเลกชันที่รวดเร็วกับผู้อื่น
• การติดแท็กและการกรอง : แนะนำระบบการติดแท็กสำหรับพรอมต์ทำให้ผู้ใช้สามารถกรองและค้นหาด้วยแท็ก สิ่งนี้สามารถช่วยจัดการคอลเลกชันขนาดใหญ่ของพรอมต์ได้อย่างมีประสิทธิภาพมากขึ้น
• คำแนะนำที่ตระหนักถึงบริบท : ขึ้นอยู่กับบริบทของการสนทนาแนะนำการแจ้งเตือนที่น่าจะเป็นประโยชน์ สิ่งนี้สามารถใช้ประโยชน์จากการตรวจจับคำหลัก AI หรือพื้นฐาน
• การสร้างพรอมต์ AI-ASSISTED : ให้คำแนะนำแก่ผู้ใช้หรือฟังก์ชันการทำงานอัตโนมัติเมื่อสร้างพรอมต์ใหม่ตามโครงสร้างทั่วไปหรือพรอมต์ก่อนหน้าที่พวกเขาสร้างขึ้น
• โหมดมืด : เพิ่มการสนับสนุนสำหรับโหมดมืดใน UI ของส่วนขยายทำให้รู้สึกสะดวกสบายมากขึ้นสำหรับผู้ใช้ที่ทำงานในสภาพแวดล้อมที่มีแสงน้อย
• การสนับสนุนแบบหลายแพลตฟอร์ม : ขยายฟังก์ชั่นของส่วนขยายให้ทำงานไม่เพียง แต่กับ ChatGPT แต่ยังรวมถึงแพลตฟอร์ม AI ยอดนิยมอื่น ๆ เช่น Claude, Gemini และอื่น ๆ สิ่งนี้จะช่วยให้ผู้ใช้สามารถจัดการและใช้พรอมต์ของพวกเขาในบริการ AI หลายบริการเพิ่มความหลากหลายและประโยชน์นอกเหนือจาก CHATGPT

การติดตั้ง

ข้อกำหนดเบื้องต้น

• node.js (เวอร์ชัน 12 หรือสูงกว่า)
• NPM (Node Package Manager)

สร้างแอพ

ในการสร้าง CSS สำหรับส่วนขยายให้ใช้คำสั่งต่อไปนี้:

1. ติดตั้งการพึ่งพา:

   npm install

2. สร้าง tailwind css:

   npm run build

การใช้งาน

1. สร้าง CSS ของส่วนขยายโดยใช้คำแนะนำข้างต้น
2. โหลดส่วนขยายลงในโครเมี่ยมโดยการนำทางไปยัง chrome://extensions/
3. เปิดใช้งานโหมดนักพัฒนาซอฟต์แวร์และคลิก "โหลด UNPACKED" เพื่อเลือกโฟลเดอร์ dist
4. ส่วนขยายจะทำงานในหน้า chatgpt (https://chatgpt.com/*)

การบริจาค

อย่าลังเลที่จะเปิดปัญหาและส่งคำขอดึงเพื่อปรับปรุงโครงการ ตรวจสอบให้แน่ใจว่าได้ปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดในแง่ของความสะอาดรหัสและความสามารถในการอ่าน

---

เพลิดเพลินไปกับการเพิ่มประสิทธิภาพด้วย chatgpt-smartnavbar!