สร้าง Chrome Extension ด้วย Vuejs

ในการสร้าง Chrome Extension หรือเรียกเป็นภาษาไทย "ส่วนขยาย" จะใช้ HTML/CSS/JavaScript ในการเขียน ซึ่งจะคล้ายกับการเขียนเว็บทั่วๆไป ในเมื่อมันเป็น HTML/CSS/JavaScript ก็จับมาเขียนด้วย Vuejs ซะเลย เพื่อให้ง่ายต่อการพัฒนา

มาเริ่มสร้าง Chrome Extensionด้วย Vuejs โดยขั้นตอนแรกให้สร้าง Vue Project ขึ้นมาก่อนครับ อ่านวิธีการสร้างได้จากที่นี่ https://www.thitiblog.com/blog/8447

โดยทั่วไปเขียน Chrome Extension จะมีไฟล์สําคัญอยู่ไฟล์นึง ที่เราต้องไป Config ค่าต่างๆ คือไฟล์ manifest.json ซึ่งไฟล์นี้จะเป็นตัวกําหนดค่าทั้งหมดของ Extension เรา

ให้เราสร้างไฟล์ manifest.json ไว้ใน Vue Project ที่เราสร้างไว้เมื่อสักครู่นี้ ที่ Path /public/manifest.json แล้วหาไฟล์รูป Logo มาด้วยเพื่อเราจะใช้เป็น Logo ของ Chrome Extension ประมาณนี้

ในไฟล์ manifest.json ให้ใส่ Config นี้เข้าไปครับ

Config นี้ เป็น Config พื้นฐานในการสร้าง Chrome Extensionโดยมีความหมายของแต่ละ field คือ

  • manifest_version: Version ของ manifest
  • name: ชื่อของ Extension
  • description: ข้อมูลเพิ่มเติมของ Extension
  • version: Version ของ Extension 
  • icons: เป็น icon ของ Extension 
  • default_icon: เป็นการกําหนด Icon บนเมนูบาร์ของ Extension ดังรูป
  •  default_popup: กําหนดว่าหน้าแรกของ popup คือหน้าไหน ดังรูป

ต่อไปให้ Build ด้วยคําสั่ง

Folder dist จะถูกสร้างขึ้นมาดังรูป

ตอนนี้เราได้ Chrome Extension ขึ้นมาพร้อมไปใช้งานแล้วครับ ซึ่งจะอยู่ภายใน Folder dist นั่นเอง

วิธีทดสอบ Chrome Extension ให้ไปที่หน้า Manage Extension โดยพิมพ์ "chrome://extensions/" บน Chrome address bar หรือไปที่เมนู Setting->More tool->Extension ก็ได้ จะได้หน้าจอแบบนี้

ให้เราเปิด Developer mode ตรงหมายเลข 1 และให้ Load Extension ของเรา โดย Click "Load unpacked" ตรงหมายเลข 2 แล้วเลือก Folder dist ที่ได้จากการ Build เมื่อสักครู่นี้ จะเห็น Chrome Extension ที่เราสร้างขึ้นมาตรงหมายเลข 3

ทดสอบการทํางานของ Chrome Extension โดยเมื่อ Click ที่ icon จะได้ popup เป็นหน้าตาของ Vue แบบนี้ครับ

เท่านี้เราก็ได้ Chrome Extension ที่สร้างจาก Vuejs แล้วครับ

สามารถโหลด Project นี้ไปลองเล่นได้ ที่นี่ครับ https://github.com/thiti-y/hello-chrome-extension-vuejs

Comments