Trang này được dịch bởi Cloud Translation API.

Chạy tập lệnh trên mọi trang

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.

Phần mở rộng về thời gian đọc trên Trang chào mừng của tiện ích.

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:

Cảnh báo về quyền mà người dùng sẽ nhìn thấy khi cài đặt tiện ích Thời gian đọc — Cảnh báo về quyền đọc dữ liệu.

Để 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:

Nội dung của thư mục thời gian đọc: manifest.json, content.js trong thư mục tập lệnh và thư mục hình ảnh.

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:

Thời gian đọc chạy trên Trang chào mừng — Trang chào mừng của phần mở rộng có tiện ích Thời gian đọc

🎯 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.