11 KiB

Raw Permalink Blame History

Projekt Rozszerzenia Przeglądarki, Część 1: Wszystko o Przeglądarkach

Sketchnote autorstwa Wassim Chegham

Quiz Przed Lekcją

Wprowadzenie

Rozszerzenia przeglądarki dodają dodatkowe funkcje do przeglądarki. Zanim jednak zaczniesz tworzyć własne, warto dowiedzieć się, jak działają przeglądarki.

O przeglądarkach

W tej serii lekcji nauczysz się, jak stworzyć rozszerzenie przeglądarki, które będzie działać w przeglądarkach Chrome, Firefox i Edge. W tej części dowiesz się, jak działają przeglądarki i jak zaprojektować elementy rozszerzenia przeglądarki.

Czym właściwie jest przeglądarka? To aplikacja, która pozwala użytkownikowi końcowemu uzyskać dostęp do treści z serwera i wyświetlić je na stronach internetowych.

✅ Trochę historii: pierwsza przeglądarka nazywała się „WorldWideWeb” i została stworzona przez Sir Timothy'ego Berners-Lee w 1990 roku.

Niektóre z pierwszych przeglądarek, via Karen McGrane

Kiedy użytkownik łączy się z internetem za pomocą adresu URL (Uniform Resource Locator), zazwyczaj korzystając z protokołu Hypertext Transfer Protocol przez adres http lub https, przeglądarka komunikuje się z serwerem internetowym i pobiera stronę internetową.

W tym momencie silnik renderujący przeglądarki wyświetla stronę na urządzeniu użytkownika, którym może być telefon komórkowy, komputer stacjonarny lub laptop.

Przeglądarki mają również możliwość buforowania treści, dzięki czemu nie muszą ich pobierać z serwera za każdym razem. Mogą zapisywać historię przeglądania użytkownika, przechowywać „ciasteczka”, czyli małe fragmenty danych zawierające informacje o aktywności użytkownika, i wiele więcej.

Ważne jest, aby pamiętać, że przeglądarki nie są takie same! Każda z nich ma swoje mocne i słabe strony, a profesjonalny twórca stron internetowych musi wiedzieć, jak sprawić, by strony działały dobrze w różnych przeglądarkach. Obejmuje to obsługę małych ekranów, takich jak telefony komórkowe, a także użytkowników, którzy są offline.

Bardzo przydatną stroną, którą warto dodać do zakładek w swojej ulubionej przeglądarce, jest caniuse.com. Podczas tworzenia stron internetowych warto korzystać z list obsługiwanych technologii na tej stronie, aby jak najlepiej wspierać swoich użytkowników.

✅ Jak sprawdzić, które przeglądarki są najpopularniejsze wśród użytkowników Twojej strony? Sprawdź swoje statystyki - możesz zainstalować różne pakiety analityczne w ramach procesu tworzenia stron internetowych, które pokażą Ci, z jakich przeglądarek korzystają użytkownicy.

Rozszerzenia przeglądarki

Dlaczego warto tworzyć rozszerzenia przeglądarki? To przydatne narzędzie, które można dodać do przeglądarki, aby szybko uzyskać dostęp do często powtarzanych zadań. Na przykład, jeśli często sprawdzasz kolory na różnych stronach internetowych, możesz zainstalować rozszerzenie przeglądarki do wybierania kolorów. Jeśli masz problem z zapamiętywaniem haseł, możesz użyć rozszerzenia do zarządzania hasłami.

Tworzenie rozszerzeń przeglądarki to także świetna zabawa. Zazwyczaj zarządzają one ograniczoną liczbą zadań, które wykonują bardzo dobrze.

✅ Jakie są Twoje ulubione rozszerzenia przeglądarki? Jakie zadania wykonują?

Instalowanie rozszerzeń

Zanim zaczniesz tworzyć, przyjrzyj się procesowi budowania i wdrażania rozszerzenia przeglądarki. Chociaż każda przeglądarka nieco różni się w sposobie zarządzania tym zadaniem, proces jest podobny w Chrome i Firefox do tego przykładu w Edge:

Uwaga: Upewnij się, że włączyłeś tryb deweloperski i zezwoliłeś na rozszerzenia z innych sklepów.

W zasadzie proces wygląda następująco:

zbuduj swoje rozszerzenie za pomocą npm run build
przejdź w przeglądarce do panelu rozszerzeń, korzystając z przycisku „Ustawienia i więcej” (ikona ...) w prawym górnym rogu
jeśli to nowa instalacja, wybierz load unpacked, aby załadować nowe rozszerzenie z folderu build (w naszym przypadku to /dist)
lub kliknij reload, jeśli przeładowujesz już zainstalowane rozszerzenie

✅ Te instrukcje dotyczą rozszerzeń, które tworzysz samodzielnie; aby zainstalować rozszerzenia dostępne w sklepie rozszerzeń przeglądarki, przejdź do tych sklepów i zainstaluj wybrane rozszerzenie.

Rozpocznij

Stworzysz rozszerzenie przeglądarki, które wyświetla ślad węglowy Twojego regionu, pokazując zużycie energii i źródło tej energii. Rozszerzenie będzie zawierało formularz, który zbiera klucz API, aby uzyskać dostęp do API CO2 Signal.

Potrzebujesz:

klucz API; wpisz swój adres e-mail w polu na tej stronie, a klucz zostanie wysłany do Ciebie
kod dla Twojego regionu odpowiadający Electricity Map (na przykład w Bostonie używam 'US-NEISO').
kod startowy. Pobierz folder start; będziesz uzupełniać kod w tym folderze.
NPM - NPM to narzędzie do zarządzania pakietami; zainstaluj je lokalnie, a pakiety wymienione w pliku package.json zostaną zainstalowane do użycia w Twoim projekcie

✅ Dowiedz się więcej o zarządzaniu pakietami w tym świetnym module na Learn

Poświęć chwilę, aby przejrzeć bazę kodu:

✅ Gdy masz już klucz API i kod regionu, zapisz je gdzieś w notatce do późniejszego wykorzystania.

Tworzenie HTML dla rozszerzenia

To rozszerzenie ma dwa widoki. Jeden do zbierania klucza API i kodu regionu:

I drugi do wyświetlania zużycia węgla w regionie:

Zacznijmy od stworzenia HTML dla formularza i stylizowania go za pomocą CSS.

W folderze /dist stworzysz formularz i obszar wyników. W pliku index.html wypełnij wyznaczony obszar formularza:

<form class="form-data" autocomplete="on">
	<div>
		<h2>New? Add your Information</h2>
	</div>
	<div>
		<label for="region">Region Name</label>
		<input type="text" id="region" required class="region-name" />
	</div>
	<div>
		<label for="api">Your API Key from tmrow</label>
		<input type="text" id="api" required class="api-key" />
	</div>
	<button class="search-btn">Submit</button>
</form>

To jest formularz, w którym zapisane informacje będą wprowadzane i przechowywane w pamięci lokalnej.

Następnie utwórz obszar wyników; pod ostatnim tagiem formularza dodaj kilka divów:

<div class="result">
	<div class="loading">loading...</div>
	<div class="errors"></div>
	<div class="data"></div>
	<div class="result-container">
		<p><strong>Region: </strong><span class="my-region"></span></p>
		<p><strong>Carbon Usage: </strong><span class="carbon-usage"></span></p>
		<p><strong>Fossil Fuel Percentage: </strong><span class="fossil-fuel"></span></p>
	</div>
	<button class="clear-btn">Change region</button>
</div>

Na tym etapie możesz spróbować zbudować projekt. Upewnij się, że zainstalowałeś zależności pakietów tego rozszerzenia:

npm install

To polecenie użyje npm, Menedżera Pakietów Node, do zainstalowania webpacka dla procesu budowania Twojego rozszerzenia. Webpack to narzędzie do bundlowania, które obsługuje kompilację kodu. Wynik tego procesu możesz zobaczyć w /dist/main.js - zobaczysz, że kod został zbundlowany.

Na razie rozszerzenie powinno się zbudować i, jeśli wdrożysz je w Edge jako rozszerzenie, zobaczysz ładnie wyświetlony formularz.

Gratulacje, zrobiłeś pierwsze kroki w kierunku stworzenia rozszerzenia przeglądarki. W kolejnych lekcjach uczynisz je bardziej funkcjonalnym i użytecznym.

🚀 Wyzwanie

Przejrzyj sklep z rozszerzeniami przeglądarki i zainstaluj jedno z nich. Możesz zbadać jego pliki w interesujący sposób. Co odkrywasz?

Quiz Po Lekcji

Quiz po lekcji

Przegląd i Samodzielna Nauka

W tej lekcji dowiedziałeś się trochę o historii przeglądarek internetowych; wykorzystaj tę okazję, aby dowiedzieć się więcej o tym, jak wynalazcy World Wide Web wyobrażali sobie jego użycie, czytając więcej o jego historii. Przydatne strony to:

Historia przeglądarek internetowych

Historia internetu

Wywiad z Timem Berners-Lee

Zadanie

Zmień styl swojego rozszerzenia

Zastrzeżenie:
Ten dokument został przetłumaczony za pomocą usługi tłumaczenia AI Co-op Translator. Chociaż dokładamy wszelkich starań, aby zapewnić poprawność tłumaczenia, prosimy pamiętać, że automatyczne tłumaczenia mogą zawierać błędy lub nieścisłości. Oryginalny dokument w jego rodzimym języku powinien być uznawany za wiarygodne źródło. W przypadku informacji o kluczowym znaczeniu zaleca się skorzystanie z profesjonalnego tłumaczenia przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z użycia tego tłumaczenia.

11 KiB Raw Permalink Blame History