Valitse sivu

Alkuvalmistelut

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

Ja täältä
https://thoughtbot.com/blog/how-to-make-a-chrome-extension

Hyviä videoita on netti myös pullollaan. Kannattaa tutustua myös niihin.

 

Favorite selainlaajennus

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

Aloitetaan

  • Aloitetaan tyhjästä
    • 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 2!)
    • 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
    • paina kolmea pistettä chromessa
    • lisää työkaluja -> laajennukset
    • dev tila päälle (oikea yläkulma)
    • Paina vasemmalla Lataa pakkaamaton
    • ”manifest_version”:2, pitää olla 2 ei 1
    • jos tulee virheitä selvitä ne ja paina yritä uudelleen
    • nyt plugin on asennettu
  • pistetään 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
    • 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ä auki Ctrl + R tekee saman
    • Refressaa mikä vain sivua 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
    • Lisää kutsu scriptiin html-tiedostoon ennen bodyn loppu-tagia

Ylläolevaa voidaan käyttää lähes minkä tahansa selain laajennoksen alkutoimiin. Seuraavaksi aletaan rakentamaan itse toiminnallisuutta Fav2 plugarille.

Favorite plugin

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

Testaus

  • Huomaa, että background 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
  • Nyt näet itse sovelluksen scriptin suorituksen erikseen ja samalla edellä tehdyn
    konsoli tulostuksen

Listan tulostus sovellukseen

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

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, joka toimii väiaikaisena säilönä linkeille jotka kaivetaan 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

-Tähän päästiin ennen lomaa-

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.

  • Nyt plugari tallentaa tietoja storageen, mutta ei näytä vielä dataa oikein
  • Jos nyt plugarissa painaa lisäysikonia menee tieto talteen
  • Jos nyt refreshaa plugari sivun kohta ”Ei dataa” vaihtuu ”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

– – –