Якщо ви користуєтеся 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", "description": "Використовуйте GTmetrix для аналізу швидкості завантаження сторінки веб-сайту", "версія": "1.0", "браузерна перевірка": {"default_icon" : "icon.png", "default_popup": "popup.html"}, "дозволи":}
Як бачите, ми дали йому назву та основний опис. Ми також назвали дію браузера, яка включає в себе піктограму, яку ми завантажили з Google, і яка з’явиться на панелі браузера та popup.html. Popup.html - це те, що викликається, коли ви вибираєте піктограму розширення у браузері.
Відкрийте popup.html та вставте у нього наступне.
Analyzer Pagespeed за допомогою 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) {dll = документ; var f = d.createElement ('форма'); f.action = 'http://gtmetrix.com/analyze.html?bm'; f.method = 'post'; var i = d.createElement ( 'введення'); i.type = 'приховано'; 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, виберіть Більше інструментів та розширень.
- Поставте прапорець біля режиму розробника, щоб увімкнути його.
- Виберіть Завантажити розпаковане розширення та перейдіть до файла, який ви створили для цього розширення.
- Виберіть ОК, щоб завантажити розширення, і воно повинно відображатися у вашому списку розширень.
- Поставте прапорець Увімкнено у списку, і піктограма повинна відображатися у вашому браузері.
- Виберіть піктограму в браузері, щоб з'явилося спливаюче вікно.
- Виберіть кнопку, Перевірте цю сторінку зараз!
Ви повинні побачити перевірену сторінку та звіт про ефективність від GTmetrix. Як ви бачите з мого власного сайту в основному зображенні, я маю ще трохи працювати над тим, щоб пришвидшити свій новий дизайн!
Проведення розширень вперед
Створити власне розширення для Chrome не так складно, як може здатися. Хоча це, безумовно, допомогло зробити початок, знаючи трохи коду, в мережі є сотні ресурсів, які покажуть вам це. Крім того, Google має величезний сховище інформації, навчальні посібники та посібники, які допоможуть. Я використовував цю сторінку з сайту розробників Google, щоб допомогти мені з цим розширенням. На цій сторінці ви знайдете кожну частину створення розширення та надаєте той значок, який ми використовували раніше.
З достатньою кількістю досліджень ви можете створити розширення, які роблять майже все, на що браузер здатний. Деякі з найкращих розширень у магазині Chrome - це приватні особи, а не компанії, які підтверджують, що ви справді можете створити своє власне.
Вся заслуга Джона Сонмеза в SitePoint за оригінальне керівництво. Він зробив важку роботу, я просто трохи її реорганізував і трохи оновив.
Ви створили власне розширення для Chrome? Хочете просувати або поділитися ним? Повідомте нас нижче, якщо ви це зробите!
