มาทำ Chrome Extension กันดีกว่า

เนื่องจากทาง TARAD.com ได้มีโอกาสร่วมพัฒนา Chrome extension ร่วมกับทาง google ในงานเปิดตัว Google Chrome browser ในประเทศไทยเมื่ออาทิตย์ก่อน วันนี้ก็จะมาเล่าให้ฟังว่า ไอ้ Chrome extension มันทำ ยังไงยากมั้ย เผื่อว่าใครสนใจอยากจะเอาไปทำบ้าง

skill ที่ต้องมีก่อนการพัฒนา

• HTML ถ้า เป็น HTML5 ได้จะเท่ห์มาก
• CSS
• Javascript 

โปรแกรมที่ใช้ 

• Text editor หรือโปรแกรมทำเว็บทั่วๆไป

จะเห็นได้ว่าการพัฒนา chrome extension ไม่จำเป็น ต้องเป็นอะไรมากมายเพียงแต่ทำเว็บง่ายๆเป็น ก็สามารถทำ Chrome extension ได้แล้ว สำหรับการสร้าง Chrome extension จะมีไฟล์ หลักๆอยู่ประมาณนี้

ไฟล์หลักในการสร้าง Chrome Extension

1. Manifest ไฟล์นี้เป็นเหมือนไฟล์ตั้งค่าของ extension ที่จำเป็นต่องมี
2. Popup ไฟล์นี้จะเป็นไฟล์ที่จะแสดงเป็น popup ตอนกด icon
3. ไฟล์ option เป็นไฟล์ที่ให้ผู้ใช้สามารถเข้าไป ตั้งค่าต่างๆได้ สำหรับไฟล์นี้มีหรือไม่มีก็ได้
4. ไฟล์ Background ไฟล์นี้จะเป็นไฟล์ที่จะ ทำงาน อยู่ด้านหลัง เป็นไฟล์ที่จะรันอยู่ตลอดเวลา มีหรือไม่มีก็ได้เช่นกัน

มาสร้าง Extension กันดีกว่า

• เรามาเริ่มที่ไฟล์ที่สำคัญ นั่นคือ Manifest ไฟล์นี้จะมีโครงสร้างที่กำหนดที่กำหนดไว้เรียบร้อยแล้ว ซึ่งสามารถเข้าไปดูได้ที่ http://code.google.com/chrome/extensions/manifest.html ได้เลย คราวนี้เราลองมาดูของจริงกันดีกว่าว่า มีอะไรบ้าง อันนี้เป็นของ TARAD นะครับ

{

  "name": "TARAD.com Shopping extension",

  "version": "1.1",

  "description": "TARAD.com Shopping Extension ช่วยคุณค้นหาสินค้าง่ายๆ ทำให้คุณไม่พลาดสินค้าดีๆ จาก TARAD.com อีกต่อไป ลองซะ",

   "background_page": "background.html",

   "options_page": "options.html",

  "browser_action": {

    "default_title": "TARAD.COM",

    "popup": "mockup.html",

"default_icon": "icon.png"

  },

  "icons": { "16": "icon16.png",

           "48": "icon48.png",

          "128": "icon128.png" },

    "permissions": [

    "tabs","http://premium.tarad.com/"

  ]

}

จะเห็นได้ว่า ไฟล์พื้นฐานเขียนง่ายมาก หลักๆก็จะมีแค่ ไฟล์ Popup ชื่อไฟล์อะไร, เวอร์ชั่นอะไร, ชื่อ extension ชื่ออะไร , ไฟล์ icon มีไฟล์ไปไหนบ้าง 

เทคนิค ในเว็บของ Googleจะเห็นว่า มี อันนึงที่เขียนว่า "update_url" อยู่ด้วย ตรงนี้เอาไว้ใส่เฉพาะในกรณีที่จะไม่อัพขึ้น chrome extension gallery เท่านั้น เพราะ chrome extension gallery จะเติมข้อมูลในส่วนนี้ให้เราภายหลัง ซึ่ง จะทำให้ extension สามารถอัพเดทจาก Google ได้โดยตรง

• ไฟล์ Popup จริงๆแล้วไฟล์ popup เราสามารถทำอะไรลงไปก็ได้ตามใจเรา แต่อย่าพยายามให้ใหญ่มากเกินไปเพราะ มันจะกินหน้า Browser ไฟล์นี้อาจจะต้องใช้ JavaScript เข้ามาช่วยเยอะหน่อยถ้าหากต้องการดึงข้อมูลจาก API ซึ่งทาง  TARAD ก็ได้ใช้เทคนิคนี้ในการดึงข้อมูลมาจากตัวเว็บไซต์ของเรา นอกจาก JavaScript ที่ต้องใช้ในการดึงข้อมูลต่างๆแล้ว  google chrome ก็ยังจำเป็นต้องใช้ javascript เพื่อสั่งงานต่างๆด้วย เช่น การสร้าง tabใหม่  หรือเซ็ทตัว ป้าย badge ที่เป็นตัวเลขต่างๆบนตัวไอคอนของ extension ซึ่งตรงนี้สามาถเข้าไปหาอ่านได้ในhttp://code.google.com/chrome/extensions/ ในส่วนของ Browser Interaction ได้ 

  เทคนิค ถ้าคุณไม่เก่ง javascript คุณสามารถที่จะใช้ html พื้นๆ หรือ iframe แทนได้ แต่แนะนำว่า เป็นไว้ซักนิดนึงจะดีมาก

   

• ไฟล์ option ไฟล์นี้อย่างที่บอกมีก็ได้ไม่มีก็ได้ ถ้า extension ของคุณไม่ต้องการกำหนดค่าอะไรก็ไม่ต้องมีครับ ในกรณีของ TARAD เราใช้ หน้านี้ในการ เก็บค่า ตำแหน่งของผู้ใช้ browser เนื่องจาก ตัว chrome ไม่อณุญาติให้เรา detect จากตัว popup ได้โดยตรง

   

• ไฟล์ background ไฟล์นี้ ยิ่งไม่ค่อยทำเป็นเท่าไหร่ ในกรณีที่ไม่ต้องการให้ดึงค่าจาก server ตลอดเวลา อย่าในกรณ๊ของ TARAD จำเป็นต้องใช้เนื่องจากเราต้องการดึงค่า twitter ใหม่ล่าสุดมาโชว์ที่ตัว icon ตลอดเวลา

  เทคนิค จะเป็นได้ว่าทั้งสองไฟล์ ต้องมีการเก็บข้อมูต่างๆไว้ นั่นคือ ตำแหน่งของ ผู้ใช้ คำถามก็จะเกิดว่าแล้ว ให้เก็บไว้ที่ไหน เพราะมันไม่มี database ในส่วนนี้ localstorage HTML5 ช่วยได้ ลองไปอ่านดูนะครับ

• คราวนี้เราทำเสร็จแล้วจะเทสยังไงหละ วิธีการก็เข้าไปที่หน้า extension ของ chrome 
  จะเห็นที่เขียนว่า Developer mode คลิก หนึ่งครั้งจะมีเมนูเพิ่มมาสามอัน เลือก load unpack extension แล้วก็เลือกโฟลเดอร์งานของเรา เพียงแค่นี้ คุณก็สามารถเปิด extension ของคุณเพื่อเทสได้แล้ว

   

• คราวนี้มาถึงขั้นตอนการปล่อยของ คือ อัพโหลดไปไว้ใน gallery นั่นเอง ก่อนอื่นให้คุณไป pack folder ที่เก็บ ไฟล์ของคุณ เป็น .zip หลังจากนั้น เข้าไปที่ https://chrome.google.com/extensions แล้วจะมีเขียนอยู่ว่า  “เผยแพร่ส่วนขยายของคุณ” คลิกเข้าไป Login ด้วย google account แล้วก็ทำตามขั้นตอนไปเรื่อยๆ แค่นี้ก็เสร็จเรียบร้อย

เห็ยมั้ยครับว่าขั้นตอนง่ายมากๆเลย แค่ทำเว็บง่ายๆเป็นก็ทำ Google chrome extension ได้แล้ว หากใครมีข้อมูลดีๆอยากเอามาทำ extension บ้างก็ลองดูได้นะครับ