สร้างแอปแรกของคุณ

บทแนะนำนี้จะแนะนำขั้นตอนการสร้างแอป 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 ไว้แล้ว โดยจะไม่มีการรีสตาร์ทแอปที่กำลังทำงานอยู่ก่อนหน้านี้ แต่จะเปิดแอปใหม่พร้อมเนื้อหาที่อัปเดต