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à 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 nội dung bạn sẽ hoàn tất ở bước này, hãy chuyển xuống cuối trang này ↓.

Làm quen với các ứ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ủa bạn, cách khởi chạy ứng dụng và mọi quyền bổ sung mà ứng dụng yêu cầu.
  • Trang sự kiện (còn gọi là tập lệnh nền) chịu trách nhiệm quản lý vòng đời của ứng dụng. Tập lệnh nền là nơi bạn đăng ký trình nghe cho các sự kiện cụ thể trong ứng dụng, chẳng hạn 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 cả các mô-đun HTML, CSS, JS và Native Client.
  • Nội dung, bao gồm cả biểu tượng ứng dụng, cũng phải được đóng gói trong Ứng dụng Chrome.

Tạo tệp kê khai

Mở trình soạn thảo văn bản/mã yêu thích của bạn và tạo tệp sau đây 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"
}

Hãy lưu ý cách tệp kê khai này mô tả tập lệnh nền có tên background.js. Tiếp theo, bạn sẽ tạo tệp đó.

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

Chúng tôi sẽ cung cấp cho bạn một 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ỉ chờ sự kiện khởi chạy chrome.app.runtime.onLaunched cho ứng dụng 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 sử dụ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 thêm trình nghe, cửa sổ, thông báo đăng và dữ liệu khởi chạy. Tất cả đều đượ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ị thông báo "Xin chào thế giới" trên màn hình và lưu thông báo đó 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ư bất kỳ trang web nào khác, trong tệp HTML này, bạn có thể bao gồm JavaScript, CSS hoặc nội dung bổ sung đóng gói.

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 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 ứng dụng của chúng tôi 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ạn sẽ có 4 tệp này trong thư mục dự án ngay bây giờ:

Ả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 mà không phải hoàn thiện ứng dụng dưới dạng gói phân phối.

  1. Truy cập chrome://extensions từ thanh địa chỉ Chrome.
  2. Chọn hộp kiểm Chế độ dành cho 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. Sử dụng hộp thoại bộ chọn tệp, chuyển đến thư mục dự án của ứng dụng và chọn thư mục đó để tải ứng dụng của bạn.

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

Chạy ứng dụng Hello World đã hoàn thiện

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 Launch (Khởi chạy) bên cạnh ứng dụng đã cài đặt. 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 một ứ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à kiểm thử ứng dụng giống như cách bạn thực hiện trên một trang web thông thường.

Sau khi 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 kiểm tra bảng điều khiển DevTools để xem có lỗi nào không (nhấp chuột phải > Kiểm tra phần tử).

Hộp thoại Kiểm tra phần tử

(Chúng ta sẽ bao gồm 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ủa 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ử một lệnh gọi API trước khi thêm lệnh gọi đó vào mã của mình:

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 để tiếp tục bước tiếp theo? Chuyển tới Bước 2 - Nhập ứng dụng web hiện có »