- Вопрос или проблема
- Ответ или решение
- 1. Использование существующих расширений
- 2. Создание собственного расширения Chrome
- Шаг 1: Структура проекта
- Шаг 2: Заполнение manifest.json
- Шаг 3: Реализация background.js
- Шаг 4: Реализация content.js
- Шаг 5: Создание popup.html (опционально)
- 3. Установка и тестирование
- Заключение
Вопрос или проблема
Я хотел бы узнать, каков размер «средних» веб-страниц, но не хочу копаться в информации.
Обязательно:
- Работать на последней версии Chrome (64-бит) на OS X 10.10
- Сообщать мне при загрузке страницы, сколько данных было загружено для рендеринга страницы
- Быть легко доступным, т.е. не нужно открывать инструменты разработчика для доступа к этому.
- Отображать размеры в удобочитаемом формате –
980 кБ, а не980709 байт
Рекомендуется:
- Включать данные, загруженные после загрузки страницы, но я не так обеспокоен этим.
- Идеально, чтобы находиться в строке заголовка, справа от адресной строки.
Близкие совпадения (найденные в Chrome Web Store):
-
Это быстрое и простое расширение, которое просто сообщит вам размер страницы и состояние просмотра. Состояние просмотра действительно только для aspx страниц, но размер страницы работает везде.
-
Сообщает (в КБ) размер HTML страницы.
Обратите внимание, что он НЕ включает ресурсы страницы (например, js/css/изображения)
По неизвестным причинам, Size Grabber не работает у меня.
Page Size отображает размер в байтах, но в остальном выполняет все другие требования.
Ответ или решение
Для решения вашей задачи по созданию расширения Chrome, которое будет отображать размер веб-страницы в заголовке браузера, предлагаю рассмотреть следующие шаги.
1. Использование существующих расширений
Вы уже нашли несколько подходящих вариантов, таких как Page Size и Size Grabber. Однако, судя по вашему описанию, ни одно из них не полностью удовлетворяет вашим требованиям. Тем не менее, вы можете попробовать следующие рекомендации:
- Page Size работает, но выводит размер в байтах. Возможно, вы сможете связаться с автором расширения через раздел отзывов или напрямую предложить ему обновление для отображения размера в более удобном формате.
- Size Grabber не работает на вашем устройстве. Может быть полезно проверить, нет ли конфликтов с другими расширениями или включить его в режиме инкогнито, если это позволяет его конфигурация.
Если ни одно из существующих расширений не подходит, я предлагаю создать своё собственное расширение.
2. Создание собственного расширения Chrome
Вот пошаговая инструкция по созданию простого расширения, которое будет показывать размер страницы в заголовке.
Шаг 1: Структура проекта
Создайте папку для вашего расширения и создайте в ней следующие файлы:
manifest.jsonbackground.jscontent.jspopup.html
Шаг 2: Заполнение manifest.json
{
"manifest_version": 3,
"name": "Page Size Display",
"version": "1.0",
"description": "Displays the size of the page in the title bar.",
"permissions": ["webRequest", "webRequestBlocking", "storage", "activeTab"],
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
]
}Шаг 3: Реализация background.js
chrome.webRequest.onCompleted.addListener(
function(details) {
const sizeInBytes = details.responseHeaders.reduce((total, header) => {
if (header.name.toLowerCase() === 'content-length') {
return parseInt(header.value, 10);
}
return total;
}, 0);
const sizeInKB = (sizeInBytes / 1024).toFixed(2) + ' kB';
chrome.action.setBadgeText({ text: sizeInKB });
},
{ urls: ["<all_urls>"] },
["responseHeaders"]
);Шаг 4: Реализация content.js
document.addEventListener('DOMContentLoaded', function() {
document.title = document.title + ' - ' + sizeInKBResult; // Переменная может быть передана через сообщение
});Шаг 5: Создание popup.html (опционально)
<!DOCTYPE html>
<html>
<head>
<title>Page Size</title>
</head>
<body>
<h1>Размер страницы</h1>
<p id="size"></p>
</body>
</html>3. Установка и тестирование
- Перейдите в Chrome на
chrome://extensions/. - Включите "Режим разработчика".
- Нажмите "Загрузить распакованное" и выберите папку с вашим расширением.
- Откройте любую веб-страницу, и вы увидите размер страницы в значке расширения.
Заключение
Создание собственного расширения — это отличный способ получить нужный функционал. Если будут возникать сложности, могу помочь с отделением кода или его доработкой. Надеюсь, это решение поможет вам лучше понять размеры веб-страниц.