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

บทแนะนำนี้จะแนะนำขั้นตอนการสร้างแอป Chrome แอปแรกของคุณ แอป Chrome มีโครงสร้างคล้ายกัน ต่อท้ายส่วนขยาย เพื่อให้นักพัฒนาซอฟต์แวร์ในปัจจุบันรู้จักไฟล์ Manifest และวิธีการทำแพ็กเกจ เมื่อคุณ คุณก็เพียงแค่สร้างไฟล์ ZIP ของโค้ดและเนื้อหาเพื่อเผยแพร่ แอป

แอป 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: เปิดแอป

เปิดใช้การตั้งค่าสถานะ

API ของแอป Chrome จำนวนมากยังอยู่ระหว่างการทดสอบ ดังนั้นคุณควรเปิดใช้ API ทดลองเพื่อให้ คุณลองใช้ฟีเจอร์ต่อไปนี้ได้

  • ไปที่ chrome://flags
  • ค้นหา "API ส่วนขยายรุ่นทดลอง" และคลิก "เปิดใช้" ลิงก์
  • รีสตาร์ท Chrome

โหลดแอปของคุณ

หากต้องการโหลดแอป ให้เรียกหน้าการจัดการแอปและส่วนขยายโดยคลิกไอคอนการตั้งค่า Chrome และเลือก เครื่องมือ > ส่วนขยาย

ตรวจสอบว่าได้เลือกช่องทำเครื่องหมายโหมดนักพัฒนาซอฟต์แวร์แล้ว

คลิกปุ่มโหลดส่วนขยายที่คลายการแพคแล้ว ไปที่โฟลเดอร์ของแอป แล้วคลิกตกลง

เปิดแท็บใหม่และเปิด

เมื่อคุณโหลดแอปพลิเคชันของคุณแล้ว ให้เปิดหน้าแท็บใหม่และคลิกที่ไอคอนแอปพลิเคชันใหม่ของคุณ

หรือโหลดและเปิดใช้จากบรรทัดคำสั่ง

ตัวเลือกบรรทัดคำสั่งต่อไปนี้ใน Chrome อาจช่วยคุณปรับปรุง

  • --load-and-launch-app=/path/to/app/ ติดตั้งแอปพลิเคชันที่คลายการแพคข้อมูลจากเส้นทางที่ระบุ และ ก็เปิดตัวได้เลย หากแอปพลิเคชันทำงานอยู่แล้ว แอปพลิเคชันจะถูกโหลดซ้ำด้วยเนื้อหาที่อัปเดต
  • --app-id=ajjhbohkjpincjgiieeomimlgnll เปิดแอปที่โหลดไว้ใน Chrome แล้ว แต่ไม่ รีสตาร์ทแอปใดๆ ที่กำลังทำงานอยู่ก่อนหน้านี้ แต่จะเปิดแอปใหม่พร้อมด้วยเนื้อหาที่อัปเดตแล้ว