Расширения — это дополнения к браузеру, предназначенные для предоставления дополнительной и настраиваемой функциональности. Расширение, замедляющее или ухудшающее работу браузера, создает проблемы для пользователя и противоречит цели расширений Chrome. Помимо общих принципов хорошего программирования, разработчикам следует придерживаться следующих рекомендаций, чтобы обеспечить максимальную производительность своих расширений.
Откладывайте все, что возможно.
Воздержитесь от загрузки ресурсов до тех пор, пока они не понадобятся. Включайте в функцию запуска расширения только то, что необходимо для его открытия. Не загружайте при запуске то, что требуется только при нажатии пользователем кнопки, или функции, которые работают только после авторизации пользователя, прежде чем у него появится такая возможность.
Управление важными событиями
Эффективный фоновый скрипт содержит зарегистрированные события, важные для его расширения. Они находятся в спящем режиме до тех пор, пока не сработает обработчик событий, затем реагируют соответствующим образом и возвращаются в спящее состояние. Поддержание работы ненужного скрипта истощает системные ресурсы.
Фоновые скрипты следует регистрировать в манифесте, по возможности устанавливая для них параметр сохранения состояния в значение false.
{
"name": "High Performance Extension",
"description" : "Sleepy Background Script",
"version": "1.0",
...
"background": {
"scripts": ["background.js"],
"persistent": false
},
...
}
Фоновый скрипт может оставаться постоянно активным только в том случае, если расширение использует API chrome.webRequest для блокировки или изменения сетевых запросов. API webRequest несовместим с непостоянными фоновыми страницами.
{
"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"]
);
Содержит скрипты контента
Скрипты контента должны работать как скрытые агенты расширения, незаметно считывая данные с веб-страницы или изменяя их, в то время как более сложные логические операции выполняются ядром расширения. У них должны быть четкие цели, чтобы избежать навязчивой активности на нерелевантных страницах. В идеале скрипты контента должны оставаться незаметными в процессе просмотра веб-страниц, за исключением целенаправленного поведения.
Объявить цели
Расширение, запускающее скрипты контента в ненужных местах или в неподходящее время, может привести к замедлению работы браузера и потенциально вызвать ошибки в его работе. Избегайте этого, указывая шаблоны соответствия в манифесте и запуская скрипт в document_idle вместо 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"
}
]
...
}
Если расширению потребуется доступ к веб-странице только в случае выполнения пользователем определённого действия, его следует внедрять программно . Программное внедрение будет выполняться только тогда, когда его инициирует пользователь.
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript({
code: 'document.body.style.fontSize="100px"'
});
});
Используйте скрипты контента только при необходимости.
Многим расширениям для реализации желаемой функциональности может вообще не потребоваться скрипт содержимого. Использование API declarativeContent позволит установить правила, по которым расширение будет распознавать выполнение соответствующих условий. Это эффективнее, чем скрипт содержимого, и требует меньше кода!
Если расширению необходимо отображать пользователю действие на странице при посещении сайта с элементом HTML5 <video> , оно может указать декларативное правило.
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() ]
}
]);
});
});
Оцените эффективность кода.
Те же общие принципы повышения производительности веб-сайтов можно применять и к расширениям, например, внедрять методы асинхронного программирования и поддерживать код в минимальном и компактном виде.
Используйте такие инструменты, как Lighthouse , для оценки производительности расширения и выявления областей, которые можно улучшить в визуальном оформлении страниц расширения.