Tạo tiện ích đầu tiên để chèn một phần tử mới vào trang.
Tổng quan
Hướng dẫn này tạo một tiện ích để thêm thời gian đọc dự kiến vào mọi tiện ích của Chrome và trang tài liệu của 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 của 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 so 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 Hello world để biết 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 hoàn chỉnh xuống từ GitHub.
Bước 1: Thêm thông tin về phần mở rộng
Tệp kê khai JSON là tệp bắt buộc duy nhất. Tệp này lưu giữ thông tin quan trọng về tiện ích. Tạo một tệp manifest.json
trong gốc của dự án và thêm đoạn 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. Họ 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 xuất bản. Để tìm hiểu sâu hơn, hãy xem các phím "name"
, "version"
và "description"
trên trang tổng quan về Manifest.
💡 Những 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á duy nhất bắt buộc là
"manifest_version"
,"name"
và"version"
. - Tiện ích này hỗ trợ tính năng nhận xét (
//
) trong quá trình phát triển, nhưng bạn phải loại bỏ 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 các biểu tượng
Vậy, tại sao bạn cần các biểu tượng? Mặc dù biểu tượng là không bắt buộc trong quá trình phát triển, nhưng bạn bắt buộc phải sử dụng các biểu tượng này nếu định phân phối tiện ích trên Cửa hàng Chrome trực tuyến. Chúng cũng xuất hiện ở các vị trí khác như trang Quản lý tiện ích.
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 các biểu tượng xuống từ GitHub. Tiếp theo, hãy thêm mã được đánh dấu vào tệp kê khai để khai báo các 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 dùng tệp PNG, nhưng vẫn cho phép các định dạng tệp khác, ngoại trừ tệp SVG.
💡 Những biểu tượng có kích thước khác nhau này xuất hiện ở đâu?
Kích thước biểu tượng | Sử dụng biểu tượng |
---|---|
16x16 | Biểu tượng trang web 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 | Hiển thị trên trang Tiện ích. |
128x128 | Hiển thị khi 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
Các tiện ích có thể chạy các tập lệnh đọc và sửa đổi nội dung của trang. Các tập lệnh này được gọi là tập lệnh nội dung. Các API này sống trong một thế giới tách 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 là
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 so khớp. Các tập lệnh này cho phép trình duyệt xác định trang web sẽ chèn tập lệnh nội dung. Mẫu so khớp bao gồm ba phần: <scheme>://<host><path>
. Chúng 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ọ những việc 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í về mẫu trùng khớp.
Trong ví dụ này, người dùng sẽ thấy cảnh báo về quyền sau đây:
Để tìm hiểu sâu hơn về các 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 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) chuẩn để đọc và thay đổi nội dung của 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 đó, trình đọc sẽ đếm tất cả các từ trong phần tử này và tạo một đoạn văn cho thấy tổng thời gian đọc.
Tạo tệp có tên content.js
bên trong thư mục có tên scripts
và thêm đoạn 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 được dùng để thêm tên lớp CSS vào thuộc tính lớp phần tử.
- Tạo chuỗi tuỳ chọn dùng để truy cập vào một thuộc tính đối tượng có thể không xác định hoặc rỗng.
- Quy tắc kết hợp rỗng sẽ trả về
<heading>
nếu<date>
có giá trị rỗng hoặc không xác định.
Kiểm tra để đả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 của bạn trên thiết bị
Để tải một tiện ích đã 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ề quá trình phát triển.
Mở một tiện ích hoặc tài liệu của Cửa hàng Chrome trực tuyến
Dưới đây là một vài trang mà bạn có thể mở để xem thời lượng đọc mỗi bài viết.
Ứng dụng sẽ hiển thị như sau:
🎯 Các điểm cải tiến có thể thực hiện
Dựa trên những điều bạn đã học hôm nay, hãy cố gắng triển khai bất kỳ cách nào sau đây:
- Thêm một mẫu so khớp khác trong tệp manifest.json để hỗ trợ các trang dành cho nhà phát triển Chrome khác, chẳng hạn như Công cụ của Chrome cho nhà phát triển hoặc Hộp làm việc.
- Thêm một tập lệnh nội dung mới tính thời gian đọc của 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 xây dựng kỹ năng bằng cách hoàn thành các bài hướng dẫn khác trong loạt hướng dẫn 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 thao tác với tiện ích. |
Trình 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. |
Tiếp tục khám phá
Chúng tôi hy vọng bạn hài lòng với việc tạo tiện ích của Chrome này cũng như rất vui được tiếp tục hành trình tìm hiểu quá trình phát triển Chrome. Bạn nên tham gia lộ trình học tập sau đây:
- 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.
- Các tiện ích có quyền truy cập vào những API mạnh mẽ ngoài những API có sẵn trên web mở. Tài liệu về API Chrome sẽ hướng dẫn từng bước về API.