Если вы являетесь пользователем Chrome, скорее всего, вы будете использовать одно или несколько расширений. Расширения добавляют много полезности браузеру, будь то блокировка рекламы или добавление функций. Так не было бы здорово, если бы вы могли создать собственное расширение Chrome? Это именно то, что я покажу вам здесь.
Также смотрите нашу статью Лучшие сенсорные Chromebook
Поскольку я поддерживаю сайты для клиентов, мне нравится знать, как работает каждый сайт в отношении загрузки страниц. Поскольку Google теперь использует время загрузки в своих SEO-расчетах, знание того, насколько быстро или медленно загружается страница, является важным показателем при оптимизации сайта. Это еще более верно при оптимизации веб-сайта для мобильных устройств. Он должен быть легким, быстрым и загружаться без каких-либо ошибок, чтобы получить высокие оценки в Google.
Добавьте к этому, тот факт, что предприимчивый человек в SitePoint также использует тот же веб-сайт, который я использую для проверки скорости страниц, - GTmetrix и разработал расширение для Chrome, чтобы проверить его, я подумал, что сделаю то же самое и проведу вас через него.
Расширения Chrome
Расширения Chrome - это мини-программы, которые добавляют функции в основной браузер. Они могут быть такими же простыми, как тот, который мы собираемся создать, или такими же сложными, как безопасные менеджеры паролей или эмуляторы скриптов. Написанные на совместимых языках, таких как HTML, CSS и JavaScript, они представляют собой автономные файлы, расположенные рядом с браузером.
По необходимости, большинство расширений представляют собой простые щелчки по значкам, которые выполняют данное действие. Этим действием может быть буквально все, что вы хотите от Chrome.
Создайте свое собственное расширение Chrome
После небольшого исследования вы можете настроить свое расширение так, чтобы оно делало все, что вам нравится, но мне нравится идея проверки скорости одной кнопкой, поэтому я продолжу.
Обычно, когда вы проверяете скорость сайта, вы вставляете URL-адрес страницы, на которой вы находитесь, в GTmetrix, Pingdom или куда угодно и нажимаете Analyze. Это займет всего несколько секунд, но разве не было бы неплохо, если бы вы просто выбрали значок в своем браузере и сделали это за вас? После прохождения этого урока вы сможете сделать именно это.
Вам нужно будет создать папку на вашем компьютере, чтобы хранить все внутри. Создайте три пустых файла, manifest.json, popup.html и popup.js. Щелкните правой кнопкой мыши внутри вашей новой папки и выберите Новый и текстовый файл. Откройте каждый из трех ваших файлов в любом текстовом редакторе. Убедитесь, что popup.html сохранен в виде файла HTML, а popup.js - в виде файла JavaScript. Загрузите этот образец значка с Google тоже только для целей этого урока.
Выберите manifest.json и вставьте в него следующее:
{"manifest_version": 2, "name": "GTmetrix Page Speed Analyzer", "description": "Использовать GTmetrix для анализа скорости загрузки страницы сайта", "version": "1.0", "browser_action": {"default_icon" : "icon.png", "default_popup": "popup.html"}, "permissions":}
Как видите, мы дали ему название и основное описание. Мы также назвали действие браузера, которое включает в себя иконку, которую мы скачали с Google, которая появится на панели браузера и в popup.html. Popup.html - это то, что вызывается при выборе значка расширения в браузере.
Откройте popup.html и вставьте в него следующее.
Анализатор скорости страниц с использованием GTMetrix
Popup.html - это то, что вызывается при выборе значка расширения в браузере. Мы дали ему имя, пометили всплывающее окно и добавили кнопку. Выбор кнопки вызовет popup.js, который будет файлом, который мы завершим следующим.
Откройте popup.js и вставьте в него следующее:
document.addEventListener ('DOMContentLoaded', function () {var checkPageButton = document.getElementById ('checkPage'); checkPageButton.addEventListener ('click', function () {chrome.tabs.getSelected (null, function (tab) {d = документ; var f = d.createElement ('form'); f.action = 'http://gtmetrix.com/analyze.html?bm'; f.method = 'post'; var i = d.createElement ( 'input'); i.type = 'hidden'; i.name = 'url'; i.value = tab.url; f.appendChild (i); d.body.appendChild (f); f.submit () ;});}, false);}, false);
Я не буду притворяться, что знаю JavaScript, поэтому было удобно, что у SitePoint уже был файл на месте. Все, что я знаю, это то, что он говорит GTmetrix проанализировать страницу в текущей вкладке Chrome. Там, где написано «chrome.tabs.getSelected», расширение берет URL с активной вкладки и вводит его в веб-форму. Это так далеко, как я могу пойти.
Тестирование вашего расширения Chrome
Теперь у нас есть базовая структура, нам нужно проверить, как она работает.
- Откройте Chrome, выберите «Дополнительные инструменты и расширения».
- Установите флажок рядом с режимом разработчика, чтобы включить его.
- Выберите Загрузить распакованное расширение и перейдите к файлу, который вы создали для этого расширения.
- Нажмите OK, чтобы загрузить расширение, и оно должно появиться в списке расширений.
- Установите флажок «Включено» в списке, и значок должен появиться в вашем браузере.
- Выберите значок в браузере, чтобы появилось всплывающее окно.
- Выберите кнопку, проверьте эту страницу сейчас!
Вы должны увидеть проверяемую страницу и отчет о производительности от GTmetrix. Как вы можете видеть из моего собственного сайта в основном изображении, у меня есть небольшая работа, чтобы ускорить мой новый дизайн!
Расширение вперед
Создание собственного расширения Chrome не так сложно, как может показаться. Хотя это, безусловно, помогло получить преимущество, зная небольшой код, в Интернете есть сотни ресурсов, которые покажут вам это. Кроме того, у Google есть огромное хранилище информации, учебные пособия и пошаговые руководства, которые помогут. Я использовал эту страницу с сайта Google Developer, чтобы помочь мне с этим расширением. Страница проведет вас через каждую часть создания расширения и предоставит значок, который мы использовали ранее.
Достаточно исследований, вы можете создавать расширения, которые делают практически все, что способен браузер. Некоторые из лучших расширений в магазине Chrome принадлежат частным лицам, а не компаниям, доказывая, что вы действительно можете создавать свои собственные.
Все благодарности Джону Сонмезу в SitePoint за оригинальное руководство. Он сделал тяжелую работу, я просто немного реорганизовал и немного обновил.
Вы создали свое собственное расширение Chrome? Хотите продвинуть или поделиться? Дайте нам знать ниже, если вы делаете!
