Tạo ứng dụng đầu tiên

Hướng dẫn này sẽ chỉ cho bạn cách tạo Ứng dụng Chrome đầu tiên. Ứng dụng Chrome có cấu trúc tương tự như tiện ích, vì vậy các nhà phát triển hiện tại sẽ nhận ra tệp kê khai và phương thức đóng gói. Khi hoàn tất, bạn chỉ cần tạo một tệp zip chứa mã và tài sản để publish ứng dụng.

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

  • Tệp kê khai cho Chrome biết về ứng dụng của bạn, tên ứng dụng, cách khởi chạy ứng dụng và các quyền bổ sung mà ứng dụng yêu cầu.
  • Tập lệnh nền dùng để tạo trang sự kiện chịu trách nhiệm quản lý vòng đời ứng dụng.
  • Tất cả các mã phải được đưa vào gói Ứng dụng Chrome. Các mô-đun này bao gồm HTML, JS, CSS và các mô-đun Native Client.
  • Bạn cũng phải đưa tất cả biểu tượng và các tài sản khác vào gói.

Bước 1: Tạo tệp kê khai

Trước tiên, hãy tạo tệp manifest.json (Định dạng: Tệp kê khai mô tả chi tiết tệp kê khai này):

{
  "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" }
}

Bước 2: Tạo tập lệnh nền

Tiếp theo, hãy tạo một tệp mới có tên là background.js với nội dung sau:

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('window.html', {
    'outerBounds': {
      'width': 400,
      'height': 500
    }
  });
});

Trong mã mẫu ở trên, sự kiện onLaunched (sự kiện onLaunched) sẽ được kích hoạt khi người dùng khởi động ứng dụng. Sau đó, sự kiện này sẽ ngay lập tức mở ra một cửa sổ cho ứng dụng có chiều rộng và chiều cao đã chỉ định. 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.

Bước 3: Tạo trang cửa sổ

Tạo tệp window.html:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>Hello, world!</div>
  </body>
</html>

Bước 4: Tạo biểu tượng

Sao chép các biểu tượng sau vào thư mục ứng dụng của bạn:

Bước 5: Phát hành ứng dụng

Bật cờ

Nhiều API của Ứng dụng Chrome vẫn đang trong quá trình thử nghiệm, vì vậy, bạn nên bật các API thử nghiệm để có thể dùng thử:

  • Chuyển đến chrome://flags.
  • Tìm "API tiện ích thử nghiệm" rồi nhấp vào đường liên kết "Bật".
  • Khởi động lại Chrome.

Tải ứng dụng

Để tải ứng dụng, hãy hiển thị trang quản lý ứng dụng và tiện ích bằng cách nhấp vào biểu tượng cài đặt Chrome rồi chọn Công cụ > Tiện ích.

Đảm bảo bạn đã chọn hộp đánh dấu Chế độ nhà phát triển.

Nhấp vào nút Tải tiện ích đã giải nén, chuyển đến thư mục của ứng dụng rồi nhấp vào OK.

Mở thẻ mới và khởi chạy

Sau khi bạn đã tải ứng dụng của mình, hãy mở trang Thẻ mới và nhấp vào biểu tượng ứng dụng mới.

Hoặc tải và khởi chạy từ dòng lệnh

Các tuỳ chọn dòng lệnh sau đây cho Chrome có thể giúp bạn lặp lại quy trình:

  • --load-and-launch-app=/path/to/app/ cài đặt ứng dụng đã giải nén từ đường dẫn nhất định và khởi chạy ứng dụng đó. Nếu ứng dụng đang chạy, ứng dụng sẽ được tải lại bằng nội dung cập nhật.
  • --app-id=ajjhbohkjpincjgiieeomimlgnll khởi chạy một ứng dụng đã được tải vào Chrome. Thao tác này không khởi động lại bất kỳ ứng dụng nào đã chạy trước đó, nhưng sẽ khởi chạy ứng dụng mới với mọi nội dung cập nhật.