12 KiB

Raw Blame History

Proyekto ng Browser Extension Bahagi 1: Lahat 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 magtayo ng isa, dapat kang matuto ng kaunti tungkol sa kung paano gumagana ang mga browser.

Tungkol sa Browser

Sa serye ng mga araling ito, matututo kang gumawa ng browser extension na gagana sa mga browser tulad ng Chrome, Firefox, at Edge. Sa bahaging ito, matutuklasan mo kung paano gumagana ang mga browser at bubuuin ang mga elemento ng browser extension.

Pero ano nga ba ang browser? Ito ay isang software application na nagbibigay-daan sa isang 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 maagang 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 ay ipinapakita ito sa device ng user, na maaaring isang mobile phone, desktop, o laptop.

Ang mga browser ay may kakayahan ding mag-cache ng nilalaman upang hindi na ito kailangang kunin mula sa server sa bawat pagkakataon. Maaari rin nilang irekord ang kasaysayan ng aktibidad ng pag-browse ng user, mag-imbak ng 'cookies', na maliliit na piraso ng data na naglalaman ng impormasyon na ginagamit upang irekord ang aktibidad ng user, at marami pa.

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 lakas at kahinaan, at ang isang propesyonal na web developer ay kailangang maunawaan kung paano gawing mahusay ang pagganap ng mga web page sa iba't ibang browser. Kasama na rito ang paghawak sa maliliit na screen 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 gusto mong gamitin ay caniuse.com. Kapag gumagawa ka ng mga web page, napaka-kapaki-pakinabang na gamitin ang mga listahan ng mga suportadong teknolohiya ng caniuse upang mas maayos mong masuportahan ang iyong mga user.

✅ Paano mo malalaman kung aling mga browser ang pinakapopular sa base ng user 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 sasabihin nila sa iyo kung aling mga browser ang pinakaginagamit ng iba't ibang popular na browser.

Mga Browser Extension

Bakit mo gugustuhing gumawa ng browser extension? Ito ay isang kapaki-pakinabang na bagay na maikakabit sa iyong browser kapag kailangan mo ng mabilisang access sa mga gawain na madalas mong inuulit. Halimbawa, kung madalas kang 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 rin ang paggawa ng browser extensions. Karaniwan, pinamamahalaan nila ang limitadong bilang ng mga gawain na mahusay nilang ginagawa.

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

Pag-install ng Extensions

Bago ka magsimulang magtayo, tingnan ang proseso ng paggawa at pag-deploy ng isang browser extension. Bagama't bahagyang magkakaiba ang bawat browser sa kung paano nila pinamamahalaan ang gawaing ito, ang proseso ay katulad sa Chrome at Firefox sa halimbawang ito sa Edge:

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

Sa esensya, ang proseso ay:

buuin ang iyong extension gamit ang npm run build
mag-navigate sa browser sa extensions pane gamit ang "Settings and more" button (ang ... icon) sa kanang itaas
kung ito ay bagong pag-install, piliin ang load unpacked upang mag-upload ng 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 tagubilin na ito ay para sa mga extension na ikaw mismo ang gumawa; upang mag-install ng mga extension na inilabas na sa browser extension store na nauugnay sa bawat browser, dapat kang mag-navigate sa mga tindahan at i-install ang extension na iyong pinili.

Magsimula

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

Kailangan mo:

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 (sa Boston, halimbawa, ginagamit ko ang 'US-NEISO').
ang starter code. I-download ang folder na start; kukumpletuhin mo ang code sa folder na ito.
NPM - Ang NPM ay isang tool sa pamamahala ng package; i-install ito sa 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 pamamahala ng package sa napakahusay na Learn module na ito

Maglaan ng sandali upang tingnan ang codebase:

✅ Kapag mayroon ka nang API key at Region code, itago ang mga ito sa isang tala para sa hinaharap na paggamit.

Gumawa ng 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 folder na /dist, gagawa ka ng form at isang result area. Sa file na index.html, 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 ang iyong na-save na impormasyon ay ilalagay at mai-save sa local storage.

Susunod, gumawa ng results area; sa ilalim ng huling 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 proseso ng pagbuo ng iyong extension. Makikita mo ang output ng prosesong ito sa pamamagitan ng pagtingin sa /dist/main.js - makikita mo na ang code ay na-bundle na.

Sa ngayon, dapat na mabuo ang extension at, kung ide-deploy mo ito sa Edge bilang isang extension, makikita mo ang isang form na maayos na ipinapakita.

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

Hamon ng GitHub Copilot Agent 🚀

Gamitin ang Agent mode upang kumpletuhin ang sumusunod na hamon:

Deskripsyon: Pagandahin ang browser extension sa pamamagitan ng pagdaragdag ng mga feature para sa form validation at user feedback upang mapabuti ang karanasan ng user sa paglalagay ng API keys at region codes.

Prompt: Gumawa ng mga JavaScript validation function na susuriin kung ang field ng API key ay naglalaman ng hindi bababa sa 20 characters at kung ang region code ay sumusunod sa tamang format (tulad ng 'US-NEISO'). Magdagdag ng visual feedback sa pamamagitan ng pagbabago ng kulay ng input border sa berde para sa mga valid na input at pula para sa mga invalid. Magdagdag din ng toggle feature upang ipakita/itago ang API key para sa seguridad.

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

Panayam kay Tim Berners-Lee

Takdang-Aralin

Restyle your extension

Paunawa:
Ang dokumentong ito ay isinalin gamit ang AI translation service na Co-op Translator. Bagamat sinisikap naming maging tumpak, pakatandaan 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 pinagmulan. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.

12 KiB Raw Blame History