Valitse sivu

Tehdään plugari!

mennessä | helmi 10, 2021 | Blog, Koodaus

Favorite

Alkuvalmistelut

Katso ohjeet aloitukseen täältä
https://developer.chrome.com/docs/extensions/mv2/getstarted/
https://developer.chrome.com/docs/extensions/get-started

Ja täältä (vanhentunut manifest 2)
https://thoughtbot.com/blog/how-to-make-a-chrome-extension

Netti on aiheesta pullollaan hyviä videoita. Kannattaa tutustua myös niihin.

Favorite selainlaajennus

Ideana on rakentaa plugari Chromeen, jolla voidaan tallentaa sen hetkinen sivu talteen listalle.

 

Nimeä plugari

Tee kansio ja nimeä se plugarisi nimen mukaan

Tehdään kansioon (vain) tarpeelliset tiedostot

  • manifest.json (kts. screenshots mikä selittää kohdat -> manifest_version on alaviivalla ja pitää olla 3)
  • popup.html -> tee tänne tyhjä html ja kirjoita sisään esim. moi
  • background.js (jätä tyhjäksi) (tätä scriptiä ei tarvita lainkaan lopullisessa tuotteessa)

(Paketoidaan koodi) ja asennetaan plugari

  • paina kolmea pistettä chromessa
  • lisää työkaluja -> laajennukset
  • dev tila päälle (oikea yläkulma)
  • Paina vasemmalla Lataa pakkaamaton
  • ”manifest_version”:3, pitää olla 2 ei 1
  • jos tulee virheitä selvitä ne ja paina yritä uudelleen
  • nyt plugin on asennettu (mikä ei paljon vielä tee)

Plugari palkkiin näkyviin

  • klikkaa palapelin kuvaa selaimessa (profiilikuvan vieressä)
  • klikkaa pinnin kuvaa oman plugarisi kohdalla -> plugari ilmestyy listaan
  • klikkaa oman tuotoksesi ikonia -> nyt ikonin alla pitäisi näkyä moi
  • Plugari on nyt toiminnassa. Jee!

Kirjoitetaan konsoliin jotain

Plugari ei nyt tee mitään ja sitä on vaikea arvioida toimiiko koko sovellus. Muutetaan sovellusta niin, että saamme jotain näkyviin.

  • Muokataan esim. background.js näyttämään ”Plugari toimii!”
  • Paina laajennuksien hallinnasta päivitä nappia
  • Päivitys pitää tehdä jokaisen muutoksen jälkeen!!!
  • Kun sovelluksen DevTools näkymä on auki Ctrl + R tekee saman
  • Refressaa mikä vain sivu ja konsolissa pitäisi näkyä viesti
  • Voit ottaa viestin pois päältä, sillä se lähinnä ärsyttää

Tehdään toiminnallisuus

  • Tee kansioon js-tiedosto. Nimeä se esim. actions.js. Tämä tiedosto sisältää kaikki toiminnallisuudet (ei background.js).
  • Lisää kutsu scriptiin html-tiedostoon ennen bodyn loppu-tagia

Tähän asti toteutettua koodia voidaan käyttää lähes minkä tahansa selainlaajennoksen alkutoimiin. Seuraavaksi aletaan rakentamaan itse toiminnallisuutta Favorite-plugarille.

Favorite plugin

  • Tehdään aluksi staattinen linkkilista, jossa on muutama linkki
    • lista on array, jonka sisällä on objekteja
    • tätä listaa ja sen ominaisuuksia on helppo laajentaa myöhemmin
  • Testataksesi toiminta, tulosta lista konsoliin

YRITÄ ITSE

Listan tulostus sovellukseen

  • Tee seuraavat muutokset actions.js tiedostoon
    • Looppa lista käyttäen foreachia
    • Tulostaa alkuun jokainen linkki konsoliin (testataksesi)

 

 

 

Testaus

  • Huomaa, että background.js toimii selaimessa ja näkyy millä vain sivulla. Nyt kun lisäsimme tulostuksen html-tiedoston scriptiin konsoli näkyy vain sovelluksen sisällä.
  • Paina plugarin ikonia ja klikkaa oikealla sen alle ilmestynyttä ikkunaa ja paina Tarkista/Inspect
  • Nyt näet itse sovelluksen scriptin suorituksen erikseen ja samalla edellä tehdyn konsoli tulostuksen

Lista näkyväksi muualle kuin konsoliin

Listaa varten sovellukseen voidaan tehdä esim. elementti jossa ID johon tulostus
sijoitetaan

Vaihtoehtoisesti elementti voidaan myös luoda dynaamisesti. Kaikki jatkossa luotavat elementit luodaan tällä tekniikalla.

Toimii jo!

Nythän plugin toimii jo kuten pitää. Ainostaan lista on staattinen ja sitä pitää päivittää käsin. Seuraavaksi muokataan koodia niin, että lista tulee selaimen muistista, jonne käyttäjä voi lisätä itse haluamiaan linkkejä.

Chrome.storage linkkilista

  • Tässä kohtaa staattisen listauksen voi kommentoida pois (links.forEach) sitä ei tarvita
  • Myös alussa kirjoitettu ”Moi” olisi hyvä muuttaa vastaamaan plugarin todellista toimintaa
  • varmista heti, että manifest sisältää permissionin strorageen
  • tehdään tyhjä array, mikä toimii väiaikaisena säilönä linkeille. Linkit kaivetaan myöhemmin muistista.
  • luetaan seuraavaksi storagesta talletetut linkit (alkuun tietenkin lista on tyhjä)

  • ”listOfLinks” on tässä sovelluksessa avain storageen. Voit tietenkin käyttää muuta nimeä.
  • result on nyt muuttuja, joka sisältää talletetut tiedot
    • tarkasta onko tietoja talletettu
    • Ilmoita (aluksi) ruudulla jos tietoja on ja jos tietoja ei ole

Datan lisääminen chome.storageen

Jotta jotain dataa alkaa näkymään lisätään nappi ja sille toiminto jolla tämän hetkisen sivun voi lisätä listaan.

Tehdään asynkroninen funktio, jolla saadaan tämän hetkisen aktiivisen välilehden tiedot.

Tehdään funktio mikä käsittelee ja tallentaa tiedot. Audioon liittyvät asiat voi tässä vaiheessa jättää kirjoittamatta tai kommentoida.

Tee vielä napille kuuntelija, mikä ajaa edellisen funktion.

  • Nyt plugari tallentaa napin painalluksella tietoja storageen, mutta ei näytä vielä dataa oikein
  • Paina nappia
  • Käy päivittämässä plugari Extensions-puolella. Sivun kohta ”Ei dataa” vaihtuu (tai ainain pitäisi) ”Dataa löytyi” tekstiksi.

Datan lukeminen chrome.storagesta

Seuraavaksi listataan storagen tiedot oikein

  • Tee (tässä vaiheessa vielä) tyhjä funktio jota tarvitaan pian
    • nimeä funktio esim. initProgram
  • Lisää storagen gettiin koodi, joka lisää luetun tiedon linkkilista muuttujaan
    • resultista tieto voidaan kaivaa sanomalla pisteen jälkeen talletetun muutujan avain
    • Kommentoi samalla ”Dataa löytyi” pois
    • lisää kutsu juuri tehtyyn uuteen funktioon (initProgram).
    • Lähetä argumenttina linkkilista muuttuja funktiolle

  • Testaa consolella, että linkki varmaan tulee funktioon perille
    • eli refreshaa taas plugari

 

  • lisää kutsu initProgram funktioon myös setin lopussa.
    • Lähetä samalla tavalla argumenttina linkkilista muuttuja funktiolle
    • Tällä varmistetaan, että linkin lisäämisen jälkeen lista päivittyy

initProgram toiminta

Viimeisenä muokataan initProgram listaamaan vastaanotettu listaus

  • Tyhjää lista joka kerta, kun initProgram ajetaan

  • Tämän jälkeen loopataan lista hyvin samalla tyylillä kuin staattinen lista

Nyt tuloksena pitäisi olla plugari, jolla voi lisätä sen hetkisen sivun listaan.

—

Parannuksia ja puutteita tässä vaiheessa

  • Graafisesti ei hivele silmiä
  • Nimiä ei voi muuttaa
  • Listaa ei voi tyhjentää tai muokata

—

Yksittäisen linkin poistaminen listalta

  • Jotta plugaria olisi mukava käyttää toteutetaan siihen ominaisuus, jolla listan linkkejä voi poistaa.
  • tee nappi, jota klikkaamalla listan linkit muuttuvat poistettaviksi
    • ikonina käytä vaikka ratas-ikonia

  • tulosta linkkilistasta uusi lista linkkejä (joiden ei ole tarkoitus avata mitään), johon on lisätty esim. span jossa lukee delete
    • nyt kun linkkiä painaa sen pitäisi poistaa kyseinen linkki listasta.
    • Tee esim. suoraan onclick elementille, joka kutsuu erillistä poistofunktiota. Funktiolle pitäisi myös samalla siirtyä tieto mikä indeksi poistetaan
    • lisää valmis ”linkki” listaan
    • esimerkissä index on tieto, jonka perusteella kyseinen tieto poistofunktiossa poistetaan

  • poistofunktio ottaa vastaan tai lukee kyseisen tiedon indeksin ja poistaa sen linkkilistasta
    • nyt linkkilista on päivitetty, joten sen voi muuttaa stringiksi (stringify) ja tallettaa storageen (chrome.storage.sync.set ota malli kohdasta uuden linkin lisääminen)
  • aja initprogram, jotta lista on taas tuore

Tyylittely

  • lista näyttää karulta ja sen käyttö voi olla tämän takia hankalaa
  • tehdään muutama määrite ja listasta tulee jo paljon helpompi käyttää
    • scriptin puolella ei oikeastaan tarvitse tehdä muuta kuin ottaa initProgramin sisältä rivitys-tag (<br>) pois
    • html puolella tee linkkaus style.css:ään

Lopputulos

CSS

/*Tee ikkunasta leveämpi*/
body {
    font-size: 1em;
    width: 200px;
    padding: 15px;
}
/*poista kamalat alleviivaukset*/
a{
    text-decoration: none;
}
/*tee perustyyli ikoneille*/
.icon {
    cursor: pointer;
    display: inline-block;
    color: red;
    padding: 5px;
    margin-right: 5px;
    text-align: center;
    min-width: 32px;
    font-size: 1.5em;
    border: 1px solid #8080803b;
    border-radius: 50%;
    line-height: 32px;
    transition: all .3s linear;
}
.icon:hover{
    border: 1px solid gray;
}
.icon.gear{
    color: #000;
}
/*tyyli poisto ikonille/pallolle*/
span.delete {
    background: red;
    color: #FFF;
    width: 14px;
    display: inline-block;
    text-align: center;
    height: 14px;
    line-height: 11px;
    border-radius: 50%;
    margin-right: 6px;
    top: -1px;
    position: relative;
}
/*estä liian pitkien ylivuoto ja rivitys*/
#appended-list a {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
    display: block;
    background: #f1f1f1;
    margin-bottom: 5px;
    padding: 5px 10px;
    border-radius: 100px;
    color: #000;
}
 

Jatkokehitys

Viimeinen vaihe on yhdistää poisto ja muokkaustoiminto. Myös plugarin tyyli on tässä vaiheessa muuttunut hieman.
Alla oleva koodi yhdistää poiston ja muokkauksen saman napin alle. Huomaa, että sama removeFromList() funktio on edelleen käytössä. Uutena toimintona mukaan on tullut updateTitle().
 
 

Ääniä?

Käytettävyyden näkökulmasta sovellukseen voi olla hyvä lisätä pieni ääniefekti kun listaan lisätään linkkejä tai kun siitä poistetaan niitä. Äänien lisääminen on super helppoa. Seuraava koodi voidaan lisätä esim. removeFromList funktion loppuun. Pätkä tarkastaa myös, että kyseinen audio-tag ei ole jo olemassa (kuvassa 133 rivi).
 

– – –

Tämä ohje on toteutettu osana Javascript-kurssia Satakunnan ammattikorkeakoulussa.
Opettajana Peter Virtanen

– – –