Show HN: สร้างเครื่องมือ CLI สำหรับสร้างส่วนขยายเว็บโดยไม่ต้องตั้งค่า build

แนะนำ Extension.js

• Extension.js เป็นเครื่องมือพัฒนาส่วนขยายข้ามเบราว์เซอร์แบบปลั๊กแอนด์เพลย์ที่ไม่ต้องมีการตั้งค่า
• รองรับ TypeScript, WebAssembly, React และ JavaScript รุ่นใหม่เป็นค่าเริ่มต้น ทำให้สามารถสร้างส่วนขยายข้ามเบราว์เซอร์ได้

สร้างส่วนขยายใหม่

• คุณสามารถสร้างส่วนขยายใหม่ได้ง่าย ๆ ด้วยคำสั่งต่อไปนี้

  npx extension create my-extension
  cd my-extension
  npm run dev
  

• หลังจากรันคำสั่งและเปิดหน้าต่างเบราว์เซอร์ใหม่แล้ว คุณสามารถเริ่มพัฒนาได้ทันที

ใช้ Chrome Extension Samples

• ใช้ตัวอย่างจาก repository Chrome Extension Samples เพื่อเริ่มพัฒนาได้อย่างรวดเร็ว
  1. เปิดเทอร์มินัล
  2. ไปยังโฟลเดอร์ที่ใช้สร้างโปรเจกต์
  3. รันคำสั่งต่อไปนี้

     npx extension dev <sample-name>
     

  • แทนที่ <sample-name> ด้วยชื่อ sample ที่จะใช้จาก Chrome Extension Samples
• ตัวอย่าง: ขอ sample page-redder

  npx extension dev https://github.com/GoogleChrome/chrome-extensions-samples/… --browser=edge
  

ใช้ Chrome Extension Samples ใน Microsoft Edge

• Extension.js รองรับเบราว์เซอร์หลายตัวรวมถึง Microsoft Edge
• วิธีเริ่มต้นส่วนขยายที่รองรับ Edge:
  1. เปิดเทอร์มินัล
  2. ไปยังไดเรกทอรีโปรเจกต์ที่ต้องการ
  3. รันคำสั่งต่อไปนี้

     npx extension dev <sample-name> --browser=edge
     

  • แทนที่ <sample-name> ด้วยชื่อ sample ที่จะใช้
• ตัวอย่าง: รัน sample magic8ball บน Edge

  npx extension dev https://github.com/GoogleChrome/chrome-extensions-samples/… --browser=edge
  

รันส่วนขยายของ Mozilla ใน Edge

• เพื่อให้ลดช่องว่างระหว่าง Firefox และ Edge คุณสามารถรันส่วนขยายของ Mozilla บน Edge ได้
  1. ไปยังไดเรกทอรีโปรเจกต์
  2. ใช้คำสั่งต่อไปนี้

     npx extension dev <addon-name> --browser=edge --polyfill=true
     

  • นำส่วนขยายของ Mozilla มาให้เข้ากับ Edge ได้
• ตัวอย่าง: รันตัวอย่าง Apply CSS จาก MDN WebExtensions Examples บน Edge

  npx extension dev https://github.com/mdn/webextensions-examples/tree/main/apply-css --browser=edge --polyfill=true
  

ใช้ Extension.js กับส่วนขยายเดิม

• หากส่วนขยายเดิมของคุณใช้ตัวจัดการแพ็กเกจอยู่แล้ว คุณสามารถติดตั้งแพ็กเกจ Extension.js และตั้งค่าสคริปต์เพื่อใช้งานได้
  1. ติดตั้ง extension เป็น devDependency

     npm install extension --save-dev
     

  2. เชื่อมสคริปต์ npm กับคำสั่งของ Extension.js

     {
       "scripts": {
         "build": "extension build", 
         "dev": "extension dev",
         "start": "extension start"  
       },
       "devDependencies": {
         "extension": "latest"
       }
     }
     

• ในการพัฒนาใช้ npm run dev สำหรับโหมด production ใช้ npm run start และการ build ของโหมด production ใช้ npm run build

ใช้เบราว์เซอร์เฉพาะสำหรับการพัฒนา

• สถานะการรองรับบนเดสก์ท็อป

Brave	Chrome	Edge	Firefox	Opera	Safari	Vivaldi
☑️	✅	✅	⛔️	☑️	⛔️	☑️

• ☑️ = ใช้งานได้ แต่ยังไม่รองรับ launcher ของเบราว์เซอร์
• สถานะการรองรับบนมือถือ

Firefox Android	iOS Safari
⛔️	⛔️

• หากกำหนดเบราว์เซอร์เป้าหมาย ให้ส่ง flag --browser ในคำสั่ง dev/start
  • ตัวอย่าง: npx extension dev path/to/extension --browser=edge
• เคล็ดลับ: หากส่ง --browser="all" จะโหลดเบราว์เซอร์ที่รองรับทั้งหมดพร้อมกัน

ความคิดเห็นของ GN⁺

• Extension.js ดูเป็นเครื่องมือที่ทรงพลังสำหรับการพัฒนาส่วนขยายข้ามเบราว์เซอร์ โดยเฉพาะอย่างยิ่งสามารถใช้งานได้ทันทีโดยไม่ต้องตั้งค่า และรองรับหลายเบราว์เซอร์ได้ง่าย ซึ่งคาดว่าจะช่วยลดเวลาพัฒนาได้มาก
• อีกหนึ่งข้อดีคือการใช้งานตัวอย่างที่มีอยู่แล้ว เช่น Chrome Extension Samples หรือ MDN WebExtensions Examples ได้ด้วย ซึ่งเป็นจุดแข็งใหญ่ ทำให้นักพัฒนาใหม่น่าเริ่มต้นได้ง่าย
• อย่างไรก็ตาม เบราว์เซอร์บางตัวเช่น Firefox หรือ Safari ยังดูเหมือนว่าจะยังไม่รองรับแบบครบถ้วน จึงควรระมัดระวัง หากคุณกำหนดเป้าหมายเฉพาะเบราว์เซอร์ใดเบราว์เซอร์หนึ่ง ควรพิจารณาใช้เครื่องมือเฉพาะของเบราว์เซอร์นั้น
• รู้สึกอยากเห็นจุดเด่นและจุดด้อยเมื่อเทียบกับเครื่องมือที่คล้ายกันอย่าง Plasmo, WebExtensions API โดยเฉพาะการรองรับสเปกล่าสุด เช่น Manifest V3

[GN⁺]

ความคิดเห็นจาก Hacker News

• มีการแนะนำ Extension.js ซึ่งเป็นเฟรมเวิร์กที่มีประโยชน์สำหรับการพัฒนา Chrome extension
  • ในปัจจุบันการรองรับ Firefox ยังไม่สมบูรณ์
• นักพัฒนาคนอื่นๆ ก็แชร์ประสบการณ์ว่าการพัฒนา Chrome extension ก็มีความยากลำบากเช่นกัน
  • โดยเฉพาะเรื่องการนำไปใช้กับสไตล์
  • คาดว่า Extension.js จะช่วยแก้ปัญหาเหล่านี้ได้
• README ของ Extension.js ได้รับคำชมว่าถูกจัดทำไว้อย่างดี
• นักพัฒนาคนหนึ่งที่เคยลังเลในการเพิ่มส่วนขยายให้กับแอปเพราะความซับซ้อนของ Google Play ก็กำลังพิจารณาใช้ Extension.js
• มีข้อเสนอแนะว่าถ้า Extension.js ครอบคลุมฟีเจอร์สื่อสารระหว่างส่วนขยายกับแท็บได้จะดีมาก
  • การอ่านค่าใน DOM หรือการส่งข้อความจากส่วนขยายไปยังแท็บที่ใช้งานอยู่ก่อนหน้านี้ไม่สะดวก
• มีคำถามเรื่องการเปรียบเทียบกับเฟรมเวิร์กที่คล้ายกันอย่าง Plasmo
• มีการกล่าวถึงอาการ “Imposter Syndrome” ที่พบตอนพัฒนา Chrome extension
  • การสร้างโปรเจกต์ใหม่ทำได้ยาก
  • คาดว่า Extension.js จะช่วยแก้ปัญหานี้ได้
• มีความเห็นว่าการรองรับ Safari จะค่อนข้างง่าย หากใช้เครื่องมือ CLI safari-web-extension-converter
• จากประสบการณ์เดิมในการพัฒนา Chrome extension มีการแสดงความสงสัยเกี่ยวกับข้อดีของ Extension.js
  • อะไรคือสิ่งที่มากกว่าแค่การคัดลอกไฟล์?
  • การรองรับข้ามเบราว์เซอร์? การรองรับหลายภาษา?
• นักพัฒนาที่รู้สึกว่าขณะพัฒนา Chrome extension มีเครื่องมือสนับสนุนไม่เพียงพอได้แสดงความคาดหวังต่อ Extension.js