Đơ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 sẽ tạo một tiện ích giúp đơn giản hoá cách tạo kiểu cho tiện ích Chrome và các trang tài liệu trên 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 worker dịch vụ tiện ích làm trình điều phối 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ụ tiện ích.
- Chèn và xoá một trang kiểu bằng API Scripting (Tập lệnh).
- 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 Xin chào thế giới để tìm hiể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 focus-mode để 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 đầy đủ 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à thêm 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ẻ". Hướng dẫn này giải thích chi tiết hơn về metadata và biểu tượng của tiện ích.
Tạo thư mục images rồi tải 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. Worker 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 và thêm mã sau:
chrome.runtime.onInstalled.addListener(() => {
chrome.action.setBadgeText({
text: "OFF",
});
});
Sự kiện đầu tiên mà worker dịch vụ của chúng ta 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 thành một số tác vụ khi cài đặt. Các tiện ích có thể sử dụng API Bộ nhớ và IndexedDB để lưu trữ trạng thái ứng dụng. Tuy nhiên, trong trường hợp này, vì 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 thao tác để theo dõi xem tiện ích đang ở trạng thái "BẬT" hay "TẮT".
Bước 3: Bật thao tác mở rộng
Thao tác mở rộng 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, tiện ích đó 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 mở rộng 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 tạm thời để thực thi mã trên thẻ đang hoạt động. Quyền này cũng cho phép truy cập vào các thuộc tính nhạy cảm của thẻ hiện tại.
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 của tiện ích.
💡 Những hoạt động tương tác nào khác của người dùng sẽ bật quyền activeTab trong tiện ích của tôi?
- Nhấn 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 một đề xuất từ hộp tìm kiếm đa năng.
- Mở cửa sổ bật lên của tiện ích.
Quyền "activeTab" cho phép người dùng có chủ đích chọn chạy tiện ích trên thẻ được lấy tiêu điểm; nhờ đó, tiện ích này sẽ bảo vệ quyền riêng tư của người dùng. Một lợi ích khác là phương thức này không kích hoạt cảnh báo về quyền.
Để sử dụng quyền "activeTab", hãy thêm quyền này 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, trình nghe 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á trang kiểu
Bây giờ, đã đến lúc thay đổi bố cục của trang. Tạo một tệp có tên là focus-mode.css và thêm mã sau:
* {
display: none !important;
}
html,
body,
*:has(article),
article,
article * {
display: revert !important;
}
[role='navigation'] {
display: none !important;
}
article {
margin: auto;
max-width: 700px;
}
Chèn hoặc xoá trang kiểu bằng API Scripting (Tập lệnh). 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ể sử dụng API tập lệnh để chèn mã thay vì một trang tính kiểu không?
Có. Bạn có thể sử dụng scripting.executeScript() để chèn JavaScript.
Không bắt buộc: Chỉ định phím tắt
Để vui, hãy thêm một lối tắt để dễ dàng bật hoặc tắt chế độ tập trung. 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 cùng mã với 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 trên máy
Để tải một tiện ích chưa giải nén ở chế độ nhà phát triển, hãy làm theo các bước trong phần Hello World.
Kiểm thử tiện ích trên trang tài liệu
Trước tiên, hãy mở một trong các trang sau:
- Chào mừng bạn đến với tài liệu về Tiện ích Chrome
- Xuất bản trên Cửa hàng Chrome trực tuyến
- API tập lệnh
Sau đó, hãy nhấp vào hành động của tiện ích. Nếu thiết lập phím tắt, bạn có thể kiểm thử bằng cách nhấn phím Ctrl + B hoặc Cmd + B.
Bạn sẽ thấy như sau:
Thành:
🎯 Các điểm cải tiến tiềm năng
Dựa trên những gì bạn đã học được hôm nay, hãy cố gắng hoàn thành một trong những việc sau:
- Cải thiện trang đị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 mà bạn yêu thích.
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 của bạn bằng cách hoàn thành các hướng dẫn khác trong loạt bài 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ử trên một tập hợp trang cụ thể. |
| Trình quản lý thẻ | Để 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 đã có trải nghiệm thú vị khi xây dựng tiện ích Chrome này và rất mong được tiếp tục hành trình tìm hiểu về việc phát triển tiện ích. Bạn nên tham khảo các lộ trình học tập sau:
- 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.
- Tiện ích có quyền truy cập vào các API mạnh mẽ ngoài những API có trên web mở. Tài liệu về API Chrome trình bày từng API.