Tiện ích Hello World (Xin chào thế giới)

Tìm hiểu kiến thức cơ bản về cách phát triển tiện ích của Chrome bằng cách tạo tiện ích Hello World đầu tiên của bạn.

Tổng quan

Bạn sẽ tạo một "Hello World" ("Xin chào thế giới") tải tiện ích cục bộ, tìm nhật ký và khám phá các đề xuất khác.

Xin chào mọi người

Tiện ích này sẽ hiển thị thông báo "Hello Extensions" khi người dùng nhấp vào biểu tượng thanh công cụ của tiện ích.

Tiện ích Hello
Cửa sổ bật lên Hello-Tiện ích

Bắt đầu bằng cách tạo một thư mục mới để lưu trữ các tệp tiện ích của bạn. Nếu muốn, bạn có thể tải toàn bộ mã nguồn trên GitHub.

Tiếp theo, hãy tạo một tệp mới trong thư mục này có tên là manifest.json. Tệp JSON này mô tả chức năng và cấu hình. Ví dụ: hầu hết các tệp kê khai chứa khoá "action" sẽ khai báo hình ảnh mà Chrome sẽ sử dụng làm biểu tượng hành động của tiện ích và trang HTML để hiển thị trong cửa sổ bật lên khi biểu tượng hành động của tiện ích được nhấp vào.

{
  "manifest_version": 3,
  "name": "Hello Extensions",
  "description": "Base Level Extension",
  "version": "1.0",
  "action": {
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png"
  }
}

Tải biểu tượng xuống thư mục của bạn và nhớ thay đổi tên của biểu tượng cho khớp với nội dung trong khoá "default_icon".

Đối với cửa sổ bật lên, hãy tạo tệp có tên hello.html và thêm mã sau:

<html>
  <body>
    <h1>Hello Extensions</h1>
  </body>
</html>

Tiện ích này hiện hiển thị cửa sổ bật lên khi biểu tượng hành động của tiện ích (biểu tượng thanh công cụ) được nhấp vào. Bạn có thể kiểm tra tệp trong Chrome bằng cách tải cục bộ. Đảm bảo bạn đã lưu tất cả các tệp.

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

Cách tải một tiện ích đã giải nén ở chế độ nhà phát triển:

  1. Chuyển đến trang Tiện ích bằng cách nhập chrome://extensions vào thẻ mới. (Theo thiết kế, chrome:// URL không thể liên kết.)
    • Ngoài ra, bạn có thể nhấp vào nút giải đố trên trình đơn Tiện ích rồi chọn Quản lý tiện ích ở cuối trình đơn.
    • Hoặc nhấp vào trình đơn Chrome, di chuột qua Công cụ khác, rồi chọn Tiện ích.
  2. Bật Chế độ nhà phát triển bằng cách nhấp vào nút chuyển bên cạnh Chế độ nhà phát triển.
  3. Nhấp vào nút Tải đã giải nén và chọn thư mục tiện ích.
    Trang Phần mở rộng
    Trang Tiện ích (chrome://extensions)

Ôi! Đã cài đặt thành công tiện ích này. Nếu không có biểu tượng tiện ích nào trong tệp kê khai, một biểu tượng chung sẽ được tạo cho tiện ích.

Ghim tiện ích

Theo mặc định, khi bạn tải cục bộ tiện ích của mình, tiện ích đó sẽ xuất hiện trong trình đơn tiện ích (Câu đố). Ghim tiện ích vào thanh công cụ để truy cập nhanh tiện ích trong quá trình phát triển.

Ghim tiện ích
Ghim tiện ích

Nhấp vào biểu tượng hành động của tiện ích (biểu tượng thanh công cụ); bạn sẽ thấy một cửa sổ bật lên.

tiện ích xin chào thế giới
tiện ích Hello World

Tải lại tiện ích

Quay lại mã và thay đổi tên của tiện ích thành "Hello Extensions of the world!" trong tệp kê khai.

{
  "manifest_version": 3,
  "name": "Hello Extensions of the world!",
  ...
}

Sau khi lưu tệp, bạn cũng phải làm mới tiện ích để xem thay đổi này trong trình duyệt. Tìm vào trang Tiện ích rồi nhấp vào biểu tượng làm mới bên cạnh nút chuyển bật/tắt:

Tải lại tiện ích

Thời điểm tải lại tiện ích

Bảng sau đây cho biết những thành phần nào cần được tải lại để xem các thay đổi:

Thành phần tiện ích Yêu cầu tải lại tiện ích
Tệp kê khai Có
Trình chạy dịch vụ Có
Tập lệnh nội dung Có (cùng với trang lưu trữ)
Cửa sổ bật lên Không
Trang tuỳ chọn Không
Các trang HTML tiện ích khác Không

Tìm nhật ký bảng điều khiển và lỗi

Nhật ký bảng điều khiển

Trong quá trình phát triển, bạn có thể gỡ lỗi mã bằng cách truy cập nhật ký bảng điều khiển trình duyệt. Trong trường hợp này, chúng tôi sẽ tìm nhật ký cho cửa sổ bật lên. Bắt đầu bằng cách thêm một thẻ tập lệnh vào hello.html.

<html>
  <body>
    <h1>Hello Extensions</h1>
    <script src="popup.js"></script>
  </body>
</html>

Tạo tệp một popup.js rồi thêm đoạn mã sau:

console.log("This is a popup!")

Cách xem thông báo này được ghi lại trong Console:

  1. Mở cửa sổ bật lên.
  2. Nhấp chuột phải vào cửa sổ bật lên.
  3. Chọn Kiểm tra.
    Kiểm tra cửa sổ bật lên.
    Kiểm tra một cửa sổ bật lên.
  4. Trong DevTools, hãy chuyển đến bảng điều khiển Bảng điều khiển.
    Bảng mã Công cụ cho nhà phát triển
    Kiểm tra cửa sổ bật lên

Nhật ký lỗi

Bây giờ, hãy cùng khám phá phần mở rộng này. Chúng ta có thể thực hiện việc này bằng cách xoá dấu ngoặc kép đóng trong popup.js:

console.log("This is a popup!) // ❌ broken code

Chuyển đến trang Tiện ích và mở cửa sổ bật lên. Nút Lỗi sẽ xuất hiện.

Trang tiện ích có nút lỗi

Nhấp vào nút Lỗi để tìm hiểu thêm về lỗi:

Thông tin chi tiết về lỗi của tiện ích

Để tìm hiểu thêm về cách gỡ lỗi trình chạy dịch vụ, trang tuỳ chọn và tập lệnh nội dung, hãy xem phần Gỡ lỗi tiện ích.

Tạo cấu trúc cho dự án tiện ích

Có nhiều cách để sắp xếp cấu trúc cho một dự án mở rộng; tuy nhiên, điều kiện tiên quyết duy nhất là phải đặt tệp manifest.json trong thư mục gốc của tiện ích như trong ví dụ sau:

Nội dung của thư mục tiện ích: manifest.json, background.js, thư mục tập lệnh, thư mục cửa sổ bật lên và thư mục hình ảnh.

Sử dụng TypeScript

Nếu đang phát triển bằng trình soạn thảo mã như VSCode hoặc Atom, bạn có thể sử dụng npm gói chrome-types để tận dụng tính năng tự động hoàn thành cho Chrome API. Gói npm này được cập nhật tự động khi mã nguồn Chromium thay đổi.

🚀 Bạn đã sẵn sàng bắt đầu xây dựng?

Chọn bất kỳ hướng dẫn nào sau đây để bắt đầu hành trình tìm hiểu tiện ích của bạn.

Phần mở rộng Kiến thức bạn sẽ học được
Chạy tập lệnh trên mọi trang Để tự động chèn một phần tử vào mọi trang.
Chèn tập lệnh vào thẻ đang hoạt động Để chạy mã trên trang hiện tại sau khi nhấp vào thao tác với tiện ích.
Quản lý thẻ Tạo cửa sổ bật lên quản lý các thẻ trình duyệt.
Xử lý các sự kiện bằng trình chạy dịch vụ Cách trình chạy dịch vụ tiện ích xử lý các sự kiện.