วิธีทำ Chrome Extension และอัพโหลดขึ้น Chrome Web Store

วิธีทำ Chrome Extension และอัพโหลดขึ้น Chrome Web Store

วิธีทำ Chrome Extension และอัพโหลดขึ้น Chrome Web Store
Google Chrome Extension คือส่วนเสริมเพิ่มความสามารถที่เฉพาะเจาะจงสำหรับโปรแกรมเว็บเบราว์เซอร์ยอดนิยมของ Google อย่าง Chrome เราสามารถพัฒนา extension หรือส่วนเสริมนี้สำหรับใช้งานเอง หรืออัพโหลดขึ้น Chrome web store สำหรับจำหน่ายหรือแจกจ่ายฟรี

ในขั้นตอนของการพัฒนา chrome extension นั้น จะแยกเป็น 2 ส่วนหลัก ๆ คือ

• 1. Unpack Extension จะเป็นส่วนเสริมที่เราซึ่งเป็นผู้พัฒนาจะสามารถเปิดใช้งานได้บนเครื่องได้ทันที โดยไม่ได้อัพโหลดขึ้นไปเผยแพร่ใน Chrome web store
• 2. Pack Extension จะเป็นส่วนเสริมที่อัพโหลดขึ้นไปเผยแพร่บน Chrome web store และคนอื่นสามารถติดตั้งใช้งาน extension ที่เราพัฒนาได้ในทุก ๆ เครื่องคอมพิวเตอร์ที่ใช้ Chrome browser

เริ่มต้นสร้าง Google Chrome Extension

• 1. สร้างโฟลเด้อ chrome_hello_extension
  จะเป็นโฟลเด้อสำหรับเก็บข้อมูลทั้งหมดของ extension ตัวอย่างเช่น ไฟล์ .json, javascript และไฟล์รูปภาพ เป็นต้น
  
  โครงสร้างภายในโฟลเด้อจะประกอบไปด้วยไฟล์ .json .js และ icon รูปภาพ
  
  
• 2. สร้างไฟล์ manifest.json
  manifest.json จะทำหน้าที่ในการกำหนดค่าพื้นฐาน ร้องขอ permission ตำแหน่งของไอคอนที่จะให้แสดง เรียกได้ว่าเป็นการกำหนดรายละเอียดต่าง ๆ ของส่วนเสริมที่เราจะพัฒนา
  
  ตัวอย่างไฟล์ manifest.json

  {
    "name": "Hello World!",
    "description": "ทดสอบการสร้าง google chrome extension.",
    "version": "0.1",
    "manifest_version": 2,
    "app": {
      "background": {
        "scripts": ["background.js"]
      }
    },
    "icons": { "16": "codebee-16x16.png", "128": "codebee-128x128.png" }
  }

• 3. สร้างไฟล์ background.js
  จะเห็นว่าในไฟล์ manifest.json เราได้กำหนดให้มีการเรียกใช้งานไฟล์ background.js เพราะฉะนั้นเราจำเป็นจะต้องสร้างไฟล์ javascript เพื่อมารองรับการเขียนโค๊ดการทำงานหลักของ extension
  
  ตัวอย่างไฟล์ baackground.js

  chrome.app.runtime.onLaunched.addListener(function() {
    chrome.app.window.create('window.html', {
      'outerBounds': {
        'width': 400,
        'height': 500
      }
    });
  });
  

  จากโค๊ดตัวอย่างด้านบนจะเป็นการกำหนดให้เปิดหน้าต่างเบราว์เซอร์ขนาด 400x600px ทันทีเมื่อมีการเปิดใช้งาน extension

• 4. สร้างรูปไอคอนสำหรับ Extension
  จะสังเกตุว่าในไฟล์ manifest.json เราได้กำหนดไอคอนไว้ 2 ขนาดคือ 16×16 และ 128×128

  "icons": { "16": "codebee-16x16.png", "128": "codebee-128x128.png" }

  ให้สร้างไฟล์ .png ทั้ง 2 ขนาดและวางไฟล์ในโฟลเด้อ chrome_hello_extension เพียงเท่านี้ส่วนเสริมของเราก็พร้อมติดตั้งและใช้งานใน Google Chrome Browser แล้วครับ

การติดตั้งและใช้งาน

• ติดตั้งแบบ Unpacked Extension ( ใช้งานบนเครื่อง )
  เปิด Google Chrome Browser และพิมพ์ chrome://extensions/ มองหาคำว่า Developer Mode ให้ติ๊กถูก จะปรากฏปุ่มเมนูชื่อว่า Load Unpacked Extension ให้คลิกและเลือกไปที่โฟลเด้อ chrome_hello_extension ที่เราได้สร้างไว้ในขั้นตอนก่อนหน้านี้ ถ้าไม่มีอะไรผิดพลาดส่วนเสริมของเราก็จะถูกติดตั้งเรียบร้อยแล้วให้รองทดสอบโดยการกดปุ่ม Launch
  
  
  
• ติดตั้งแบบ Pack Extension ( อัพโหลดขึ้น Chrome web store )
  เหมือนกันครับไปที่ chrome://extensions/ มองหาคำว่า Developer Mode ติ๊กถูก แต่คราวนี้ให้เลือกไปที่ Pack Extension จะปรากฏ popup ขึ้นมาให้เราใส่ข้อมูล 2 ช่อง คือ
  Extension Root Directory ให้เราเลือกไปที่โฟลเด้อส่วนเสริมที่เราสร้างไว้คือ chrome_hello_extension
  Private Key File สำหรับการสร้างส่วนเสริมครั้งแรกให้เราละไว้ ไม่ต้องเลือกอะไร
  
  
  
  หลังจากที่เราเลือกโฟลเด้อของส่วนเสริมเรียบร้อยแล้วให้กดปุ่ม Pack Extension ถ้าไม่มีอะไรผิดพลาด โปรแกรม chrome จะทำการ generate ไฟล์ 2 ไฟล์ให้เราคือ chrome_hello_extension.pem และ chrome_hello_extension.crx เพียงเท่านี้ extension ของเราก็พร้อมที่จะอัพโหลดขึ้น chrome web store แล้ว

การอัพโหลดขึ้น Chrome web store

วิธีการอัพโหลดขึ้น chrome web store ก็ไม่มีอะไรยุ่งยากครับ ให้เราทำการ rename ไฟล์ chrome_hello_extension.pem เปลี่ยนชื่อเป็น key.pem และนำไปวางไว้ในโฟลเด้อหลักชั้นแรกของส่วนเสริม จากนั้นให้ทำการ zip โฟลเด้อ และไปที่หน้าเว็บไซต์สำหรับอัพโหลดคือ https://chrome.google.com/webstore/developer/dashboard
ส่วนไฟล์ .crx ไม่ต้องอัพโหลดขึ้นไปนะครับ



หลังจากอัพโหลดเสร็จแล้ว จำเป็นจะต้องกรอกข้อมูลต่าง ๆ เช่น รายละเอียดคุณสมบัติของแอพ รูปภาพประกอบ ไอคอน ลิงค์วิธีการใช้งานใน youtube เป็นแอพฟรีหรือไม่ อนุญาติในประเทศอะไรบ้าง หลักการเดียวกันกับการอัพโหลดแอพพลิเคชั่นขึ้นไปบน Google Play Store ไม่ได้มีขั้นตอนยุ่งยากอะไร เพียงแต่ต้องกรอกข้อมูลเยอะพอสมควร หาก extension ผ่านการตรวจสอบเรียบร้อยแล้ว ก็จะสามารถใช้งานได้ทันที ใช้ระยะเวลาในการตรวจสอบประมาณ 24 ชั่วโมง