ขั้นตอนที่ 1: สร้างและเรียกใช้แอป Chrome

ในขั้นตอนนี้ คุณจะได้เรียนรู้เกี่ยวกับสิ่งต่อไปนี้

  • องค์ประกอบพื้นฐานของแอป Chrome รวมถึงไฟล์ Manifest และสคริปต์พื้นหลัง
  • วิธีติดตั้ง เรียกใช้ และแก้ไขข้อบกพร่องแอป Chrome

เวลาโดยประมาณในการทำขั้นตอนนี้คือ 10 นาที
หากต้องการดูตัวอย่างสิ่งที่คุณจะทำในขั้นตอนนี้ ให้เลื่อนลงไปที่ด้านล่างของหน้านี้ ↓

ทำความคุ้นเคยกับแอป Chrome

แอป Chrome มีองค์ประกอบต่อไปนี้

  • ไฟล์ Manifest จะระบุข้อมูลเมตาของแอป ไฟล์ Manifest จะบอก Chrome เกี่ยวกับ ตลอดจนวิธีเปิดใช้งาน และสิทธิ์เพิ่มเติมที่จำเป็น
  • หน้ากิจกรรมหรือที่เรียกว่าสคริปต์พื้นหลังมีหน้าที่จัดการอายุการใช้งานของแอป สคริปต์พื้นหลังคือที่ที่คุณลงทะเบียน Listener สำหรับเหตุการณ์ของแอปที่เฉพาะเจาะจง เช่น เปิดและปิดหน้าต่างแอป
  • ไฟล์โค้ดทั้งหมดต้องอยู่ในแพ็กเกจแอป Chrome ซึ่งรวมถึง HTML, CSS, JS และโฆษณาเนทีฟ โมดูลของไคลเอ็นต์
  • เนื้อหารวมถึงไอคอนแอปต่างๆ ควรรวมอยู่ในแอป Chrome ด้วย

สร้างไฟล์ Manifest

เปิดตัวแก้ไขโค้ด/ข้อความที่ชื่นชอบแล้วสร้างไฟล์ต่อไปนี้ชื่อ manifest.json

{
  "manifest_version": 2,
  "name": "Codelab",
  "version": "1",
  "icons": {
    "128": "icon_128.png"
  },
  "permissions": [],
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "minimum_chrome_version": "28"
}

โปรดสังเกตว่าไฟล์ Manifest นี้อธิบายถึงสคริปต์พื้นหลังชื่อ background.js คุณจะเป็นคนสร้าง ไฟล์ถัดไป

"background": {
  "scripts": ["background.js"]
}

เราจะให้ไอคอนแอปไว้ภายหลังในขั้นตอนต่อไปนี้

"icons": {
  "128": "icon_128.png"
},

สร้างสคริปต์ที่ทำงานอยู่เบื้องหลัง

สร้างไฟล์ต่อไปนี้แล้วบันทึกเป็น background.js

/**
 * Listens for the app launching then creates the window
 *
 * @see /apps/app.window.html
 */
chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('index.html', {
    id: 'main',
    bounds: { width: 620, height: 500 }
  });
});

สคริปต์พื้นหลังนี้จะรอเหตุการณ์เปิดตัว chrome.app.runtime.onLaunched สำหรับ และเรียกใช้ฟังก์ชัน Callback

chrome.app.runtime.onLaunched.addListener(function() {
  //...
});

เมื่อแอป Chrome เปิดขึ้น chrome.app.window.create() จะสร้างหน้าต่างใหม่โดยใช้ หน้า HTML พื้นฐาน (index.html) เป็นต้นฉบับ คุณจะได้สร้างมุมมอง HTML ในขั้นตอนถัดไป

chrome.app.window.create('index.html', {
  id: 'main',
  bounds: { width: 620, height: 500 }
});

สคริปต์พื้นหลังอาจมี Listener, หน้าต่าง, ข้อความโพสต์ และข้อมูลการเปิดใช้งานเพิ่มเติม ซึ่งหน้ากิจกรรมจะใช้เพื่อจัดการแอป

สร้างมุมมอง HTML

สร้างหน้าเว็บง่ายๆ เพื่อแสดงหน้า "สวัสดีโลก" ไปยังหน้าจอและบันทึกเป็น index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <h1>Hello, let's code!</h1>
</body>
</html>

เช่นเดียวกับหน้าเว็บอื่นๆ ภายในไฟล์ HTML นี้คุณสามารถใส่แพ็กเกจ JavaScript เพิ่มเติม CSS หรือเนื้อหา

เพิ่มไอคอนแอป

คลิกขวาและบันทึกรูปภาพขนาด 128x128 นี้ไปยังโฟลเดอร์โปรเจ็กต์เป็น _icon128.png:

ไอคอนแอป Chrome สำหรับ Codelab นี้

คุณจะใช้ PNG นี้เป็นไอคอนของแอปพลิเคชันที่ผู้ใช้จะเห็นในเมนูเปิดใช้งาน

ยืนยันว่าคุณได้สร้างไฟล์ทั้งหมดแล้ว

คุณควรมี 4 ไฟล์นี้ในโฟลเดอร์โปรเจ็กต์แล้วในตอนนี้

ภาพหน้าจอของโฟลเดอร์ไฟล์

ติดตั้งแอป Chrome ในโหมดนักพัฒนาซอฟต์แวร์

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

  1. เข้าถึง chrome://extensions จากแถบอเนกประสงค์ของ Chrome
  2. นำเครื่องหมายออกจากช่องทำเครื่องหมายโหมดนักพัฒนาซอฟต์แวร์

เปิดใช้โหมดนักพัฒนาซอฟต์แวร์

  1. คลิกโหลดส่วนขยายที่คลายการแพคแล้ว
  2. ไปที่โฟลเดอร์โปรเจ็กต์ของแอปและเลือกโฟลเดอร์เพื่อโหลดกล่องโต้ตอบเครื่องมือเลือกไฟล์ แอป

โหลดส่วนขยายที่คลายการแพคแล้ว

เปิดแอป Hello World ที่เสร็จแล้ว

หลังจากโหลดโปรเจ็กต์เป็นส่วนขยายที่คลายการแพคแล้ว ให้คลิกเปิดข้างแอปที่ติดตั้ง ต หน้าต่างแบบสแตนด์อโลนใหม่ควรจะเปิดขึ้น:

แอป Hello World ที่เสร็จแล้วหลังจากขั้นตอนที่ 1

ขอแสดงความยินดี คุณได้สร้างแอป Chrome ใหม่!

แก้ไขข้อบกพร่องแอป Chrome ด้วยเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

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

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

กล่องโต้ตอบตรวจสอบองค์ประกอบ

(เราจะพูดถึงตัวเลือกตรวจสอบหน้าเว็บพื้นหลังในขั้นตอนที่ 3 โดยใช้การตั้งปลุก)

คอนโซล JavaScript ของเครื่องมือสำหรับนักพัฒนาเว็บมีสิทธิ์เข้าถึง API เดียวกับที่แอปของคุณใช้ได้ คุณสามารถ ทดสอบการเรียก API ก่อนเพิ่มลงในโค้ดของคุณ:

บันทึกคอนโซลของเครื่องมือสำหรับนักพัฒนาเว็บ

สำหรับข้อมูลเพิ่มเติม

หากต้องการข้อมูลโดยละเอียดเพิ่มเติมเกี่ยวกับ API บางรายการที่นำมาใช้ในขั้นตอนนี้ โปรดดูที่

พร้อมก้าวต่อไปหรือยัง ไปที่ขั้นตอนที่ 2 - นำเข้าเว็บแอปที่มีอยู่ »