Ако сте потребител на 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 Анализатор на скоростта на страницата", "description": "Използвайте GTmetrix, за да анализирате скоростта на зареждане на страницата на уебсайта", "версия": "1.0", "браузър управление": {"default_icon" : "icon.png", "default_popup": "popup.html"}, "разрешения":}
Както можете да видите, ние сме му дали заглавие и основно описание. Нарекохме също действие на браузър, което включва иконата, която изтеглихме от Google, която ще се появи в лентата на браузъра ви и в popup.html. Popup.html е това, което се нарича, когато изберете иконата за разширение в браузъра.
Отворете popup.html и поставете следното в него.
Pagespeed Analyzer, използвайки GTMetrix
Popup.html е това, което се нарича, когато изберете иконата за разширение в браузъра. Дадохме му име, надписахме изскачащото меню и добавихме бутон. Избирането на бутона ще извика popup.js, който е файлът, който ще завършим следващото.
Отворете popup.js и поставете следното в него:
document.addEventListener ('DOMContentLoaded', функция () {var checkPageButton = document.getElementById ('checkPage'); checkPageButton.addEventListener ('щракнете', функция () {chrome.tabs.getSelected (null, function (tab) {dll = документ; var f = d.createElement ('форма'); f.action = 'http://gtmetrix.com/analyze.html?bm'; f.method = 'пост'; var i = d.createElement ( 'input'); 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, изберете Още инструменти и разширения.
- Поставете отметка в квадратчето до режим на програмист, за да го активирате.
- Изберете Load unpacked extension и отворете файла, който сте създали за това разширение.
- Изберете OK, за да заредите разширението и то трябва да се появи в списъка ви с разширения.
- Поставете отметка в квадратчето до Активирано в списъка и иконата трябва да се появи в браузъра ви.
- Изберете иконата в браузъра, така че да се появи изскачащото меню.
- Изберете бутона, Проверете тази страница сега!
Трябва да видите страницата, която се проверява, и доклад за резултатите от GTmetrix. Както можете да видите от моя собствен сайт в основното изображение, имам малко работа, за да ускоря новия си дизайн!
Придвижване на разширения напред
Създаването на собствено разширение за Chrome не е толкова трудно, колкото изглежда. Макар че със сигурност е помогнало да имате начален старт, като знаете малко код, в интернет има стотици ресурси, които ще ви покажат това. Плюс това, Google има огромно хранилище с информация, уроци и инструкции, които ще помогнат. Използвах тази страница от сайта за програмисти на Google, за да ми помогне с това разширение. Страницата ви превежда през всяка част от създаването на разширението и предоставя тази икона, която сме използвали по-рано.
С достатъчно изследвания можете да създадете разширения, които правят почти всичко, на което браузърът е способен. Някои от най-добрите разширения в магазина на Chrome са от хора, а не от компании, което доказва, че наистина можете да създадете свои собствени.
Цялата заслуга за Джон Сонез в SitePoint за оригиналното ръководство. Той свърши тежката работа, просто го реорганизирах малко и го актуализирах леко.
Създали ли сте собствено разширение за Chrome? Искате ли да го популяризирате или споделите? Кажете ни по-долу, ако го направите!
