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

November 15, 2018

ในการสร้าง 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 ประมาณนี้

image alt text

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

{
  "manifest_version": 2,

  "name": "Hello chrome extension with vuejs",
  "description": "This extension shows create chrome extension with vuejs",
  "version": "1.0",

  "icons": {
      "128": "logo.png",
      "16": "logo.png",
      "48": "logo.png"
   },

  "browser_action": {
    "default_icon": "logo.png",
    "default_popup": "index.html"
  }
}

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

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

image alt text

  • default_popup: กําหนดว่าหน้าแรกของ popup คือหน้าไหน ดังรูป

image alt text

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

npm run build

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

image alt text

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

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

image alt text

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

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

image alt text

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

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