Bước 1: Tạo và chạy ứng dụng Chrome

Trong bước này, bạn sẽ tìm hiểu:

  • Các thành phần cơ bản của Ứng dụng Chrome, bao gồm tệp kê khai và các tập lệnh nền.
  • Cách cài đặt, chạy và gỡ lỗi ứng dụng Chrome.

Thời gian ước tính để hoàn tất bước này: 10 phút.
Để xem trước những việc bạn sẽ hoàn thành trong bước này, hãy chuyển xuống cuối trang này ↓.

Làm quen với Ứng dụng Chrome

Ứng dụng Chrome chứa các thành phần sau:

  • Tệp kê khai chỉ định siêu thông tin của ứng dụng. Tệp kê khai cho Chrome biết về ứng dụng, cách chạy ứng dụng cũng như mọi quyền bổ sung mà ứng dụng yêu cầu.
  • Trang sự kiện (còn được gọi là tập lệnh nền) chịu trách nhiệm quản lý thời gian hoạt động của ứng dụng chu kỳ. Tập lệnh nền là nơi bạn đăng ký trình nghe cho các sự kiện ứng dụng cụ thể như khởi chạy và đóng cửa sổ ứng dụng.
  • Tất cả tệp mã phải được đóng gói trong ứng dụng Chrome. bao gồm HTML, CSS, JS và Native Mô-đun ứng dụng.
  • Các thành phần, bao gồm cả biểu tượng ứng dụng, cũng cần được đóng gói trong Ứng dụng Chrome.

Tạo tệp kê khai

Mở trình soạn thảo mã/văn bản yêu thích của bạn và tạo tệp sau có tên manifest.json:

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

Lưu ý cách tệp kê khai này mô tả tập lệnh nền có tên background.js. Bạn sẽ tạo tệp tiếp theo.

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

Chúng tôi sẽ cung cấp cho bạn biểu tượng ứng dụng sau trong bước này:

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

Tạo tập lệnh nền

Tạo tệp sau đây và lưu dưới dạng 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 }
  });
});

Tập lệnh nền này chỉ đợi sự kiện khởi chạy chrome.app.runtime.onLaunched cho và thực thi hàm callback:

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

Khi chạy Ứng dụng Chrome, chrome.app.window.create() sẽ tạo một cửa sổ mới bằng trang HTML cơ bản (index.html) làm nguồn. Bạn sẽ tạo chế độ xem HTML trong bước tiếp theo.

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

Tập lệnh nền có thể chứa trình nghe bổ sung, cửa sổ, thông báo đăng và dữ liệu khởi chạy—tất cả trong số này được trang sự kiện sử dụng để quản lý ứng dụng.

Tạo chế độ xem HTML

Tạo một trang web đơn giản để hiển thị lời chào "Hello World" ("Xin chào thế giới") lên màn hình và lưu tin nhắn dưới dạng index.html:

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

Giống như mọi trang web khác, bạn có thể bao gồm JavaScript đóng gói bổ sung trong tệp HTML này, CSS hoặc tài sản.

Thêm biểu tượng ứng dụng

Nhấp chuột phải và lưu hình ảnh 128x128 này vào thư mục dự án của bạn dưới dạng _icon128.png:

Biểu tượng ứng dụng Chrome cho lớp học lập trình này

Bạn sẽ sử dụng PNG này làm biểu tượng của ứng dụng mà người dùng sẽ thấy trong trình đơn khởi chạy.

Xác nhận rằng bạn đã tạo tất cả các tệp của mình

Bây giờ, bạn sẽ có 4 tệp này trong thư mục dự án:

Ảnh chụp màn hình thư mục tệp

Cài đặt ứng dụng Chrome ở chế độ nhà phát triển

Sử dụng chế độ nhà phát triển để nhanh chóng tải và khởi chạy ứng dụng của bạn mà không cần phải hoàn tất ứng dụng dưới dạng cho gói phân phối của bạn.

  1. Truy cập chrome://extensions từ thanh địa chỉ Chrome.
  2. Đánh dấu hộp kiểm Chế độ nhà phát triển.

Bật chế độ nhà phát triển

  1. Nhấp vào Tải tiện ích đã giải nén.
  2. Khi sử dụng hộp thoại bộ chọn tệp, hãy chuyển đến thư mục dự án của ứng dụng rồi chọn thư mục đó để tải .

Tải tiện ích đã giải nén

Chạy ứng dụng Hello World đã hoàn thành

Sau khi tải dự án dưới dạng một tiện ích đã giải nén, hãy nhấp vào Khởi chạy bên cạnh ứng dụng đã cài đặt của bạn. Đáp một cửa sổ độc lập mới sẽ mở ra:

Ứng dụng Hello World đã hoàn thiện sau Bước 1

Xin chúc mừng, bạn vừa tạo ứng dụng Chrome mới!

Gỡ lỗi ứng dụng Chrome bằng Công cụ của Chrome cho nhà phát triển

Bạn có thể sử dụng Công cụ cho nhà phát triển Chrome để kiểm tra, gỡ lỗi, kiểm tra và thử nghiệm ứng dụng của mình giống như bạn làm trên một trang web thông thường.

Sau khi bạn thay đổi mã và tải lại ứng dụng (nhấp chuột phải > Tải lại ứng dụng), hãy chọn Bảng điều khiển Công cụ cho nhà phát triển để biết bất kỳ lỗi nào (nhấp chuột phải > Kiểm tra phần tử).

Hộp thoại Inspect Element (Kiểm tra phần tử)

(Chúng ta sẽ đề cập đến tuỳ chọn Kiểm tra trang nền trong Bước 3 với chuông báo.)

Bảng điều khiển JavaScript Công cụ cho nhà phát triển có quyền truy cập vào cùng các API có sẵn cho ứng dụng của bạn. Bạn có thể dễ dàng kiểm thử lệnh gọi API trước khi thêm vào mã của bạn:

Nhật ký bảng điều khiển Công cụ cho nhà phát triển

Thông tin khác

Để biết thêm thông tin chi tiết về một số API được giới thiệu trong bước này, hãy tham khảo:

Bạn đã sẵn sàng chuyển sang bước tiếp theo? Chuyển tới Bước 2 - Nhập ứng dụng web hiện có »