Các tiện ích là phần bổ sung cho trình duyệt, được thiết kế nhằm cung cấp chức năng bổ sung và tuỳ chỉnh. Tiện ích làm chậm hoặc làm suy giảm trải nghiệm duyệt web sẽ gây vấn đề cho người dùng và bộ đếm với mục tiêu tiện ích của Chrome. Ngoài các thói quen lập trình tốt nói chung, nhà phát triển nên làm theo các phương pháp này để đảm bảo tiện ích của họ đang chạy với hiệu suất cao nhất.
Trì hoãn mọi việc có thể
Hạn chế tải tài nguyên cho đến khi cần thiết. Chỉ đưa vào những thứ cần thiết để mở một tiện ích trong hàm khởi động. Đừng tải những thứ chỉ cần thiết trong quá trình khởi động nếu người dùng nhấp vào một nút, hoặc các tính năng chỉ hoạt động khi người dùng đã đăng nhập trước khi họ có cơ hội làm như vậy.
Quản lý sự kiện quan trọng
Một tập lệnh nền hiệu quả chứa các sự kiện đã đăng ký quan trọng đối với tiện ích đó. Trình nghe không hoạt động cho đến khi trình nghe được kích hoạt, hành động phù hợp, sau đó quay lại trạng thái không hoạt động. Tiêu tốn tài nguyên hệ thống để giữ cho tập lệnh không cần thiết chạy.
Tập lệnh nền phải được đăng ký trong tệp kê khai và đặt thành false (sai) nếu có thể.
{
"name": "High Performance Extension",
"description" : "Sleepy Background Script",
"version": "1.0",
...
"background": {
"scripts": ["background.js"],
"persistent": false
},
...
}
Trường hợp duy nhất để tập lệnh nền tiếp tục hoạt động là khi tiện ích sử dụng API chrome.webRequest để chặn hoặc sửa đổi các yêu cầu mạng. WebRequest API không tương thích với các trang nền không tồn tại lâu dài.
{
"name": "High Performance Extension",
"description" : "Persistent Background Script",
"version": "1.0",
...
"background": {
"scripts": ["background.js"],
"persistent": true
},
"permissions": [
"webRequest",
"webRequestBlocking",
"https://<distracting social media site>.com/*"
],
...
}
chrome.webRequest.onBeforeRequest.addListener(
function(details) {
return {redirectUrl: "/"};
},
{urls: ["https://social.media.distraction.com/*"]},
["blocking"]
);
Chứa tập lệnh nội dung
Tập lệnh nội dung sẽ hoạt động như tác nhân bí mật của tiện ích, tinh tế đọc hoặc sửa đổi trang web trong khi dựa vào lõi mở rộng để hoạt động logic nặng hơn. Chúng nên có mục tiêu rõ ràng để tránh hoạt động xâm phạm trên các trang không liên quan. Lý tưởng nhất là không nên chú ý đến tập lệnh nội dung trong trải nghiệm duyệt web, trừ hành vi có mục đích.
Khai báo mục tiêu
Việc tiện ích chạy tập lệnh nội dung ở những vị trí không cần thiết hoặc vào thời điểm không phù hợp có thể khiến trình duyệt chạy chậm và có khả năng gây ra lỗi chức năng. Để tránh tình trạng này, hãy cung cấp mẫu phù hợp trong tệp kê khai và chạy tập lệnh tại document_idle thay vì document_start.
{
"name": "High Performance Extension",
"description" : "Superfly Superlight Content Scripts",
"version": "1.0",
...
"content_scripts": [
{
"js": ["content_script.js"],
"matches": ["/*"],
"run_at": "document_idle"
}
]
...
}
Nếu một tiện ích chỉ cần truy cập vào một trang web bằng thao tác của người dùng, hãy chèn tiện ích đó theo phương thức lập trình. Thao tác chèn có lập trình sẽ chỉ chạy khi người dùng gọi nó.
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript({
code: 'document.body.style.fontSize="100px"'
});
});
Chỉ sử dụng tập lệnh nội dung khi cần
Nhiều tiện ích có thể hoàn toàn không cần tập lệnh nội dung để thực hiện chức năng mong muốn. Việc sử dụng API declarativeContent sẽ đặt các quy tắc để tiện ích nhận ra khi các điều kiện liên quan được đáp ứng. Cách này hiệu quả hơn tập lệnh nội dung và sử dụng ít mã hơn!
Nếu cần hiển thị một thao tác trên trang cho người dùng khi họ truy cập vào một trang web có phần tử HTML5 <video>, thì tiện ích đó có thể chỉ định một quy tắc khai báo.
chrome.runtime.onInstalled.addListener(function() {
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([
{
conditions: [
new chrome.declarativeContent.PageStateMatcher({
css: ["video"],
})
],
actions: [ new chrome.declarativeContent.ShowPageAction() ]
}
]);
});
});
Đánh giá hiệu quả của mã
Bạn có thể áp dụng các phương pháp chung tương tự về hiệu suất trang web cho các tiện ích, chẳng hạn như triển khai kỹ thuật lập trình không đồng bộ và giữ cho mã ở mức tối thiểu và nhỏ gọn.
Hãy sử dụng các công cụ, chẳng hạn như Lighthouse, để đánh giá hiệu suất của tiện ích và nhắm đến những khu vực có thể cải thiện trên các trang tiện ích trực quan.