การสร้าง Chrome Extensions และอัพโหลดขึ้น Chrome Web Store

19 ก.พ. 2020 , 1,509 Views   , หมวดหมู่ IT jQuery,JavaScript,Ajax ทุกหมวดหมู่ โค๊ดดิ้ง   , ป้ายกำกับ:, ,


Chrome Extensions

คือส่วนขยายที่ติดตั้งลงบนบราวเซอร์ Google Chrome บนคอมพิวเตอร์เดสก์ท็อป เพื่อปรับแต่ง เพิ่มฟีเจอร์ต่างๆใน Chrome ดูตัวอย่างมากมายตามลิ้งค์นี้ครับ https://chrome.google.com/webstore/category/extensions?hl=th

โครงสร้างของ Extensions

หลักๆจะประกอบด้วย

  • Manifest : ไฟล์ manifest.json เป็นไฟล์สำหรับจัดเก็บการตั้งค่าพื้นฐานต่างๆ ซึ่งไฟล์นี้จำเป็นต้องมี
  • Background Script : background.js เป็นไฟล์สำหรับรันคำสั่งเพื่อทำงาน ตามเหตุการณ์ต่างๆที่กำหนดใว้ Background Script ที่ดีจะถูกโหลดเฉพาะเมื่อจำเป็นและไม่โหลดเมื่อไม่มีการใช้งาน
  • UI Elements : เช่น popup.html, popup.js เป็นต้น เป็นหน้าอินเทอร์เฟซสำหรับติดต่อกับผู้ใช้งาน
  • Content Script : contentscript.js เป็นไฟล์ที่อ่านและแก้ไข DOM ของหน้าเว็บที่เบราว์เซอร์ที่เราดูอยู่
  • Options Page : ให้ผู้ใช้งานสามารถปรับแต่งส่วนขยาย เปิดหรือปิดคุณลักษณะบางอย่างได้

เริ่มต้นสร้าง Extensions

เราจะสร้าง Extensions สำหรับเปลี่ยนสี background ของเว็บไซต์

หรือดาวน์โหลดตัวอย่าง Extensions จากลิ้งค์นี้ https://developer.chrome.com/extensions/examples/tutorials/get_started_complete.zip

  1. สร้างโฟลเดอร์ของ Extensions ขึ้นมาอาจจะตั้งชื่อโฟลเดอร์ตามชื่อ Extensions ในตัวอย่างนี้สร้างโฟลเดอร์ชื่อ seenual
  2. สร้างไฟล์ manifest.json ในโฟลเดอร์ seenual ดู format การสร้างไฟล์ https://developer.chrome.com/extensions/manifest

    • จากนั้นเปิดบราวเซอร์ Google Chrome ขึ้นมา เข้าไปที่ url นี้ chrome://extensions/ ติ๊กเปิด Developer mode ตามรูป แล้วคลิกปุ่ม Load unpacked แล้วไปเลือกโฟลเดอร์ Extensions ของเรา

      จะเห็นว่า Extensions ของเราถูกติดตั้งแล้วตามรูปวงกลมหมายเลข 4 แต่ยังไม่มี icon รูปภาพแสดง เราสามารถใส่ icon เข้าไปได้โดยอ้างอิงจากหน้านี้ครับ https://developer.chrome.com/extensions/manifest
    • เพิ่ม Icon

      จากนั้นนำรูป icon16.png, icon48.png, icon128.png (รูปตามขนาด) ไปใส่ใว้ในโฟลเดอร์ Extensions/images ของเรา
    • เพิ่ม background.js การกำหนดค่า Register Background Scripts  https://developer.chrome.com/extensions/background_pages
  3. สร้างไฟล์ background.js ใส่โค๊ดด้านล่าง
  4. สร้างไฟล์ popup.html เป็นส่วนสำหรับติดต่อกับผู้ใช้ ดูเพิ่มเติมเกี่ยวกับ popup https://developer.chrome.com/extensions/user_interface#popup
    สำหรับตัวอย่างนี้จะสร้างปุ่มสำหรับเปลี่ยนสี background

    • จากนั้นต้องไปกำหนดในไฟล์ manifest.json ในส่วนของ browser_action ดูเพิ่มเติม https://developer.chrome.com/extensions/browserAction และส่วนขยายจะต้องได้รับอนุญาตในการเข้าถึง declarativeContent API ในไฟล์ manifest.json
    • เพิ่มส่วนโค๊ดใน background.js ตรง pageUrl: {hostEquals: ‘developer.chrome.com’} สามารถกำหนดรูปแบบของ URL ที่อนุญาติ ดูเพิ่มเติมลิ้งค์นี้ https://developer.chrome.com/extensions/declarativeContent
  5. สร้างไฟล์ popup.js และเพิ่มโค๊ดในไฟล์ดังนี้ เป็นการกำหนดว่าหากคลิกปุ่ม changeColor ให้เปลี่ยนสี background

    • เพิ่มสิทธิ์ให้สามารถเปลี่ยน Background ของเว็บได้ activeTab เพิ่มใน manifest.js ดูเพิ่มเติม https://developer.chrome.com/extensions/activeTab
  6. สร้างไฟล์ options.html สำหรับให้ผู้ใช้งานกำหนดสีที่ต้องการของปุ่มได้

    กำหนดค่าลงใน manifest.js

  7. สร้างาไฟล์ options.js เพิ่มโค๊ดด้านล่างเพื่อสร้างและกำหนดสีของปุ่ม

อัพโหลดขึ้น Chrome Web Store

  1. ทำการ zip ไฟล์ Extension ของเรา ตามตัวอย่างรูปด้านล่าง เราก็จะได้ไฟล์ zip ที่่เป็นชื่อ extension ของเรา
  2. ที่หน้า https://chrome.google.com/webstore/devconsole/ หรือหน้า https://chrome.google.com/webstore/developer/dashboard (เวอร์ชันเก่า)เพื่อลงทะเบียน ซึ่งจะเสียค่าลงทะเบียนประมาณ $5 จากนั้นก็ให้ทำการอัพโหลดไฟล์ zip ของเราขึ้นไป
  3. ระบบจะให้ทำการกรอกข้อมูลที่จำเป็นต่างๆ เช่น รายละเอียด, รูปภาพ, หมวดหมู, เว็บไซต์, การเผยแพร่ ฯลฯ บันทึกการเปลี่ยนแปลงก็เป็นอันเสร็จเรียบร้อยครับ

 

เรียนรู้เพิ่มเติมตามลิ้งค์ด้านล่างครับ :

Getting Started  : https://developer.chrome.com/extensions/getstarted

Overview : https://developer.chrome.com/extensions/overview

Develop Extensions : https://developer.chrome.com/extensions/devguide

Publish in the Chrome Web Store : https://developer.chrome.com/webstore/publish

หน้าจัดการ Chrome Extensions ของเรา https://chrome.google.com/webstore/devconsole/

 


ป้ายกำกับ:, ,