โดยสามารถเริ่มการศึกษาได้ที่นี่
http://developer.mozilla.org/en/Building_an_Extension#Extending_the_Browser_with_XUL
และ slide ที่นี่อธิบายได้ดี
http://www.slideshare.net/skeevs/mozilla-firefox-extension-development/
ก่อนจะพัฒนานั้น ผมก็มานั่งศึกษาก่อนว่าโครงสร้างของ Firefox Plug-in เป็นอย่างไรบ้าง อนุญาตให้เราทำอะไรได้บ้าง
1. เทคดนโลยีที่ใช้ ประกอบไปด้วย
- JavaScript, AJAX, DOM, XML, CSS
- XUL (XML User Interface Language)
- xpcom ( Cross Platform Component Object Model )
2. Tools ที่ใช้ในการพัฒนา
- ผมเลือกใช้ Eclipse + XULBooster plug-in เหตุผลง่ายๆ คือ ฟรี และเป็น tools ที่ใกล้ตัวที่สุด
3. โครงสร้างของ Firefox Plug-in
นามสกุลของ file คือ xpi [ Mozilla/Firefox Browser Extension Archive ] สามารถเปิดด้วย winzip และ winrar ใน file xpi จะประกอบไปด้วย
- install.rdf [ ใช้สำหรับการ install plug-in จะอธิบายเกี่ยวกับ plug-in นั้น มี format เป็น xml ]
- chrome.manifest
- *.xul [ ส่วนแสดงผล ]
- *.js
- *.css
- *.xml
...
มีโครงสร้างของ files ดังรูป
4. ส่วนการแสดงผล จะสร้างด้วย XUL นั้นสามารถ custom ส่วนต่างๆ ของ Firefox หรือ Chrome UI ได้ดังนี้
- MenuBar
- Toolbox
- Toolbar
- Toolbar button
- Window
- Menu List
- Button
- Status Bar
5. มาทำความรู้จักกับ XUL กันหน่อย
- ย่อมาจาก XML User-interface Language
- โครงสร้างเป็น xml
- จะใช้เป็นส่วนการแสดงผล และการควบคุมการทำงานต่างๆ เช่น Layout, Input, Window
file xul นั้นสามารถ reference ได้ดังนี้
Chrome://my-plugin/content/test.xul
6. การใช้งาน JavaScript ใน xul นั้นสามารถ reference ได้ดังนี้
โดย JavaScript นั้นสามารถจัดการ event ต่างๆ ใน XUL UI , จัดการ DOM Tree และการติดต่อผ่าน xpcom ได้
7. Localization [ L10n ] สนับสนุนหลายๆ ภาษาได้ ซึ่งจะเป็นส่วน label โดยสามารถกำหนดไว้ใน
เมื่อลองศึกษามาบ้าง ผมก็ลองสร้าง Firefox plug-in บ้างโดยความต้องการง่ายๆ คือ
1. ทำการดึงข้อมูลจาก feed ของ paw66.com จากที่นี่ http://www.paw66.com/sandbox/aggregator/rss
2. นำมาแสดงผลในส่วน Status Bar ของ Firefox
3. เมื่อ click ขวาที่ status bar แล้วจะมี menu ขึ้นมาให้เลือกคือ
- ดึงข้อมูลล่าสุด
- เกี่ยวกับ paw66
4. เมื่อ click ซ้ายจะ เปิด tab ใหม่เพื่อเปิด url ของ feed นั้นๆ
รูปแสดงการใช้งาน plugin ที่ผมลองทำดู
ผม upload plug-in ไว้ที่นี่ http://www.pai-pa.com/somkiat/ff/paw66-feed.xpi
นี่ก็คือการลองสร้าง Firefox plug-in application แบบง่ายๆ ครับ
บทความ
