Jetpack สำหรับ Firefox ช่วยให้เราสร้างปลั๊กอิน Firefox ได้อย่างง่ายดายโดยใช้เฉพาะทักษะส่วนหน้า (HTML/CSS/JS) ที่เราเชี่ยวชาญ สิ่งที่น่าตื่นเต้นยิ่งกว่านั้นคือ Jetpack ยังรวมเฟรมเวิร์ก jQuery เข้าด้วยกัน
ไม่ว่าจะเป็น Adobe Air, Web OS หรือ Jetpack อย่างน้อยให้เรามั่นใจได้ว่ามูลค่าของส่วนหน้าจะถูกแสดงให้เห็นมากขึ้นในโอกาสต่างๆ
มาดูวิธีสร้าง ส่วนขยาย Firefox Jetpack แรก ของคุณทีละขั้นตอน:
ขั้นตอนที่ 1: ติดตั้งปลั๊กอิน Jetpack
ที่อยู่ปลั๊กอิน Jetpack: https://jetpack.mozillalabs.com/install.html
หลังจากติดตั้งปลั๊กอิน Jetpack คุณสามารถเข้าถึงอินเทอร์เฟซภายในเครื่องของ Jetpack ได้โดยพิมพ์ about : jetpack ในแถบที่อยู่
ขั้นตอนที่ 2: สร้างไฟล์ planabc.js
รหัสรายละเอียดของ planabc.js คือ:
jetpack . statusBar ผนวก ( {
HTML : '<img src="http://www.planabc.net/favicon.ico"/>' ,
ความกว้าง : 16 ,
เมื่อพร้อม : ฟังก์ชั่น ( วิดเจ็ต ) {
$ ( วิดเจ็ต ) .คลิก ( ฟังก์ชั่น (){
แท็ บ jetpack . เน้น "http://www.planabc.net/" ;
-
-
- jetpack . statusBar . append จะดำเนินการวัตถุ JavaScript (วัตถุ JavaScript มีคุณสมบัติสี่ประการ: html, url, width และ onReady)
- แอตทริบิวต์ html: กำหนด HTML เริ่มต้นที่จะแสดงในแถบสถานะ ในตัวอย่างนี้ องค์ประกอบ IMG แบบง่ายจะแสดงขึ้น
- แอตทริบิวต์ url: กำหนด URL ของเนื้อหา HTML ภายนอกที่จะแสดงบนแถบสถานะ ในตัวอย่างนี้ ไม่ได้ใช้คุณสมบัตินี้
- คุณลักษณะ width: กำหนดความกว้างของเนื้อหาบนแถบสถานะ (หน่วย: พิกเซล) ในตัวอย่างนี้ กำหนดเป็น 16 พิกเซล ซึ่งเป็นความกว้างขององค์ประกอบ IMG เอง
- คุณลักษณะ onReady: กำหนดฟังก์ชันที่จะเรียกใช้ (ฟังก์ชันนี้จะถูกเรียกใช้เมื่อแถบสถานะถูกสร้างขึ้น) เนื่องจาก Jetpack รวมกรอบงาน jQuery คุณจึงสามารถใช้คุณสมบัติและวิธีการของ jQuery ได้โดยตรง ใน ตัวอย่าง นี้ มีการ กำหนด ฟังก์ชัน เมื่อ คลิก ส่วน ขยาย Jetpack เรา จะแก้ไข แท็ บ jetpack เน้น jetpack . tabs เน้น . contentWindow วัตถุ ตำแหน่ง เทียบเท่ากับวัตถุหน้าต่างซึ่งคุณสามารถเข้าถึงได้ ผ่าน JavaScript เพื่อ เข้าถึงหน้าเว็บ
