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

10 Nov 2018,
Share: 

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

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

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

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

Image

ในไฟล์ 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

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

Image

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

npm run build

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

Image

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

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

Image

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

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

Image

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

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

Suggestion blogs

Props และ State ใน React

สวัสดีครับวันนี้เราจะมาดูเรื่องของ Props และ State ซึ่งเป็นเรื่องที่ค่อนข้างสําคัญ และใช้งานบ่อยใน React ผมจะอธิบาย และสอนการใช้งานไปที่ละตัวนะครับ ดังนี้

เชื่อมต่อ ESP8266 กับจอ OLED LCD ด้วย I2C

สวัสดีครับ วันนี้ผมจะมาสอนวิธีการเชื่อมต่อจอ OLED LCD กับ ESP8266 โดยผ่าน interface I2C ก่อนอื่นมาดูกันก่อนสิ่งที่ต้องเตรียมมีอะไรบ้าง

วิธีใช้ PuTTy เชื่อมต่อไปยัง google instance

หลังจากที่เขียนบทความเรื่อง วิธีสร้าง VM Instance ใน google developers console ผมยังไม่ได้อธิบายวิธีการใช้ PuTTy เชื่อมต่อไปยัง google instance ในบทความนี้ผมจะมาอธิบายวิธีเชื่อมต่อ PuTTy ไปยัง google instance อุปกรณ์ที่ต้องใช้มีดังนี้โปรแกรม PuTTy ถ้ายังไม่มีโหลดได้ที่นี่-->Clickโปรแกรม PuTTYgen ถ้ายังไม่มีโหลดได้ที่นี่-->Click


Copyright © 2019 - 2025 thiti.dev |  v1.51.0 |  Privacy policy | 

Build with ❤️ and Astro.

Github profile   Linkedin profile   Instagram   X profile   Nostr   Youtube channel   Telegram   Email contact   วงแหวนเว็บ