บทแนะนำนี้จะแนะนำขั้นตอนการสร้างแอป Chrome แอปแรกของคุณ แอป Chrome มีโครงสร้างคล้ายกับส่วนขยาย ดังนั้นนักพัฒนาซอฟต์แวร์ในปัจจุบันจะรู้จักไฟล์ Manifest และวิธีการรวมแพ็กเกจ เมื่อเสร็จเรียบร้อยแล้ว คุณจะต้องสร้างไฟล์ ZIP ของโค้ดและเนื้อหาเพื่อpublishแอป
แอป Chrome ประกอบด้วยคอมโพเนนต์ต่อไปนี้
- ไฟล์ Manifest จะบอก Chrome ว่าแอปของคุณคืออะไร ตลอดจนวิธีการเปิดใช้งานและสิทธิ์เพิ่มเติมที่ต้องใช้
- สคริปต์เบื้องหลังใช้ในการสร้างหน้าเหตุการณ์ที่มีหน้าที่จัดการวงจรชีวิตของแอป
- โค้ดทั้งหมดต้องรวมอยู่ในแพ็กเกจแอป Chrome ซึ่งรวมถึงโมดูล HTML, JS, CSS และ Native Client
- ไอคอนและชิ้นงานอื่นๆ ทั้งหมดต้องรวมอยู่ในแพ็กเกจด้วย
ขั้นตอนที่ 1: สร้างไฟล์ Manifest
ก่อนอื่นให้สร้างไฟล์ manifest.json
(รูปแบบ: ไฟล์ Manifest จะอธิบายไฟล์ Manifest นี้โดยละเอียด) ดังนี้
{
"name": "Hello World!",
"description": "My first Chrome App.",
"version": "0.1",
"manifest_version": 2,
"app": {
"background": {
"scripts": ["background.js"]
}
},
"icons": { "16": "calculator-16.png", "128": "calculator-128.png" }
}
ขั้นตอนที่ 2: สร้างสคริปต์ที่ทำงานอยู่เบื้องหลัง
จากนั้นสร้างไฟล์ใหม่ชื่อ background.js
ที่มีเนื้อหาต่อไปนี้
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('window.html', {
'outerBounds': {
'width': 400,
'height': 500
}
});
});
ในโค้ดตัวอย่างด้านบน เหตุการณ์ onLaunched จะเริ่มทำงานเมื่อผู้ใช้เริ่มต้นแอป จากนั้นเปิดหน้าต่างสำหรับแอปที่มีความกว้างและความสูงที่ระบุไว้ทันที สคริปต์พื้นหลังอาจมี Listener, หน้าต่าง, ข้อความโพสต์ และข้อมูลการเปิดตัวเพิ่มเติม ซึ่งทั้งหมดนี้จะใช้ในหน้ากิจกรรมเพื่อจัดการแอป
ขั้นตอนที่ 3: สร้างหน้าหน้าต่าง
สร้างไฟล์ window.html
ดังนี้
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>Hello, world!</div>
</body>
</html>
ขั้นตอนที่ 4: สร้างไอคอน
คัดลอกไอคอนเหล่านี้ไปยังโฟลเดอร์แอปของคุณ:
ขั้นตอนที่ 5: เปิดแอป
เปิดใช้แฟล็ก
Chrome Apps API จำนวนมากยังอยู่ระหว่างการทดสอบ คุณจึงควรเปิดใช้ API ทดลองเพื่อลองใช้งาน
- ไปที่ chrome://flags
- ค้นหา "API ส่วนขยายทดลอง" และคลิกลิงก์ "เปิดใช้"
- รีสตาร์ท Chrome
โหลดแอป
หากต้องการโหลดแอป ให้เปิดหน้าการจัดการแอปและส่วนขยายโดยคลิกที่ไอคอนการตั้งค่า Chrome และเลือกเครื่องมือ > ส่วนขยาย
ตรวจสอบว่าได้เลือกช่องทำเครื่องหมายโหมดนักพัฒนาซอฟต์แวร์แล้ว
คลิกปุ่มโหลดส่วนขยายที่คลายการแพคแล้ว ไปที่โฟลเดอร์ของแอปแล้วคลิกตกลง
เปิดแท็บใหม่แล้วเปิด
เมื่อคุณโหลดแอปพลิเคชันแล้ว ให้เปิดหน้าแท็บใหม่และคลิกไอคอนแอปใหม่
หรือโหลดและเปิดจากบรรทัดคำสั่ง
ตัวเลือกบรรทัดคำสั่งต่อไปนี้ไปยัง Chrome อาจช่วยคุณในการทำซ้ำ
--load-and-launch-app=/path/to/app/
จะติดตั้งแอปพลิเคชันที่คลายการแพคข้อมูลจากเส้นทางที่ระบุ แล้วเปิดใช้งาน หากแอปพลิเคชันทำงานอยู่แล้ว จะมีการโหลดซ้ำด้วยเนื้อหาที่อัปเดต--app-id=ajjhbohkjpincjgiieeomimlgnll
เปิดแอปที่โหลดใน Chrome ไว้แล้ว โดยจะไม่มีการรีสตาร์ทแอปที่กำลังทำงานอยู่ก่อนหน้านี้ แต่จะเปิดแอปใหม่พร้อมเนื้อหาที่อัปเดต