Расширения — это дополнения к браузеру, предназначенные для предоставления дополнительных и настраиваемых функций. Расширение, которое замедляет или ухудшает работу в Интернете, создает проблемы для пользователя и противоречит цели расширения 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 , чтобы оценить производительность расширений и определить целевые области, которые можно улучшить на страницах визуальных расширений.