Tạo phần mở rộng đầu tiên để chèn một phần tử mới trên trang.
Tổng quan
Hướng dẫn này sẽ tạo một tiện ích giúp thêm thời gian đọc dự kiến vào bất kỳ tiện ích Chrome nào và trang tài liệu Cửa hàng Chrome trực tuyến.
Trong hướng dẫn này, chúng tôi sẽ giải thích các khái niệm sau:
- Tệp kê khai tiện ích.
- Kích thước biểu tượng mà tiện ích sử dụng.
- Cách chèn mã vào các trang bằng tập lệnh nội dung.
- Cách sử dụng mẫu khớp.
- Quyền truy cập tiện ích.
Trước khi bắt đầu
Hướng dẫn này giả định rằng bạn có kinh nghiệm phát triển web cơ bản. Bạn nên xem hướng dẫn Xin chào thế giới để tìm hiểu quy trình phát triển tiện ích.
Tạo tiện ích
Để bắt đầu, hãy tạo một thư mục mới có tên là reading-time để lưu trữ các tệp của tiện ích. Nếu muốn, bạn có thể tải mã nguồn đầy đủ xuống từ GitHub.
Bước 1: Thêm thông tin về tiện ích
Tệp JSON kê khai là tệp bắt buộc duy nhất. Tệp này chứa thông tin quan trọng về
tiện ích. Tạo tệp manifest.json trong thư mục gốc của dự án rồi thêm mã sau:
{
"manifest_version": 3,
"name": "Reading time",
"version": "1.0",
"description": "Add the reading time to Chrome Extension documentation articles"
}
Các khoá này chứa siêu dữ liệu cơ bản cho tiện ích. Các thuộc tính này kiểm soát cách tiện ích xuất hiện trên trang tiện ích và trên Cửa hàng Chrome trực tuyến (khi được phát hành). Để tìm hiểu sâu hơn, hãy xem các khoá "name", "version" và "description" trên trang tổng quan về Tệp kê khai.
💡 Thông tin khác về tệp kê khai tiện ích
- Tệp này phải nằm ở gốc của dự án.
- Các khoá bắt buộc duy nhất là
"manifest_version","name"và"version". - Công cụ này hỗ trợ nhận xét (
//) trong quá trình phát triển, nhưng bạn phải xoá các nhận xét này trước khi tải mã lên Cửa hàng Chrome trực tuyến.
Bước 2: Cung cấp biểu tượng
Vậy tại sao bạn cần biểu tượng? Mặc dù biểu tượng không bắt buộc trong quá trình phát triển, nhưng bạn bắt buộc phải có biểu tượng nếu dự định phân phối tiện ích trên Cửa hàng Chrome trực tuyến. Các phần mở rộng này cũng xuất hiện ở các vị trí khác như trang Quản lý phần mở rộng.
Tạo thư mục images và đặt các biểu tượng vào bên trong. Bạn có thể tải biểu tượng xuống trên GitHub. Tiếp theo, hãy thêm mã được làm nổi bật vào tệp kê khai để khai báo biểu tượng:
{
"icons": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
}
}
Bạn nên sử dụng tệp PNG, nhưng các định dạng tệp khác cũng được chấp nhận, ngoại trừ tệp SVG.
💡 Những biểu tượng có kích thước khác nhau này hiển thị ở đâu?
| Kích thước biểu tượng | Sử dụng biểu tượng |
|---|---|
| 16x16 | Favicon trên các trang và trình đơn theo bối cảnh của phần mở rộng. |
| 32x32 | Máy tính Windows thường yêu cầu kích thước này. |
| 48x48 | Xuất hiện trên trang Phần mở rộng. |
| 128x128 | Hiển thị trong quá trình cài đặt và trong Cửa hàng Chrome trực tuyến. |
Bước 3: Khai báo tập lệnh nội dung
Tiện ích có thể chạy các tập lệnh đọc và sửa đổi nội dung của một trang. Đây được gọi là tập lệnh nội dung. Các tiện ích này hoạt động trong một môi trường riêng biệt, nghĩa là chúng có thể thay đổi môi trường JavaScript mà không xung đột với trang lưu trữ hoặc tập lệnh nội dung của các tiện ích khác.
Thêm mã sau vào manifest.json để đăng ký tập lệnh nội dung có tên content.js.
{
"content_scripts": [
{
"js": ["scripts/content.js"],
"matches": [
"https://developer.chrome.com/docs/extensions/*",
"https://developer.chrome.com/docs/webstore/*"
]
}
]
}
Trường "matches" có thể có một hoặc nhiều mẫu khớp. Các thẻ này cho phép trình duyệt xác định những trang web cần chèn tập lệnh nội dung. Mẫu khớp bao gồm 3 phần:
<scheme>://<host><path>. Các giá trị này có thể chứa ký tự "*".
💡 Tiện ích này có hiển thị cảnh báo về quyền không?
Khi người dùng cài đặt một tiện ích, trình duyệt sẽ thông báo cho họ về những việc mà tiện ích đó có thể làm. Tập lệnh nội dung yêu cầu quyền chạy trên các trang web đáp ứng tiêu chí mẫu khớp.
Trong ví dụ này, người dùng sẽ thấy cảnh báo cấp quyền sau:
Để tìm hiểu sâu hơn về quyền của tiện ích, hãy xem bài viết Khai báo quyền và cảnh báo người dùng.
Bước 4: Tính toán và chèn thời gian đọc
Tập lệnh nội dung có thể sử dụng Mô hình đối tượng tài liệu (DOM) tiêu chuẩn để đọc và thay đổi nội dung của một trang. Trước tiên, tiện ích này sẽ kiểm tra xem trang có chứa phần tử <article> hay không.
Sau đó, hàm này sẽ đếm tất cả các từ trong phần tử này và tạo một đoạn văn bản hiển thị tổng thời gian đọc.
Tạo một tệp có tên content.js bên trong thư mục có tên scripts và thêm mã sau:
const article = document.querySelector("article");
// `document.querySelector` may return null if the selector doesn't match anything.
if (article) {
const text = article.textContent;
const wordMatchRegExp = /[^\s]+/g; // Regular expression
const words = text.matchAll(wordMatchRegExp);
// matchAll returns an iterator, convert to array to get word count
const wordCount = [...words].length;
const readingTime = Math.round(wordCount / 200);
const badge = document.createElement("p");
// Use the same styling as the publish information in an article's header
badge.classList.add("color-secondary-text", "type--caption");
badge.textContent = `⏱️ ${readingTime} min read`;
// Support for API reference docs
const heading = article.querySelector("h1");
// Support for article docs with date
const date = article.querySelector("time")?.parentNode;
(date ?? heading).insertAdjacentElement("afterend", badge);
}
💡 JavaScript thú vị được dùng trong mã này
- Biểu thức chính quy chỉ dùng để đếm các từ bên trong phần tử
<article>. insertAdjacentElement()dùng để chèn nút thời gian đọc sau phần tử.- Thuộc tính classList dùng để thêm tên lớp CSS vào thuộc tính lớp phần tử.
- Chuỗi tuỳ chọn dùng để truy cập vào một thuộc tính đối tượng có thể chưa được xác định hoặc rỗng.
- Hợp nhất giá trị rỗng trả về
<heading>nếu<date>là giá trị rỗng hoặc không xác định.
Kiểm thử để đảm bảo tính năng này hoạt động
Xác minh rằng cấu trúc tệp của dự án có dạng như sau:
Tải tiện ích trên máy
Để tải một tiện ích chưa giải nén ở chế độ nhà phát triển, hãy làm theo các bước trong phần Kiến thức cơ bản về phát triển.
Mở một tiện ích hoặc tài liệu về Cửa hàng Chrome trực tuyến
Sau đây là một số trang bạn có thể mở để xem thời gian đọc của từng bài viết.
Ứng dụng sẽ hiển thị như sau:
🎯 Các điểm cải tiến tiềm năng
Dựa trên những gì bạn đã học được hôm nay, hãy thử triển khai một trong những cách sau:
- Thêm một mẫu khớp khác trong tệp manifest.json để hỗ trợ các trang nhà phát triển Chrome khác, chẳng hạn như Chrome DevTools hoặc Workbox.
- Thêm một tập lệnh nội dung mới để tính thời gian đọc cho bất kỳ blog hoặc trang web tài liệu nào mà bạn yêu thích.
Tiếp tục xây dựng
Chúc mừng bạn đã hoàn thành hướng dẫn này 🎉. Hãy tiếp tục trau dồi kỹ năng của bạn bằng cách hoàn thành các hướng dẫn khác trong loạt bài này:
| Phần mở rộng | Kiến thức bạn sẽ học được |
|---|---|
| Chế độ lấy nét | Để chạy mã trên trang hiện tại sau khi nhấp vào hành động của tiện ích. |
| Trình quản lý thẻ | Để tạo một cửa sổ bật lên quản lý các thẻ trình duyệt. |
Tiếp tục khám phá
Chúng tôi hy vọng bạn đã có trải nghiệm thú vị khi xây dựng tiện ích Chrome này và rất mong được tiếp tục hành trình tìm hiểu về việc phát triển Chrome cùng bạn. Bạn nên tham khảo lộ trình học tập sau:
- Hướng dẫn dành cho nhà phát triển có hàng chục đường liên kết bổ sung đến các tài liệu liên quan đến việc tạo tiện ích nâng cao.
- Tiện ích có quyền truy cập vào các API mạnh mẽ ngoài những API có trên web mở. Tài liệu về API Chrome trình bày từng API.