Tạo trình quản lý thẻ đầu tiên.
Tổng quan
Hướng dẫn này xây dựng một trình quản lý thẻ để sắp xếp tiện ích của Chrome và các thẻ tài liệu trong 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ách thực hiện những điều sau:
- Tạo cửa sổ bật lên tiện ích bằng cách sử dụng API Action.
- Truy vấn các thẻ cụ thể bằng API Thẻ.
- Bảo vệ quyền riêng tư của người dùng thông qua các quyền hạn hẹp đối với máy chủ.
- Thay đổi tiêu điểm của thẻ.
- Di chuyển các thẻ vào cùng một cửa sổ và nhóm lại.
- Đổi tên nhóm thẻ bằng API TabGroups.
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 thanh toán Xin chào thế giới để được 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à tabs-manager để 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 trên GitHub.
Bước 1: Thêm dữ liệu và biểu tượng của tiện ích
Tạo một tệp có tên là manifest.json rồi thêm đoạn mã sau:
{
"manifest_version": 3,
"name": "Tab Manager for Chrome Dev Docs",
"version": "1.0",
"icons": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
}
}
Để tìm hiểu thêm về các khoá tệp kê khai này, hãy xem hướng dẫn Thời gian đọc, trong đó giải thích chi tiết hơn về siêu dữ liệu và biểu tượng của tiện ích.
Tạo một thư mục images rồi tải các biểu tượng xuống vào thư mục đó.
Bước 2: Tạo và tạo kiểu cho cửa sổ bật lên
API Action kiểm soát thao tác với tiện ích (biểu tượng thanh công cụ). Khi người dùng nhấp vào
thao tác với tiện ích, thao tác này sẽ chạy một số mã hoặc mở cửa sổ bật lên, như trong trường hợp này. Bắt đầu chậm nhất vào
khai báo cửa sổ bật lên trong manifest.json:
{
"action": {
"default_popup": "popup.html"
}
}
Cửa sổ bật lên tương tự như trang web với một ngoại lệ: không thể chạy JavaScript cùng dòng. Tạo tệp một popup.html rồi thêm đoạn mã sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./popup.css" />
</head>
<body>
<template id="li_template">
<li>
<a>
<h3 class="title">Tab Title</h3>
<p class="pathname">Tab Pathname</p>
</a>
</li>
</template>
<h1>Google Dev Docs</h1>
<button>Group Tabs</button>
<ul></ul>
<script src="./popup.js" type="module"></script>
</body>
</html>
Tiếp theo, bạn sẽ tạo kiểu cho cửa sổ bật lên. Tạo tệp một popup.css rồi thêm đoạn mã sau:
body {
width: 20rem;
}
ul {
list-style-type: none;
padding-inline-start: 0;
margin: 1rem 0;
}
li {
padding: 0.25rem;
}
li:nth-child(odd) {
background: #80808030;
}
li:nth-child(even) {
background: #ffffff;
}
h3,
p {
margin: 0;
}
Bước 3: Quản lý các thẻ
API Thẻ cho phép tiện ích tạo, truy vấn, sửa đổi và sắp xếp lại các thẻ trong trình duyệt.
Yêu cầu cấp quyền
Bạn có thể sử dụng nhiều phương thức trong API Thẻ mà không cần yêu cầu quyền. Tuy nhiên, chúng ta cần quyền truy cập vào title và URL của các thẻ; những thuộc tính nhạy cảm này yêu cầu quyền. Chúng ta có thể yêu cầu quyền "tabs", nhưng điều này sẽ cấp quyền truy cập vào các thuộc tính nhạy cảm của tất cả thẻ. Vì chúng tôi chỉ quản lý các thẻ của một trang web cụ thể nên chúng tôi sẽ yêu cầu quyền ở phạm vi hẹp từ máy chủ.
Quyền của máy chủ lưu trữ ở phạm vi hẹp giúp chúng tôi bảo vệ quyền riêng tư của người dùng bằng cách cấp quyền cấp cao cho các trang web cụ thể. Thao tác này sẽ cấp quyền truy cập vào các thuộc tính title và URL cũng như các khả năng bổ sung. Thêm mã được đánh dấu vào tệp manifest.json:
{
"host_permissions": [
"https://developer.chrome.com/*"
]
}
💡 Những điểm khác biệt chính giữa quyền đối với thẻ và quyền của máy chủ lưu trữ là gì?
Cả quyền "tabs" và quyền của máy chủ lưu trữ đều có những hạn chế.
Quyền "tabs" cấp cho tiện ích khả năng đọc dữ liệu nhạy cảm trên tất cả các thẻ. Theo thời gian, thông tin này có thể được dùng để thu thập nhật ký duyệt web của người dùng. Do đó, nếu bạn yêu cầu quyền này, Chrome sẽ hiển thị thông báo cảnh báo sau khi cài đặt:
Quyền của máy chủ lưu trữ cho phép tiện ích đọc và truy vấn các thuộc tính nhạy cảm của thẻ trùng khớp, đồng thời chèn tập lệnh trên các thẻ này. Người dùng sẽ thấy thông báo cảnh báo sau khi cài đặt:
Những cảnh báo này có thể gây báo động cho người dùng. Để có trải nghiệm làm quen tốt hơn, bạn nên triển khai các quyền không bắt buộc.
Truy vấn thẻ
Bạn có thể truy xuất các thẻ từ những URL cụ thể bằng phương thức tabs.query(). Tạo một popup.js
và thêm mã sau:
const tabs = await chrome.tabs.query({
url: [
"https://developer.chrome.com/docs/webstore/*",
"https://developer.chrome.com/docs/extensions/*",
]
});
💡 Tôi có thể sử dụng API Chrome ngay trong cửa sổ bật lên không?
Cửa sổ bật lên và các trang tiện ích khác có thể gọi bất kỳ API Chrome nào vì chúng được phân phát từ
giản đồ chrome. Ví dụ: chrome-extension://EXTENSION_ID/popup.html.
Đặt tiêu điểm vào một thẻ
Đầu tiên, tiện ích này sẽ sắp xếp tên thẻ (tiêu đề của các trang HTML bên trong) theo thứ tự bảng chữ cái. Sau đó, khi người dùng nhấp vào một mục trong danh sách,
đặt tiêu điểm vào thẻ đó bằng tabs.update() rồi đưa cửa sổ lên phía trước bằng windows.update().
Thêm mã sau vào tệp popup.js:
...
const collator = new Intl.Collator();
tabs.sort((a, b) => collator.compare(a.title, b.title));
const template = document.getElementById("li_template");
const elements = new Set();
for (const tab of tabs) {
const element = template.content.firstElementChild.cloneNode(true);
const title = tab.title.split("-")[0].trim();
const pathname = new URL(tab.url).pathname.slice("/docs".length);
element.querySelector(".title").textContent = title;
element.querySelector(".pathname").textContent = pathname;
element.querySelector("a").addEventListener("click", async () => {
// need to focus window as well as the active tab
await chrome.tabs.update(tab.id, { active: true });
await chrome.windows.update(tab.windowId, { focused: true });
});
elements.add(element);
}
document.querySelector("ul").append(...elements);
...
💡 JavaScript thú vị được dùng trong mã này
- Collator dùng để sắp xếp mảng thẻ theo ngôn ngữ ưu tiên của người dùng.
- Thẻ mẫu dùng để
xác định một phần tử HTML có thể sao chép thay vì sử dụng
document.createElement()để tạo từng mục. - Hàm khởi tạo URL dùng để tạo và phân tích cú pháp URL.
- Cú pháp Trải rộng được dùng để chuyển đổi Tập hợp các phần tử thành các đối số trong lệnh gọi
append().
Nhóm các thẻ
API TabGroups cho phép tiện ích đặt tên cho nhóm và chọn nền
. Thêm quyền "tabGroups" vào tệp kê khai bằng cách thêm đoạn mã được làm nổi bật:
{
"permissions": [
"tabGroups"
]
}
Trong popup.js, hãy thêm mã sau để tạo một nút sẽ nhóm tất cả thẻ bằng cách sử dụng tabs.group() và
hãy di chuyển chúng vào cửa sổ hiện tại.
const button = document.querySelector("button");
button.addEventListener("click", async () => {
const tabIds = tabs.map(({ id }) => id);
if (tabIds.length) {
const group = await chrome.tabs.group({ tabIds });
await chrome.tabGroups.update(group, { title: "DOCS" });
}
});
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ủa bạn khớp với cây thư mục sau:
Tải tiện ích 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 Hello World (Xin chào thế giới).
Mở một số trang tài liệu
Mở các tài liệu sau trong các cửa sổ khác nhau:
- Thiết kế giao diện người dùng
- Khả năng khám phá trên Cửa hàng Chrome trực tuyến
- Tổng quan về quá trình phát triển tiện ích
- Định dạng tệp kê khai
- Xuất bản trong Cửa hàng Chrome trực tuyến
Nhấp vào cửa sổ bật lên. Ứng dụng sẽ hiển thị như sau:
Nhấp vào "Nhóm thẻ" . Ứ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 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:
- Tuỳ chỉnh biểu định kiểu cửa sổ bật lên.
- Thay đổi màu sắc và tiêu đề của nhóm thẻ.
- Quản lý các thẻ của một trang web tài liệu khác.
- Thêm tính năng hỗ trợ để huỷ nhóm các thẻ đã nhóm.
Hãy 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 phát triển 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 |
|---|---|
| Thời gian đọc | Để tự động chèn một phần tử vào mọi trang. |
| 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. |
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.