Tìm hiểu kiến thức cơ bản về quá trình 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 ví dụ về "Hello World", 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ị “Hello Extensions” khi người dùng nhấp vào biểu tượng thanh công cụ tiện ích.
Hãy 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. Nếu muốn, bạn có thể tải toàn bộ mã nguồn xuống từ GitHub.
Tiếp theo, 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ả các tính năng và cấu hình của tiện ích. Ví dụ: hầu hết các tệp kê khai chứa khoá "action" 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 sẽ hiển thị trong cửa sổ bật lên khi người dùng nhấp vào biểu tượng hành động của tiện ích.
{
"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ớ đổi tên của biểu tượng cho khớp với tên trong khoá "default_icon".
Đối với cửa sổ bật lên, hãy tạo một tệp có tên hello.html rồi thêm đoạn mã sau:
<html>
<body>
<h1>Hello Extensions</h1>
</body>
</html>
Giờ đây, tiện ích này hiển thị một 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 thử phiên bản này trong Chrome bằng cách tải mã cục bộ. Nhớ lưu tất cả các tệp.
Tải tiện ích đã giải nén
Cách tải tiện ích đã giải nén ở chế độ nhà phát triển:
- Chuyển đến trang Tiện ích bằng cách nhập
chrome://extensionsvào thẻ mới. (Theo thiết kế,chrome://URL không thể liên kết được.)- Ngoài ra, hãy 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.
- Bật Chế độ nhà phát triển bằng cách nhấp vào nút bật/tắt bên cạnh Chế độ nhà phát triển.
- Nhấp vào nút Tải tiện ích đã giải nén và chọn thư mục tiện ích.
Trang tiện ích (chrome://extensions)
Tôi ơi! Đã cài đặt thành công tiện ích. Nếu không có biểu tượng tiện ích nào được đưa vào tệp kê khai, thì một biểu tượng chung cho tiện ích sẽ được tạo.
Ghim tiện ích
Theo mặc định, khi bạn tải tiện ích trên máy, tiện ích đó sẽ xuất hiện trong trình đơn tiện ích (
). Hãy ghim tiện ích vào thanh công cụ để truy cập nhanh vào tiện ích trong quá trình phát triển.
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.
Tải lại tiện ích
Quay lại mã và đổi tên 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 để thấy sự thay đổi này trong trình duyệt. Truy cập trang Tiện ích và nhấp vào biểu tượng làm mới bên cạnh nút bật/tắt bật/tắt:
Thời điểm tải lại tiện ích
Bảng sau đây trình bày những thành phần cần tải lại để thấy được các thay đổi:
| Thành phần của tiện ích | Cần 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 chủ) |
| Cửa sổ bật lên | Không |
| Trang tuỳ chọn | Không |
| Trang HTML của phần mở rộng khác | Không |
Tìm lỗi và nhật ký bảng điều khiển
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ã của mình bằng cách truy cập vào nhật ký bảng điều khiển của trình duyệt. Trong trường hợp này, chúng ta sẽ tìm nhật ký của cửa sổ bật lên. Hãy bắt đầu bằng cách thêm 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 Bảng điều khiển:
- Mở cửa sổ bật lên.
- Nhấp chuột phải vào cửa sổ bật lên.
- Chọn Kiểm tra.
Kiểm tra cửa sổ bật lên. - Trong DevTools, hãy chuyển đến bảng điều khiển Console (Bảng điều khiển).
Kiểm tra cửa sổ bật lên
Nhật ký lỗi
Giờ chúng ta hãy chia nhỏ tiện ích này. Bạn có thể làm như vậ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 rồi mở cửa sổ bật lên. Nút Lỗi sẽ xuất hiện.
Nhấp vào nút Lỗi để tìm hiểu thêm về lỗi:
Để 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.
Xây dựng cấu trúc của một dự án mở rộng
Có nhiều cách để sắp xếp một dự án tiện ích. 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:
Sử dụng TypeScript
Nếu đang phát triển bằng cách sử dụng trình soạn thảo mã như VSCode hoặc Atom, bạn có thể sử dụng gói npm chrome-types để tận dụng tính năng tự động hoàn thành cho API Chrome. 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 mở rộng 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ử trên 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ẻ | Cách tạo một cửa sổ bật lên quản lý các thẻ trình duyệt. |
| Xử lý 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. |