Đơn giản hoá kiểu của trang hiện tại bằng cách nhấp vào biểu tượng thanh công cụ tiện ích.
Tổng quan
Hướng dẫn này tạo một tiện ích giúp đơn giản hoá kiểu của tiện ích Chrome và các trang tài liệu của Cửa hàng Chrome trực tuyến để dễ đọc hơ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 việc sau:
- Sử dụng trình chạy dịch vụ tiện ích làm điều phối viên sự kiện.
- Bảo vệ quyền riêng tư của người dùng thông qua quyền
"activeTab". - Chạy mã khi người dùng nhấp vào biểu tượng thanh công cụ của tiện ích.
- Chèn và xoá một biểu định kiểu bằng Scripting API.
- Sử dụng phím tắt để thực thi mã.
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 bài viết Hello World để biết thông tin 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à focus-mode. Thư mục này chứa 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 dữ liệu và biểu tượng tiện ích
Tạo một tệp có tên là manifest.json và đưa vào đoạn mã sau.
{
"manifest_version": 3,
"name": "Focus Mode",
"description": "Enable focus mode on Chrome's official Extensions and Chrome Web Store documentation.",
"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 "Chạy tập lệnh trên mọi thẻ" giải thích chi tiết hơn về siêu dữ liệu và các biểu tượng của tiện ích.
Tạo thư mục images rồi tải các biểu tượng xuống vào thư mục đó.
Bước 2: Khởi chạy tiện ích
Các tiện ích có thể theo dõi các sự kiện của trình duyệt ở chế độ nền bằng cách sử dụng trình chạy dịch vụ của tiện ích. Trình chạy dịch vụ là các môi trường JavaScript đặc biệt giúp xử lý các sự kiện và chấm dứt khi không cần thiết.
Bắt đầu bằng cách đăng ký trình chạy dịch vụ trong tệp manifest.json:
{
...
"background": {
"service_worker": "background.js"
},
...
}
Tạo một tệp có tên là background.js rồi thêm đoạn mã sau:
chrome.runtime.onInstalled.addListener(() => {
chrome.action.setBadgeText({
text: "OFF",
});
});
Sự kiện đầu tiên mà worker của chúng tôi sẽ theo dõi là runtime.onInstalled(). Phương thức này cho phép tiện ích đặt trạng thái ban đầu hoặc hoàn tất một số tác vụ khi cài đặt. Các tiện ích có thể sử dụng Storage API và IndexedDB để lưu trữ trạng thái của ứng dụng. Tuy nhiên, trong trường hợp này, vì chúng tôi chỉ xử lý hai trạng thái nên chúng ta sẽ sử dụng chính văn bản huy hiệu của hành động để theo dõi xem tiện ích đang "BẬT" hay "TẮT".
Bước 3: Bật thao tác với tiện ích
Thao tác với tiện ích kiểm soát biểu tượng thanh công cụ của tiện ích. Vì vậy, bất cứ khi nào người dùng nhấp vào biểu tượng tiện ích, biểu tượng đó sẽ chạy một số mã (như trong ví dụ này) hoặc hiển thị một cửa sổ bật lên. Thêm mã sau để khai báo thao tác của tiện ích trong tệp manifest.json:
{
...
"action": {
"default_icon": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
}
},
...
}
Sử dụng quyền ActiveTab để bảo vệ quyền riêng tư của người dùng
Quyền activeTab cấp cho tiện ích khả năng thực thi mã tạm thời trên thẻ đang hoạt động. Nhờ vậy, thẻ hiện tại cũng có quyền truy cập vào các thuộc tính nhạy cảm.
Quyền này được bật khi người dùng gọi tiện ích. Trong trường hợp này, người dùng gọi tiện ích bằng cách nhấp vào thao tác với tiện ích.
💡 Những hoạt động tương tác nào khác của người dùng cấp quyền sử dụng thẻ ActiveTab trong tiện ích của riêng tôi?
- Nhấn một tổ hợp phím tắt.
- Chọn một mục trong trình đơn theo bối cảnh.
- Chấp nhận đề xuất từ thanh địa chỉ.
- Mở cửa sổ bật lên của tiện ích.
Quyền "activeTab" cho phép người dùng có mục đích chọn chạy tiện ích trên thẻ làm tâm điểm; bằng cách này, quyền riêng tư của người dùng sẽ được bảo vệ. Một lợi ích khác là không kích hoạt cảnh báo quyền.
Để sử dụng quyền "activeTab", hãy thêm quyền đó vào mảng quyền của tệp kê khai:
{
...
"permissions": ["activeTab"],
...
}
Bước 4: Theo dõi trạng thái của thẻ hiện tại
Sau khi người dùng nhấp vào thao tác của tiện ích, tiện ích sẽ kiểm tra xem URL có khớp với
trang tài liệu hay không. Tiếp theo, tính năng này sẽ kiểm tra trạng thái của thẻ hiện tại và đặt trạng thái tiếp theo. Thêm mã sau vào background.js:
const extensions = 'https://developer.chrome.com/docs/extensions'
const webstore = 'https://developer.chrome.com/docs/webstore'
chrome.action.onClicked.addListener(async (tab) => {
if (tab.url.startsWith(extensions) || tab.url.startsWith(webstore)) {
// Retrieve the action badge to check if the extension is 'ON' or 'OFF'
const prevState = await chrome.action.getBadgeText({ tabId: tab.id });
// Next state will always be the opposite
const nextState = prevState === 'ON' ? 'OFF' : 'ON'
// Set the action badge to the next state
await chrome.action.setBadgeText({
tabId: tab.id,
text: nextState,
});
}
});
Bước 5: Thêm hoặc xoá biểu định kiểu
Giờ là lúc thay đổi bố cục của trang. Tạo một tệp có tên focus-mode.css và đưa vào mã sau:
body > .scaffold > :is(top-nav, navigation-rail, side-nav, footer),
main > :not(:last-child),
main > :last-child > navigation-tree,
main .toc-container {
display: none;
}
main > :last-child {
margin-top: min(10vmax, 10rem);
margin-bottom: min(10vmax, 10rem);
}
Chèn hoặc xoá biểu định kiểu bằng Scripting API. Bắt đầu bằng cách khai báo quyền "scripting" trong tệp kê khai:
{
...
"permissions": ["activeTab", "scripting"],
...
}
Cuối cùng, trong background.js, hãy thêm mã sau để thay đổi bố cục của trang:
...
if (nextState === "ON") {
// Insert the CSS file when the user turns the extension on
await chrome.scripting.insertCSS({
files: ["focus-mode.css"],
target: { tabId: tab.id },
});
} else if (nextState === "OFF") {
// Remove the CSS file when the user turns the extension off
await chrome.scripting.removeCSS({
files: ["focus-mode.css"],
target: { tabId: tab.id },
});
}
}
});
💡 Tôi có thể dùng API Scripting để chèn mã thay vì một biểu định kiểu không?
Có. Bạn có thể dùng scripting.executeScript() để chèn JavaScript.
Không bắt buộc: Chỉ định phím tắt
Để giải trí, hãy thêm một phím tắt để giúp bạn dễ dàng bật hoặc tắt chế độ lấy nét. Thêm khoá "commands" vào tệp kê khai.
{
...
"commands": {
"_execute_action": {
"suggested_key": {
"default": "Ctrl+B",
"mac": "Command+B"
}
}
}
}
Khoá "_execute_action" chạy mã giống như sự kiện action.onClicked(), vì vậy, bạn không cần thêm mã.
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 Hello World (Xin chào thế giới).
Kiểm tra tiện ích trên trang tài liệu
Trước tiên, hãy mở một trang bất kỳ sau đây:
- Chào mừng bạn đến với tài liệu về Tiện ích của Chrome
- Xuất bản trong Cửa hàng Chrome trực tuyến
- API Tập lệnh
Sau đó, hãy nhấp vào thao tác tương ứng với tiện ích. Nếu thiết lập phím tắt, bạn có thể kiểm tra phím tắt đó bằng cách nhấn vào Ctrl + B hoặc Cmd + B.
Quy trình này phải bắt đầu từ:
Đối với nội dung này:
🎯 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 thực hiện bất kỳ việc nào sau đây:
- Cải thiện biểu định kiểu CSS.
- Chỉ định một phím tắt khác.
- Thay đổi bố cục của blog hoặc trang web tài liệu yêu thích của bạn.
Tiếp tục dựng xây.
Chúc mừng bạn đã hoàn thành hướng dẫn này 🎉. Hãy tiếp tục nâng cao kỹ năng bằng cách hoàn thành các bài hướng dẫn khác trong chuỗi hướng dẫn 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ột nhóm trang cụ thể. |
| 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 thấy hài lòng khi tạo tiện ích của Chrome này, cũng như mong muốn tiếp tục hành trình tìm hiểu cách phát triển tiện ích của mình. Bạn nên sử dụng các 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.