17 KiB

Raw Permalink Blame History Unescape Escape

Проект за разширение на браузър Част 1: Всичко за браузърите

Скица от Wassim Chegham

Тест преди лекцията

Въведение

Разширенията за браузъри добавят допълнителна функционалност към браузъра. Но преди да създадете такова, е добре да научите малко повече за това как браузърите работят.

За браузъра

В тази серия от уроци ще научите как да създадете разширение за браузър, което ще работи на Chrome, Firefox и Edge. В тази част ще откриете как работят браузърите и ще изградите основните елементи на разширението.

Но какво всъщност е браузърът? Това е софтуерно приложение, което позволява на крайния потребител да достъпва съдържание от сървър и да го показва на уеб страници.

✅ Малко история: първият браузър се е наричал 'WorldWideWeb' и е създаден от сър Тимъти Бърнърс-Лий през 1990 г.

Някои от първите браузъри, чрез Karen McGrane

Когато потребител се свърже с интернет чрез URL (Uniform Resource Locator) адрес, обикновено използвайки Hypertext Transfer Protocol чрез http или https адрес, браузърът комуникира с уеб сървър и извлича уеб страница.

След това, рендиращият механизъм на браузъра я показва на устройството на потребителя, което може да бъде мобилен телефон, настолен компютър или лаптоп.

Браузърите също така имат способността да кешират съдържание, за да не се налага то да бъде извличано от сървъра всеки път. Те могат да записват историята на активността на потребителя, да съхраняват 'бисквитки', които са малки части от данни, съдържащи информация за активността на потребителя, и още много.

Много важно е да запомните, че браузърите не са еднакви! Всеки браузър има своите силни и слаби страни, и професионалният уеб разработчик трябва да разбира как да направи уеб страниците си да работят добре на различни браузъри. Това включва и работа с малки екрани, като тези на мобилните телефони, както и с потребители, които са офлайн.

Един много полезен уебсайт, който вероятно трябва да запазите в отметките на предпочитания от вас браузър, е caniuse.com. Когато създавате уеб страници, е много полезно да използвате списъците на caniuse за поддържани технологии, за да осигурите най-добрата поддръжка за вашите потребители.

✅ Как можете да разберете кои браузъри са най-популярни сред потребителите на вашия уебсайт? Проверете вашата аналитика - можете да инсталирате различни аналитични пакети като част от процеса на разработка, и те ще ви покажат кои браузъри се използват най-често.

Разширения за браузъри

Защо бихте искали да създадете разширение за браузър? Това е удобен инструмент, който можете да добавите към браузъра си, когато имате нужда от бърз достъп до задачи, които често повтаряте. Например, ако често ви се налага да проверявате цветовете на различни уеб страници, можете да инсталирате разширение за избор на цветове. Ако имате проблеми с помненето на пароли, можете да използвате разширение за управление на пароли.

Разширенията за браузъри също така са забавни за разработване. Те обикновено управляват ограничен брой задачи, които изпълняват добре.

✅ Кои са вашите любими разширения за браузъри? Какви задачи изпълняват?

Инсталиране на разширения

Преди да започнете да създавате, разгледайте процеса на изграждане и внедряване на разширение за браузър. Въпреки че всеки браузър има малки разлики в начина, по който управлява този процес, стъпките са сходни в Chrome и Firefox с този пример за Edge:

Забележка: Уверете се, че сте включили режим за разработчици и сте разрешили разширения от други магазини.

По същество процесът ще бъде следният:

изградете вашето разширение, използвайки npm run build
навигирайте в браузъра до панела с разширения, използвайки бутона "Настройки и още" (иконата ...) в горния десен ъгъл
ако е нова инсталация, изберете load unpacked, за да качите ново разширение от папката му за изграждане (в нашия случай това е /dist)
или, кликнете върху reload, ако презареждате вече инсталирано разширение

✅ Тези инструкции се отнасят за разширения, които създавате сами; за да инсталирате разширения, които са публикувани в магазина за разширения на съответния браузър, трябва да навигирате до тези магазини и да инсталирате избраното от вас разширение.

Да започнем

Ще създадете разширение за браузър, което показва въглеродния отпечатък на вашия регион, включително енергийната консумация и източника на енергия. Разширението ще има форма, която събира API ключ, за да можете да достъпите API на CO2 Signal.

Необходимо ви е:

API ключ; въведете вашия имейл в полето на тази страница и ще получите ключ
код за вашия регион, съответстващ на Electricity Map (например, за Бостън използвам 'US-NEISO')
начален код. Изтеглете папката start; ще попълвате кода в тази папка
NPM - NPM е инструмент за управление на пакети; инсталирайте го локално и пакетите, изброени във вашия файл package.json, ще бъдат инсталирани за използване във вашия уеб проект

✅ Научете повече за управлението на пакети в този отличен модул за обучение

Отделете минута, за да разгледате базата с код:

✅ След като разполагате с вашия API ключ и код за региона, запазете ги някъде като бележка за бъдеща употреба.

Създаване на HTML за разширението

Това разширение има два изгледа. Един за събиране на API ключа и кода на региона:

И втори за показване на въглеродната консумация на региона:

Нека започнем със създаването на HTML за формата и стилизирането ѝ с CSS.

В папката /dist ще създадете форма и зона за резултати. Във файла index.html попълнете обозначената зона за формата:

<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>

Това е формата, където ще се въвежда и съхранява информацията в локалното хранилище.

След това създайте зоната за резултати; под последния таг на формата добавете няколко div елемента:

<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>

На този етап можете да опитате изграждане. Уверете се, че сте инсталирали зависимостите на пакета за това разширение:

npm install

Тази команда ще използва npm, мениджъра на пакети за Node, за да инсталира webpack за процеса на изграждане на разширението. Можете да видите резултата от този процес, като погледнете в /dist/main.js - ще видите, че кодът е обединен.

Засега разширението трябва да се изгради и, ако го внедрите в Edge като разширение, ще видите формата, показана спретнато.

Поздравления, направихте първите стъпки към създаването на разширение за браузър. В следващите уроци ще го направите по-функционално и полезно.

🚀 Предизвикателство

Разгледайте магазин за разширения за браузъри и инсталирайте едно на вашия браузър. Можете да разгледате файловете му по интересни начини. Какво откривате?

Тест след лекцията

Преглед и самостоятелно обучение

В този урок научихте малко за историята на уеб браузъра; използвайте тази възможност, за да научите повече за това как създателите на Световната мрежа са си представяли нейното използване, като прочетете повече за историята ѝ. Някои полезни сайтове включват:

История на уеб браузърите

История на мрежата

Интервю с Тим Бърнърс-Лий

Задача

Променете стила на вашето разширение

Отказ от отговорност:
Този документ е преведен с помощта на AI услуга за превод Co-op Translator. Въпреки че се стремим към точност, моля, имайте предвид, че автоматичните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия изходен език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален превод от човек. Ние не носим отговорност за каквито и да било недоразумения или погрешни интерпретации, произтичащи от използването на този превод.

17 KiB Raw Permalink Blame History Unescape Escape