Jeśli jesteś użytkownikiem Chrome, prawdopodobnie będziesz używać jednego lub więcej rozszerzeń. Niezależnie od tego, czy chodzi o blokowanie reklam, czy o dodawanie funkcji, rozszerzenia dodają wiele narzędzi do przeglądarki. Czy nie byłoby fajnie, gdybyś mógł zbudować własne rozszerzenie do Chrome? Właśnie to wam tu pokażę.
Zobacz także nasz artykuł Najlepsze Chromebooki z ekranem dotykowym
Prowadząc strony internetowe dla klientów, lubię wiedzieć, jak każda strona działa w zakresie ładowania strony. Ponieważ Google wykorzystuje teraz czasy ładowania do obliczeń SEO, wiedza o tym, jak szybko lub wolno ładuje się strona, jest ważnym miernikiem podczas optymalizacji witryny. Jest to tym bardziej prawdziwe, gdy optymalizujesz witrynę pod kątem urządzeń mobilnych. Musi być lekki, szybki i ładowany bez błędów, aby uzyskać wysoką ocenę w Google.
Dodajmy do tego fakt, że przedsiębiorcza osoba w SitePoint korzysta również z tej samej witryny, którą robię, aby sprawdzić szybkość stron, GTmetrix i opracowała rozszerzenie Chrome, aby to sprawdzić, myślałem, że zrobię to samo i przeprowadzę cię przez to.
Rozszerzenia Chrome
Rozszerzenia Chrome to mini programy, które dodają funkcje do podstawowej przeglądarki. Mogą być tak proste, jak ten, który zamierzamy stworzyć, lub tak skomplikowane, jak bezpieczne menedżery haseł lub emulatory skryptów. Napisane w kompatybilnych językach, takich jak HTML, CSS i JavaScript, są samodzielnymi plikami, które znajdują się obok przeglądarki.
Z konieczności większość rozszerzeń to proste wykonywanie kliknięć ikon, które wykonują dane działanie. To działanie może być dosłownie wszystkim, co chcesz zrobić w Chrome.
Zbuduj własne rozszerzenie Chrome
Przy odrobinie badań możesz ulepszyć swoje rozszerzenie, aby robić cokolwiek chcesz, ale podoba mi się pomysł sprawdzania prędkości jednym przyciskiem, więc idę z tym.
Zazwyczaj po sprawdzeniu szybkości witryny wklejasz adres URL strony, na której jesteś, do GTmetrix, Pingdom lub gdziekolwiek i naciskasz Analizuj. To zajmuje tylko kilka sekund, ale czy nie byłoby miło, gdybyś mógł po prostu wybrać ikonę w przeglądarce i zrobić to za Ciebie? Po przejściu tego samouczka będziesz w stanie to zrobić.
Będziesz musiał utworzyć folder na swoim komputerze, aby utrzymać wszystko w środku. Utwórz trzy puste pliki: manifest.json, popup.html i popup.js. Kliknij prawym przyciskiem myszy nowy folder i wybierz Nowy i plik tekstowy. Otwórz każdy z trzech plików w wybranym edytorze tekstów. Upewnij się, że popup.html jest zapisany jako plik HTML, a popup.js jest zapisany jako plik JavaScript. Pobierz tę przykładową ikonę z Google również tylko na potrzeby tego samouczka.
Wybierz manifest.json i wklej do niego następujące elementy:
{„manifest_version”: 2, „nazwa”: „GTmetrix Page Speed Analyzer”, „opis”: „Użyj GTmetrix do analizy szybkości wczytywania strony”, „wersja”: „1.0”, „aktywność przeglądarki”: {„default_icon” : „icon.png”, „default_popup”: „popup.html”}, „uprawnienia”:}
Jak widać, nadaliśmy mu tytuł i podstawowy opis. Nazwaliśmy również akcję przeglądarki, która zawiera ikonę pobraną z Google, która pojawi się na pasku przeglądarki i popup.html. Popup.html jest nazywany po wybraniu ikony rozszerzenia w przeglądarce.
Otwórz popup.html i wklej do niego następujące elementy.
Analizator prędkości strony za pomocą GTMetrix
Popup.html jest nazywany po wybraniu ikony rozszerzenia w przeglądarce. Nadaliśmy mu nazwę, oznacziliśmy wyskakujące okienko i dodaliśmy przycisk. Wybranie przycisku spowoduje wywołanie popup.js, który jest plikiem, który uzupełnimy następnie.
Otwórz popup.js i wklej do niego następujące elementy:
document.addEventListener ('DOMContentLoaded', function () {var checkPageButton = document.getElementById ('checkPage'); checkPageButton.addEventListener ('click', function () {chrome.tabs.getSelected (null, function (tab) {d = dokument; var f = d.createElement ('formularz'); 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);
Nie będę udawał, że znam JavaScript, dlatego przydało się, że SitePoint już miał plik na swoim miejscu. Wiem tylko, że informuje GTmetrix o analizie strony na bieżącej karcie Chrome. Tam, gdzie jest napisane „chrome.tabs.getSelected”, rozszerzenie pobiera adres URL z aktywnej karty i wprowadza go do formularza internetowego. To jest tak daleko, jak tylko mogę.
Testowanie rozszerzenia Chrome
Teraz mamy podstawową strukturę, musimy przetestować, aby zobaczyć, jak to działa.
- Otwórz Chrome, wybierz Więcej narzędzi i rozszerzeń.
- Zaznacz pole obok trybu programisty, aby go włączyć.
- Wybierz Załaduj rozpakowane rozszerzenie i przejdź do pliku utworzonego dla tego rozszerzenia.
- Wybierz OK, aby załadować rozszerzenie i powinno pojawić się na liście Rozszerzeń.
- Zaznacz pole wyboru Włączone na liście, a ikona powinna pojawić się w przeglądarce.
- Wybierz ikonę w przeglądarce, aby pojawiło się wyskakujące okienko.
- Wybierz przycisk, sprawdź teraz tę stronę!
Powinieneś zobaczyć stronę sprawdzaną i raport wydajności z GTmetrix. Jak widać z mojej strony na głównym obrazie, mam trochę pracy, aby przyspieszyć mój nowy projekt!
Kontynuacja rozszerzeń
Utworzenie własnego rozszerzenia Chrome nie jest tak trudne, jak mogłoby się wydawać. Chociaż na pewno pomógł Ci szybko zacząć od znajomości małego kodu, istnieją setki zasobów online, które to pokażą. Ponadto Google ma ogromne repozytorium informacji, samouczków i wskazówek, które pomogą. Użyłem tej strony z witryny Google Developer, aby pomóc mi z tym rozszerzeniem. Strona prowadzi użytkownika przez wszystkie etapy tworzenia rozszerzenia i zawiera ikonę, której używaliśmy wcześniej.
Przy wystarczającej liczbie badań możesz tworzyć rozszerzenia, które robią prawie wszystko, co potrafi przeglądarka. Niektóre z najlepszych rozszerzeń w sklepie Chrome pochodzą od osób prywatnych, a nie od firm, co dowodzi, że naprawdę możesz stworzyć własne.
Podziękowania dla Johna Sonmeza w SitePoint za oryginalny przewodnik. Wykonał ciężką pracę, po prostu trochę ją zreorganizowałem i lekko zaktualizowałem.
Czy masz własne rozszerzenie do Chrome? Chcesz je promować lub udostępniać? Daj nam znać, jeśli tak!
