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 có thể 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 giúp 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.

Đọc phần mở rộng về thời gian trong trang Chào mừng của tiện ích — Đọc phần mở rộng về thời gian 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 tiện ích.
Kích thước biểu tượng mà một 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 (Xin chào mọi người) để giới thiệu về 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 giữ các tệp của tiện ích. Nếu bạn 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ề tiện ích

Tệp kê khai JSON là tệp bắt buộc duy nhất. Hồ sơ này chứa thông tin quan trọng về tiện ích. Tạo 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. Các quy tắc 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 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ề tệp kê khai.

💡 Các 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".
Tính năng này hỗ trợ nhận xét (//) trong quá trình phát triển. Tuy nhiên, bạn phải xoá các nhận xét này trước khi tải mã của mình 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 là không bắt buộc trong quá trình phát triển, nhưng chúng là bắt buộc nếu bạn đị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 trong các báo cáo khác ở những nơi 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 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 đều được phép, ngoại trừ tệp SVG.

💡 Các biểu tượng có kích thước khác nhau này được hiển thị ở đâ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 tiện ích.
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 tập lệnh đọc và sửa đổi nội dung của trang. Những nội dung này được gọi là nội dung tập lệnh. Chúng 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 các tiện ích khác của chúng tập lệnh nội dung.

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 quyền này cho phép trình duyệt xác định trang web để chèn tập lệnh nội dung vào. Kiểu 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ọ biết chức năng của tiện ích đó. 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 khớp.

Trong ví dụ này, người dùng sẽ thấy cảnh báo quyền sau đây:

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

Để tìm hiểu sâu hơn về các quyền đối với 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) 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 đó, Chrome 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 số từ thời gian đọc.

Tạo một tệp có tên là content.js bên trong thư mục có tên là scripts rồi 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

Thông thường biểu thức dùng để chỉ đếm các từ 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 không bắt buộc 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.
Hợp nhất rỗng sẽ trả về <heading> nếu <date> rỗng hoặc không xác định.

Kiểm tra xem ứng dụng có hoạt động khô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 images.

Tải tiện ích trên thiết bị

Để tải 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 Phát triển Thông tin cơ bản.

Mở tiện ích hoặc tài liệu trong Cửa hàng Chrome trực tuyến

Dưới đây là một vài trang bạn có thể mở để xem thời gian đọ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 tiện ích có tiện ích Thời gian đọc

🎯 Các điểm cải tiến tiềm năng

Dựa trên những nội dung bạn đã tìm hiểu hôm nay, hãy cố gắng triển khai bất kỳ thao tác nào sau đây:

Thêm một mẫu so khớp khác trong tệp manifest.json để hỗ trợ nhà phát triển Chrome khác các trang khác, chẳng hạn như Công cụ của Chrome cho nhà phát triển hoặc Hộp công việc.
Thêm tập lệnh nội dung mới để tính toán thời gian đọc cho bất kỳ blog yêu thích nào của bạn hoặc các trang web tài liệu khác.

Tiếp tục xây dựng

Chúc mừng bạn đã hoàn thành hướng dẫn này 🎉. Tiếp tục xây dựng kỹ năng bằng cách hoàn thành các các hướng dẫn trong loạt video này:

Phần mở rộng	Kiến thức bạn sẽ học được
Chế độ tập trung	Để 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ẻ	Tạo 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 khi xây dựng tiện ích này cho Chrome cũng như tiếp tục sử dụng Chrome phát triển hành trình học tập. Bạn nên sử dụng lộ trình học tập sau đây:

Hướng dẫn cho nhà phát triển có hàng chục đường liên kết bổ sung đến các phần của tài liệu liên quan đến việc tạo phần mở rộng nâng cao.
Các tiện ích có quyền truy cập vào các API mạnh mẽ ngoài những API có sẵn trên web mở. Tài liệu về API Chrome sẽ trình bày về từng API.