11 KiB

Raw Permalink Blame History

Browser Extension Project Part 1: Tungkol sa Mga Browser

Sketchnote ni Wassim Chegham

Pre-Lecture Quiz

Panimula

Ang mga browser extension ay nagdadagdag ng karagdagang functionality sa isang browser. Ngunit bago ka gumawa ng isa, mahalagang maunawaan kung paano gumagana ang mga browser.

Tungkol sa Browser

Sa serye ng mga araling ito, matututuhan mong gumawa ng browser extension na gagana sa Chrome, Firefox, at Edge browsers. Sa bahaging ito, malalaman mo kung paano gumagana ang mga browser at bubuuin ang mga elemento ng browser extension.

Ngunit ano nga ba ang isang browser? Isa itong software application na nagbibigay-daan sa end user na ma-access ang nilalaman mula sa isang server at maipakita ito sa mga web page.

✅ Kaunting kasaysayan: ang unang browser ay tinawag na 'WorldWideWeb' at nilikha ni Sir Timothy Berners-Lee noong 1990.

Ilang mga naunang browser, mula kay Karen McGrane

Kapag ang isang user ay kumonekta sa internet gamit ang isang URL (Uniform Resource Locator) address, karaniwang gamit ang Hypertext Transfer Protocol sa pamamagitan ng http o https address, ang browser ay nakikipag-ugnayan sa isang web server at kinukuha ang isang web page.

Sa puntong ito, ang rendering engine ng browser ang nagpapakita nito sa device ng user, maaaring ito ay isang mobile phone, desktop, o laptop.

May kakayahan din ang mga browser na mag-cache ng nilalaman upang hindi na ito kailangang kunin mula sa server sa bawat pagkakataon. Maaari rin nilang i-record ang kasaysayan ng browsing activity ng user, mag-imbak ng 'cookies', na maliliit na piraso ng data na naglalaman ng impormasyon para sa aktibidad ng user, at marami pang iba.

Isang mahalagang bagay na dapat tandaan tungkol sa mga browser ay hindi lahat ng mga ito ay pareho! Ang bawat browser ay may kani-kaniyang kalakasan at kahinaan, at mahalaga para sa isang propesyonal na web developer na maunawaan kung paano gawing mahusay ang performance ng mga web page sa iba't ibang browser. Kasama rito ang pag-aangkop sa maliliit na viewports tulad ng sa mobile phone, pati na rin ang user na offline.

Isang kapaki-pakinabang na website na dapat mong i-bookmark sa kahit anong browser na ginagamit mo ay ang caniuse.com. Kapag gumagawa ka ng mga web page, malaking tulong ang mga listahan ng mga suportadong teknolohiya ng caniuse upang mas mahusay mong masuportahan ang iyong mga user.

✅ Paano mo malalaman kung aling mga browser ang pinakapopular sa mga gumagamit ng iyong website? Tingnan ang iyong analytics - maaari kang mag-install ng iba't ibang analytics packages bilang bahagi ng iyong proseso ng web development, at ipapakita nito kung aling mga browser ang pinakaginagamit ng mga user.

Mga Browser Extension

Bakit mo gugustuhing gumawa ng browser extension? Kapaki-pakinabang ito para sa mabilisang pag-access sa mga gawain na madalas mong inuulit. Halimbawa, kung madalas mong kailangang suriin ang mga kulay sa iba't ibang web page na iyong ginagamit, maaari kang mag-install ng color-picker browser extension. Kung nahihirapan kang tandaan ang mga password, maaari kang gumamit ng password-management browser extension.

Masaya ring gumawa ng browser extensions. Karaniwan, ang mga ito ay may limitadong bilang ng mga gawain na mahusay nilang nagagawa.

✅ Ano ang iyong mga paboritong browser extension? Anong mga gawain ang kanilang ginagawa?

Pag-install ng Extensions

Bago ka magsimulang gumawa, tingnan ang proseso ng paggawa at pag-deploy ng isang browser extension. Bagama't bahagyang nagkakaiba ang bawat browser sa kung paano nila pinamamahalaan ang prosesong ito, halos pareho ang proseso sa Chrome at Firefox tulad ng halimbawa sa Edge:

Tandaan: Siguraduhing i-toggle ang developer mode at payagan ang extension mula sa ibang mga tindahan.

Sa esensya, ang proseso ay:

gawin ang iyong extension gamit ang npm run build
mag-navigate sa browser papunta sa extensions pane gamit ang "Settings and more" button (ang ... icon) sa kanang itaas
kung ito ay bagong installation, piliin ang load unpacked upang i-upload ang bagong extension mula sa build folder nito (sa ating kaso ito ay /dist)
o, i-click ang reload kung nire-reload mo ang extension na na-install na

✅ Ang mga tagubiling ito ay para sa mga extension na ikaw mismo ang gumawa; upang mag-install ng mga extension na nailabas na sa browser extension store ng bawat browser, dapat kang mag-navigate sa mga store at i-install ang extension na iyong napili.

Magsimula

Gagawa ka ng browser extension na nagpapakita ng carbon footprint ng iyong rehiyon, kabilang ang paggamit ng enerhiya at pinagmulan ng enerhiya. Ang extension ay magkakaroon ng form na nangongolekta ng API key upang ma-access mo ang API ng CO2 Signal.

Kailangan mo ng:

isang API key; ilagay ang iyong email sa kahon sa pahinang ito at ipapadala ito sa iyo
ang code para sa iyong rehiyon na tumutugma sa Electricity Map (halimbawa, sa Boston, ginagamit ko ang 'US-NEISO').
ang starter code. I-download ang start folder; kukumpletuhin mo ang code sa folder na ito.
NPM - Ang NPM ay isang package management tool; i-install ito nang lokal at ang mga package na nakalista sa iyong package.json file ay mai-install para magamit sa iyong web asset

✅ Matuto pa tungkol sa package management sa napakahusay na Learn module na ito

Maglaan ng oras upang tingnan ang codebase:

✅ Kapag nakuha mo na ang iyong API key at Region code, itabi ang mga ito sa isang tala para sa hinaharap na paggamit.

Gawin ang HTML para sa Extension

Ang extension na ito ay may dalawang view. Isa para mangolekta ng API key at region code:

At ang pangalawa para ipakita ang carbon usage ng rehiyon:

Magsimula tayo sa paggawa ng HTML para sa form at pag-style nito gamit ang CSS.

Sa /dist folder, gagawa ka ng form at isang result area. Sa index.html file, punan ang delineated form area:

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

Ito ang form kung saan ilalagay at ise-save ang iyong impormasyon sa local storage.

Susunod, gumawa ng results area; sa ilalim ng final form tag, magdagdag ng ilang divs:

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

Sa puntong ito, maaari kang mag-try ng build. Siguraduhing i-install ang package dependencies ng extension na ito:

npm install

Ang command na ito ay gagamit ng npm, ang Node Package Manager, upang i-install ang webpack para sa build process ng iyong extension. Makikita mo ang output ng prosesong ito sa pamamagitan ng pagtingin sa /dist/main.js - makikita mong na-bundle na ang code.

Sa ngayon, dapat mag-build ang extension at, kung ide-deploy mo ito sa Edge bilang extension, makikita mo ang isang maayos na form na naka-display.

Binabati kita, nagawa mo na ang unang hakbang sa paggawa ng browser extension. Sa mga susunod na aralin, gagawin mo itong mas functional at kapaki-pakinabang.

🚀 Hamon

Tingnan ang isang browser extension store at mag-install ng isa sa iyong browser. Maaari mong suriin ang mga file nito sa mga kawili-wiling paraan. Ano ang iyong natuklasan?

Post-Lecture Quiz

Post-lecture quiz

Review at Pag-aaral sa Sarili

Sa araling ito, natutunan mo ang kaunti tungkol sa kasaysayan ng web browser; samantalahin ang pagkakataong ito upang matuto pa tungkol sa kung paano inisip ng mga imbentor ng World Wide Web ang paggamit nito sa pamamagitan ng pagbabasa ng higit pa tungkol sa kasaysayan nito. Ilang kapaki-pakinabang na site ay:

The History of Web Browsers

History of the Web

Isang panayam kay Tim Berners-Lee

Gawain

Restyle your extension

Paunawa:
Ang dokumentong ito ay isinalin gamit ang AI translation service na Co-op Translator. Bagama't sinisikap naming maging tumpak, tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na sanggunian. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na maaaring magmula sa paggamit ng pagsasaling ito.

11 KiB Raw Permalink Blame History