18 KiB

Raw Blame History

Selaimen laajennusprojekti Osa 1: Kaikki selaimista

Luonnos: Wassim Chegham

Ennakkokysely

Johdanto

Selaimen laajennukset ovat pieniä sovelluksia, jotka parantavat verkkoselauskokemusta. Kuten Tim Berners-Leen alkuperäinen visio interaktiivisesta verkosta, laajennukset laajentavat selaimen ominaisuuksia yksinkertaisen dokumenttien katselun ulkopuolelle. Salasananhallinnoista, jotka pitävät tilisi turvassa, värinvalitsimiin, jotka auttavat suunnittelijoita löytämään täydelliset sävyt, laajennukset ratkaisevat arjen selaushaasteita.

Ennen kuin rakennamme ensimmäisen laajennuksesi, ymmärretään, miten selaimet toimivat. Aivan kuten Alexander Graham Bellin piti ymmärtää äänen siirtoa ennen puhelimen keksimistä, selaimen perusteiden tunteminen auttaa sinua luomaan laajennuksia, jotka integroituvat saumattomasti olemassa oleviin selaimen järjestelmiin.

Tämän oppitunnin lopussa ymmärrät selaimen arkkitehtuurin ja olet aloittanut ensimmäisen laajennuksesi rakentamisen.

Verkkoselainten ymmärtäminen

Verkkoselain on pohjimmiltaan kehittynyt dokumenttien tulkki. Kun kirjoitat "google.com" osoiteriville, selain suorittaa monimutkaisen sarjan operaatioita - pyytää sisältöä palvelimilta ympäri maailmaa, sitten jäsentää ja renderöi koodin interaktiivisiksi verkkosivuiksi, joita näet.

Tämä prosessi muistuttaa, kuinka ensimmäinen selain, WorldWideWeb, suunniteltiin Tim Berners-Leen toimesta vuonna 1990 tekemään hyperlinkitetyt dokumentit kaikkien saataville.

✅ Pieni historia: Ensimmäinen selain oli nimeltään 'WorldWideWeb' ja sen loi Sir Timothy Berners-Lee vuonna 1990.

Joitakin varhaisia selaimia, lähde: Karen McGrane

Kuinka selaimet käsittelevät verkkosisältöä

Prosessi URL-osoitteen syöttämisestä verkkosivun näkemiseen sisältää useita koordinoituja vaiheita, jotka tapahtuvat sekunneissa:

sequenceDiagram
    participant User
    participant Browser
    participant DNS
    participant Server
    
    User->>Browser: Types URL and presses Enter
    Browser->>DNS: Looks up server IP address
    DNS->>Browser: Returns IP address
    Browser->>Server: Requests web page content
    Server->>Browser: Sends HTML, CSS, and JavaScript
    Browser->>User: Renders complete web page

Tämä prosessi saavuttaa seuraavat asiat:

Kääntää ihmisen luettavan URL-osoitteen palvelimen IP-osoitteeksi DNS-haun avulla
Luo turvallisen yhteyden verkkopalvelimeen HTTP- tai HTTPS-protokollien avulla
Pyytää tietyn verkkosivun sisällön palvelimelta
Vastaanottaa HTML-merkintää, CSS-tyylitiedostoja ja JavaScript-koodia palvelimelta
Renderöi kaiken sisällön interaktiiviseksi verkkosivuksi, jonka näet

Selaimen keskeiset ominaisuudet

Modernit selaimet tarjoavat lukuisia ominaisuuksia, joita laajennusten kehittäjät voivat hyödyntää:

Ominaisuus	Tarkoitus	Mahdollisuudet laajennuksille
Renderöintimoottori	Näyttää HTML-, CSS- ja JavaScript-sisällön	Sisällön muokkaus, tyylien injektointi
JavaScript-moottori	Suorittaa JavaScript-koodia	Mukautetut skriptit, API-yhteydet
Paikallinen tallennus	Tallentaa dataa paikallisesti	Käyttäjäasetukset, välimuistidata
Verkkopino	Käsittelee verkkopyyntöjä	Pyynnön seuranta, datan analysointi
Turvamalli	Suojaa käyttäjiä haitalliselta sisällöltä	Sisällön suodatus, turvallisuuden parannukset

Näiden ominaisuuksien ymmärtäminen auttaa sinua:

Tunnistamaan, missä laajennuksesi voi tuoda eniten arvoa
Valitsemaan oikeat selaimen API:t laajennuksesi toiminnallisuudelle
Suunnittelemaan laajennuksia, jotka toimivat tehokkaasti selaimen järjestelmien kanssa
Varmistamaan, että laajennuksesi noudattaa selaimen turvallisuusparhaita käytäntöjä

Selainten välisten kehitysnäkökohtien huomioiminen

Eri selaimet toteuttavat standardeja pienin variaatioin, kuten eri ohjelmointikielet voivat käsitellä samaa algoritmia eri tavoin. Chrome, Firefox ja Safari omaavat kukin ainutlaatuisia ominaisuuksia, jotka kehittäjien on otettava huomioon laajennuksia kehittäessään.

💡 Vinkki: Käytä caniuse.com tarkistaaksesi, mitkä verkkoteknologiat ovat tuettuja eri selaimissa. Tämä on korvaamatonta, kun suunnittelet laajennuksesi ominaisuuksia!

Keskeiset näkökohdat laajennusten kehittämisessä:

Testaa laajennustasi Chrome-, Firefox- ja Edge-selaimissa
Sovita eri selainten laajennus-API:t ja manifestimuodot
Käsittele vaihtelevia suorituskykyominaisuuksia ja rajoituksia
Tarjoa varajärjestelmiä selaimen erityisominaisuuksille, jotka eivät välttämättä ole saatavilla

✅ Analytiikkatieto: Voit selvittää, mitkä selaimet ovat käyttäjiesi suosikkeja asentamalla analytiikkapaketteja verkkokehitysprojekteihisi. Tämä tieto auttaa sinua priorisoimaan, mitkä selaimet kannattaa tukea ensin.

Selaimen laajennusten ymmärtäminen

Selaimen laajennukset ratkaisevat yleisiä verkkoselaushaasteita lisäämällä toiminnallisuutta suoraan selaimen käyttöliittymään. Sen sijaan, että tarvittaisiin erillisiä sovelluksia tai monimutkaisia työnkulkuja, laajennukset tarjoavat välitöntä pääsyä työkaluihin ja ominaisuuksiin.

Tämä konsepti muistuttaa, kuinka varhaiset tietokonepioneerit, kuten Douglas Engelbart, visioivat ihmisten kykyjen laajentamista teknologian avulla - laajennukset laajentavat selaimen perustoiminnallisuutta.

Suosittuja laajennuskategorioita ja niiden hyötyjä:

Tuottavuustyökalut: Tehtävien hallinta, muistiinpanosovellukset ja ajanseurantalaitteet, jotka auttavat sinua pysymään järjestyksessä
Turvallisuuden parannukset: Salasananhallinnat, mainosten estäjät ja yksityisyystyökalut, jotka suojaavat tietojasi
Kehittäjätyökalut: Koodin muotoilijat, värinvalitsimet ja virheenkorjaustyökalut, jotka tehostavat kehitystyötä
Sisällön parannus: Lukutilat, videolataajat ja kuvakaappaustyökalut, jotka parantavat verkkokokemustasi

✅ Pohdintakysymys: Mitkä ovat suosikkiselaimen laajennuksesi? Mitä erityisiä tehtäviä ne suorittavat ja miten ne parantavat selauskokemustasi?

Laajennusten asentaminen ja hallinta

Laajennusten asennusprosessin ymmärtäminen auttaa sinua ennakoimaan käyttäjäkokemusta, kun ihmiset asentavat laajennuksesi. Asennusprosessi on standardoitu moderneissa selaimissa, vaikka käyttöliittymän suunnittelussa on pieniä eroja.

Tärkeää: Varmista, että kehittäjätila on päällä ja salli laajennusten asentaminen muista kaupoista, kun testaat omia laajennuksiasi.

Kehityslaajennuksen asennusprosessi

Kun kehität ja testaat omia laajennuksiasi, noudata tätä työprosessia:

# Step 1: Build your extension
npm run build

Mitä tämä komento tekee:

Kääntää lähdekoodisi selaimelle valmiiksi tiedostoiksi
Pakkaa JavaScript-moduulit optimoiduiksi paketeiksi
Generoi lopulliset laajennustiedostot /dist-kansioon
Valmistelee laajennuksesi asennusta ja testausta varten

Vaihe 2: Siirry selaimen laajennuksiin

Avaa selaimesi laajennusten hallintasivu
Klikkaa "Asetukset ja lisää" -painiketta (kolme pistettä) oikeassa yläkulmassa
Valitse "Laajennukset" pudotusvalikosta

Vaihe 3: Lataa laajennuksesi

Uusille asennuksille: Valitse load unpacked ja valitse /dist-kansiosi
Päivityksille: Klikkaa reload jo asennetun laajennuksen vieressä
Testausta varten: Ota käyttöön "Kehittäjätila" saadaksesi lisävirheenkorjausominaisuuksia

Julkaistun laajennuksen asennus

✅ Huomio: Nämä kehitysohjeet koskevat erityisesti itse rakentamiasi laajennuksia. Julkaistujen laajennusten asentamiseksi käy virallisissa selaimen laajennuskaupoissa, kuten Microsoft Edge Add-ons store.

Erojen ymmärtäminen:

Kehitysasennukset antavat sinun testata julkaisemattomia laajennuksia kehityksen aikana
Kauppa-asennukset tarjoavat tarkastettuja, julkaistuja laajennuksia automaattisilla päivityksillä
Sivulataus mahdollistaa laajennusten asentamisen virallisten kauppojen ulkopuolelta (vaatii kehittäjätilan)

Hiilijalanjälkilaajennuksen rakentaminen

Luomme selaimen laajennuksen, joka näyttää alueesi energiankäytön hiilijalanjäljen. Tämä projekti havainnollistaa keskeisiä laajennusten kehityskonsepteja samalla kun luodaan käytännöllinen työkalu ympäristötietoisuuden lisäämiseksi.

Tämä lähestymistapa noudattaa "tekemällä oppimisen" periaatetta, joka on osoittautunut tehokkaaksi John Deweyn pedagogisten teorioiden mukaan - yhdistämällä tekniset taidot merkityksellisiin tosielämän sovelluksiin.

Projektin vaatimukset

Ennen kehityksen aloittamista kerätään tarvittavat resurssit ja riippuvuudet:

Vaadittu API-pääsy:

CO2 Signal API -avain: Syötä sähköpostiosoitteesi saadaksesi ilmaisen API-avaimen
Aluekoodi: Löydä aluekoodisi Electricity Map -sivustolta (esimerkiksi Boston käyttää 'US-NEISO')

Kehitystyökalut:

Node.js ja NPM: Pakettienhallintatyökalu projektin riippuvuuksien asentamiseen
Aloituskoodi: Lataa start-kansio kehityksen aloittamiseksi

✅ Lisätietoja: Paranna pakettienhallintataitojasi tällä kattavalla oppimismoduulilla

Projektirakenteen ymmärtäminen

Projektirakenteen ymmärtäminen auttaa organisoimaan kehitystyötä tehokkaasti. Kuten Aleksandrian kirjasto oli järjestetty helppoa tiedonhakua varten, hyvin organisoitu koodipohja tekee kehityksestä tehokkaampaa:

project-root/
├── dist/                    # Built extension files
│   ├── manifest.json        # Extension configuration
│   ├── index.html           # User interface markup
│   ├── background.js        # Background script functionality
│   └── main.js              # Compiled JavaScript bundle
└── src/                     # Source development files
    └── index.js             # Your main JavaScript code

Mitä kukin tiedosto tekee:

manifest.json: Määrittää laajennuksen metatiedot, käyttöoikeudet ja aloituspisteet
index.html: Luo käyttöliittymän, joka näkyy, kun käyttäjät klikkaavat laajennustasi
background.js: Käsittelee taustatehtäviä ja selaimen tapahtumakuuntelijoita
main.js: Sisältää lopullisen pakatun JavaScriptin rakennusprosessin jälkeen
src/index.js: Sisältää pääkehityskoodisi, joka käännetään main.js:ksi

💡 Organisointivinkki: Tallenna API-avaimesi ja aluekoodisi turvalliseen muistiinpanoon, jotta voit helposti viitata niihin kehityksen aikana. Tarvitset näitä arvoja testataksesi laajennuksesi toiminnallisuutta.

✅ Turvallisuusvinkki: Älä koskaan tallenna API-avaimia tai arkaluontoisia tunnistetietoja koodivarastoon. Näytämme sinulle, kuinka käsitellä näitä turvallisesti seuraavissa vaiheissa.

Laajennuksen käyttöliittymän luominen

Nyt rakennamme käyttöliittymäkomponentit. Laajennus käyttää kaksivaiheista lähestymistapaa: asetusten määrittämisnäkymä alkuasetuksille ja tulosnäkymä datan näyttämiseen.

Tämä noudattaa progressiivisen paljastamisen periaatetta, jota on käytetty käyttöliittymäsuunnittelussa tietotekniikan alkuajoista lähtien - tietojen ja vaihtoehtojen paljastaminen loogisessa järjestyksessä, jotta käyttäjät eivät kuormitu liikaa.

Laajennusnäkymien yleiskatsaus

Asetusnäkymä - Ensimmäisen käyttökerran asetusten määrittäminen:

Tulosnäkymä - Hiilijalanjälkitietojen näyttäminen:

Asetuslomakkeen rakentaminen

Asetuslomake kerää käyttäjän konfigurointitiedot ensimmäisen käytön aikana. Kun asetukset on määritetty, tiedot säilyvät selaimen muistissa tulevia istuntoja varten.

Lisää tämä lomakerakenne tiedostoon /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>

Tämä lomake saavuttaa seuraavat asiat:

Luo semanttisen lomakerakenteen oikeilla etiketeillä ja syöttöyhdistelmillä
Mahdollistaa selaimen automaattisen täydennystoiminnon parantaakseen käyttäjäkokemusta
Vaatii molempien kenttien täyttämisen ennen lähettämistä required-attribuutin avulla
Järjestää syötteet kuvaavilla luokkanimillä helppoa tyylittelyä ja JavaScriptin kohdistamista varten
Tarjoaa selkeät ohjeet käyttäjille, jotka määrittävät laajennuksen ensimmäistä kertaa

Tulosnäkymän rakentaminen

Seuraavaksi luodaan tulosalue, joka näyttää hiilijalanjälkitiedot. Lisää tämä HTML-lomake lomakkeen alle:

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

Mitä tämä rakenne tarjoaa:

loading: Näyttää latausviestin, kun API-dataa haetaan
errors: Näyttää virheilmoituksia, jos API-kutsut epäonnistuvat tai data on virheellistä
data: Sisältää raakadataa virheenkorjausta varten kehityksen aikana
result-container: Esittää muotoiltua hiilijalanjälkitietoa käyttäjille
clear-btn: Mahdollistaa käyttäjien vaihtaa aluetta ja määrittää laajennuksen uudelleen

Rakennusprosessin asettaminen

Asennetaan projekt Kuvaus: Paranna selainlaajennusta lisäämällä lomakevalidointi ja käyttäjäpalautetoimintoja, jotta käyttäjäkokemus API-avainten ja aluekoodien syöttämisessä paranee.

Tehtävä: Luo JavaScript-validointifunktioita, jotka tarkistavat, että API-avainkentässä on vähintään 20 merkkiä ja että aluekoodi noudattaa oikeaa muotoa (esim. 'US-NEISO'). Lisää visuaalista palautetta muuttamalla syöttökentän reunaväriä vihreäksi, jos syöte on kelvollinen, ja punaiseksi, jos se on virheellinen. Lisää myös ominaisuus, jolla API-avain voidaan näyttää/piilottaa turvallisuussyistä.

Lue lisää agent mode -toiminnosta täältä.

🚀 Haaste

Tutustu selainlaajennuskauppaan ja asenna jokin laajennus selaimeesi. Voit tarkastella sen tiedostoja mielenkiintoisilla tavoilla. Mitä löydät?

Jälkiluennon kysely

Kertaus & Itseopiskelu

Tässä oppitunnissa opit hieman verkkoselaimen historiasta; käytä tämä tilaisuus oppiaksesi lisää siitä, miten World Wide Webin keksijät näkivät sen käytön lukemalla lisää sen historiasta. Hyödyllisiä sivustoja ovat esimerkiksi:

Verkkoselainten historia

Verkon historia

Haastattelu Tim Berners-Leen kanssa

Tehtävä

Muokkaa laajennuksesi ulkoasua

Vastuuvapauslauseke:
Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua Co-op Translator. Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.

18 KiB Raw Blame History