หน้านี้เป็นส่วนหนึ่งของเอกสารประกอบสำหรับแพลตฟอร์มแอป Chrome ซึ่งเลิกใช้งานไปในปี 2020 โดยจะยังรองรับลูกค้า Enterprise และ Education ใน ChromeOS จนถึงเดือนมกราคม 2025 เป็นอย่างน้อย ดูข้อมูลเพิ่มเติมเกี่ยวกับการย้ายข้อมูลแอป

หน้านี้ได้รับการแปลโดย Cloud Translation API

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

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

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

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

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

แอป Chrome ประกอบด้วยคอมโพเนนต์ต่อไปนี้

ไฟล์ Manifest จะระบุข้อมูลเมตาของแอป โดยไฟล์ Manifest จะบอก Chrome เกี่ยวกับแอปของคุณ วิธีเปิดใช้งาน และสิทธิ์เพิ่มเติมที่ต้องใช้
หน้าเหตุการณ์หรือที่เรียกว่าสคริปต์เบื้องหลังมีหน้าที่จัดการวงจรชีวิตของแอป สคริปต์ที่ทำงานอยู่เบื้องหลังเป็นที่สำหรับลงทะเบียน Listener สำหรับเหตุการณ์ที่เฉพาะเจาะจงของแอป เช่น การเปิดและการปิดหน้าต่างแอป
ไฟล์โค้ดทั้งหมดต้องมีการจัดแพ็กเกจในแอป Chrome ซึ่งรวมถึงโมดูล HTML, CSS, JS และ Native Client
เนื้อหา รวมถึงไอคอนแอป ควรอยู่ในแพ็กเกจในแอป 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 สำหรับแอปพลิเคชันและเรียกใช้ฟังก์ชันเรียกกลับ ดังนี้

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>

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

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

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

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

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

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

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

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

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

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

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

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

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

เปิดแอป Hello World ที่สมบูรณ์แล้ว

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

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

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

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

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

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

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

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

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

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

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

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

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