Jak zrobić rozszerzenie Chrome

Opublikowany: 2017-11-22
Jak zrobić rozszerzenie Chrome

Jeśli jesteś użytkownikiem przeglądarki Chrome, prawdopodobnie będziesz używać co najmniej jednego rozszerzenia. Niezależnie od tego, czy chodzi o blokowanie reklam, czy dodawanie funkcji, rozszerzenia dodają wiele użyteczności do przeglądarki. Czy nie byłoby więc fajnie, gdybyś mógł zbudować własne rozszerzenie do Chrome? Dokładnie to pokażę ci tutaj.

Ponieważ prowadzę strony internetowe dla klientów, lubię wiedzieć, jak każda strona radzi sobie z ładowaniem strony. Ponieważ Google wykorzystuje teraz czasy ładowania w swoich obliczeniach SEO, wiedza o tym, jak szybko lub wolno ładuje się strona, jest ważnym wskaźnikiem podczas optymalizacji witryny. Jest to jeszcze bardziej prawdziwe przy optymalizacji strony internetowej pod kątem urządzeń mobilnych. Aby uzyskać wysoką ocenę w Google, musi być lekki, szybki i ładowany bez żadnych błędów.

Dodaj do tego fakt, że przedsiębiorcza osoba w SitePoint korzysta również z tej samej strony internetowej, co ja, aby sprawdzić szybkość strony, GTmetrix i opracowała rozszerzenie Chrome, aby to sprawdzić, pomyślałem, że zrobię to samo i poprowadzę cię przez to.

Rozszerzenia Chrome

Rozszerzenia Chrome to miniprogramy, 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 wywołania kliknięcia ikony, które wykonują daną akcję. Ta akcja może być dosłownie wszystkim, co chcesz zrobić w Chrome.

Zbuduj własne rozszerzenie do Chrome

Przy odrobinie badań możesz dostosować swoje rozszerzenie, aby robić, co chcesz, ale podoba mi się pomysł sprawdzenia szybkości jednym przyciskiem, więc idę z tym.

Zwykle, gdy sprawdzasz szybkość witryny, wklejasz adres URL strony, na której się znajdujesz, do GTmetrix, Pingdom lub gdziekolwiek i klikasz Analizuj. Zajmuje to 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 przepracowaniu tego samouczka będziesz w stanie to zrobić.

Będziesz musiał utworzyć folder na swoim komputerze, aby wszystko było w nim. Utwórz trzy puste pliki, manifest.json, popup.html i popup.js. Kliknij prawym przyciskiem myszy w nowym folderze i wybierz Nowy i plik tekstowy. Otwórz każdy z trzech plików w wybranym edytorze tekstu. 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 tylko na potrzeby tego samouczka.

Wybierz manifest.json i wklej do niego:

 {

"wersja_manifestu": 2,

"name": "GTmetrix Page Speed ​​Analyzer",

"description": "Użyj GTmetrix do analizy szybkości ładowania strony internetowej",

"wersja": "1.0",

"działanie_przeglądarki": {

"default_icon": "icon.png",

"default_popup": "popup.html"

},

"uprawnienia": [

"aktywna karta"

]

}

Jak widać, nadaliśmy mu tytuł i podstawowy opis. Nazwaliśmy również działanie przeglądarki, które 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.

 <!doctype html>

<html>

<głowa>

<title>Pagespeed Analyzer przy użyciu GTMetrix</title>

http://popup.js

</head>

<ciało>

<h1>Pagespeed Analyzer przy użyciu GTMetrix</h1>

<button>Sprawdź szybkość strony!</button>

</body>

</html>

Popup.html jest nazywany po wybraniu ikony rozszerzenia w przeglądarce. Nadaliśmy mu nazwę, oznaczyliśmy wyskakujące okienko i dodaliśmy przycisk. Wybranie przycisku wywoła popup.js, czyli plik, który uzupełnimy w następnej kolejności.

Otwórz popup.js i wklej do niego:

 document.addEventListener('DOMContentLoaded', function() {

var checkPageButton = document.getElementById('checkPage');

checkPageButton.addEventListener('klik', 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('wejście');

i.type = 'ukryty';

i.nazwa = 'adres URL';

i.wartość = tab.url;

f.dołącz Dziecko(i);

d.ciało.dołącz Dziecko(f);

f.prześlij();

});

}, fałszywy);

}, fałszywy);

Nie będę udawał, że znam JavaScript, dlatego przydatne było, że SitePoint już miał plik na swoim miejscu. Wiem tylko, że mówi GTmetrixowi, aby przeanalizował stronę w 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 mogę się posunąć.

Testowanie rozszerzenia do Chrome

Teraz mamy już podstawową strukturę, musimy przetestować, aby zobaczyć, jak to działa.

  1. Otwórz Chrome, wybierz Więcej narzędzi i rozszerzeń.
  2. Zaznacz pole obok Tryb programisty, aby go włączyć.
  3. Wybierz Załaduj rozpakowane rozszerzenie i przejdź do pliku utworzonego dla tego rozszerzenia.
  4. Wybierz OK, aby załadować rozszerzenie i powinno pojawić się na liście rozszerzeń.
  5. Zaznacz pole obok Włączone na liście, a ikona powinna pojawić się w przeglądarce.
  6. Wybierz ikonę w przeglądarce, aby pojawiło się wyskakujące okienko.
  7. Wybierz przycisk, Sprawdź teraz tę stronę!

Powinieneś zobaczyć sprawdzaną stronę i raport wydajności z GTmetrix. Jak widać na mojej stronie na głównym obrazie, muszę jeszcze trochę popracować, aby przyspieszyć mój nowy projekt!

Rozwijanie rozszerzeń

Tworzenie własnego rozszerzenia do Chrome nie jest tak trudne, jak mogłoby się wydawać. Chociaż znajomość kodu z pewnością pomogła w uzyskaniu przewagi, istnieją setki zasobów online, które to pokażą. Ponadto Google ma ogromne repozytorium informacji, samouczków i przewodników, które pomogą. Użyłem tej strony z witryny Google Developer, aby pomóc mi z tym rozszerzeniem. Strona prowadzi Cię przez wszystkie etapy tworzenia rozszerzenia i zawiera ikonę, której używaliśmy wcześniej.

Dzięki wystarczającym badaniom możesz tworzyć rozszerzenia, które robią prawie wszystko, do czego zdolna jest przeglądarka. Niektóre z najlepszych rozszerzeń w sklepie Chrome pochodzą od osób fizycznych, a nie od firm, co udowadnia, że ​​naprawdę możesz tworzyć własne.

Cała zasługa Johna Sonmeza z SitePoint za oryginalny przewodnik. On wykonał ciężką pracę, po prostu trochę to przeorganizowałem i trochę zaktualizowałem.

Czy stworzyłeś własne rozszerzenie do Chrome? Chcesz go promować lub udostępniać? Daj nam znać poniżej, jeśli tak!