Sovelluskirjanmerkkit

[Terminal]

Tähän ketjuun olisi tarkoitus löytää, käytössä olevia sovelluskirjanmerkkejä, ohjeita ja esimerkkejä niiden tekemiseen.

Mikä on sovelluskirjanmerkki:
Sovelluskirjanmerkki on normaali kirjanmerkki, selaimen kirjanmerkkipaneelissa tai kirjanmerkkivalikossa, jonka "URL-osoite" kentän sisältö on korvattu JavaScript koodilla, ja tämä koodi alkaa aina javascript: etuliitteellä. Pistän esimerkkinä kirjanmerkin, joka mahdollistaa verkkosivun asettamisen muokkaustilaan, ja toinen joka palauttaa tilan normaaliksi. Tämä siksi että käytän sitä lähes päivittäin, esim. tilanteissa joissa on aikomus tallentaa sivu *.PDF muodossa tiedostoksi. Lähteenä on usein englanninkielinen sivu, jonka joudun kääntämään Googlen avulla, josta johtuen sivulle tulee jossakin määrin virheitä ja nämä virheet korjaan sitten asettamalla sivun kääntämisen jälkeen muokattavaan tilaan. Kun sisältö on OK, tulostan sen, ja lopuksi palautan normaaliksi.

MUOKKAUS PÄÄLLE

javascript:document.body.contentEditable = true; document.designMode="on"; void 0

MUOKKAUS POIS

javascript:document.body.contentEditable = false; document.designMode="off"; void 0

 

[Terminal]

Monirivinen JavaScript koodi, sovelluskirjanmerkiksi
Verkko-osoite ei saa sisältää rivinvaihtoja, niinpä koodirivit pitää kasata yksiriviseksi. Tässä alla näet alkuperäisen JavaScript koodin, joka suorittaa Google haun dokumentissa valittuna olevalle tekstille, ja jollei mitään ollut valittuna, näytetään dialogi, johon haettavan voi kirjoittaa.

Tältä se sitten näyttää (alla), kun kaikki on kasattu yksiriviseksi ja alkuun on lisänny javascript: -etuliitteen. Muuten tämä google haku vaikuttaa olevan saman tasoinen esimerkki kuin joku "Hello Word" joka löytyy esimerkkinä jokaiselta asiaa käsittelevältä sivulta, mutta tässä yksi variaatio lisää. Ei tämäkään ihan "turhake" ole jos tuon kirjanmerkin pystyy pitämään kirjanmerkkipalkissa näkyvissä, ettei sitä tarvitse valikoiden kautta noutaa, saattaapi tuntua ihan näppärältäkin keinolta tehdä pikahaku. Tähän alle vielä koodi, jonka voi selaimessaan testata ilman kirjoittelun vaivaa:

javascript:var s = document.getSelection();if (s == '') void (s = prompt('Anna hakusanat Google-hakua varten', ''));if (s) { var google = window.open('https://www.google.com/search?q=' + encodeURI(s)); }

Jos ei huvita kirjanmerkiksi asti, voit testata tämän ja kaikki muutkin sovelluskirjanmerkit selaimen kehitystyökalujen "Console" välilehdellä. Painat vain F12.

 

[Terminal]

Tässä muutama lisää. Maksimi haettavan pituus 2048 merkkiä, ja tästä ylimenevä katkaistaan pois, ehkä oli väärin puhua haettavan pituudesta, olisi pitänyt sanoa ettei osoiterivillä oteta vastaan pitempään tekstiä, olipa se nyt sitten haettava tai URL.

VALITUN HAKU duckduckgo.com HAKUKONEELLA
javascript:var URL = 'https://duckduckgo.com/?q="';window.location.href=URL + window.getSelection() + '"';

VALITUN HAKU bing.com HAKUKONEELLA
javascript:var URL = 'https://www.bing.com/search?q="';window.location.href=URL + window.getSelection() + '"';

VALITUN HAKU google.com HAKUKONEELLA
javascript:var URL = 'https://www.google.com/search?q="';window.location.href=URL + window.getSelection() + '"';

VALITUN HAKU yandex.ru HAKUKONEELLA
javascript:var URL = 'https://yandex.ru/search/?text="';window.location.href=URL + window.getSelection() + '"';

VALITUN HAKU yahoo.com HAKUKONEELLA
javascript:var URL = 'https://fi.search.yahoo.com/search?p="';window.location.href=URL + window.getSelection() + '"';

 

[Terminal]

jQuery on JavaScript-kirjasto.
Mutta kaikki sivustot eivät sitä välttämättä ole ottaneet käyttöön. Jos sovelluskirjanmerkkisi kuitenkin käyttää sitä, tässä esimerkissä näytetään, kuinka sen otat käyttöön siitäkin huolimatta. Kannattaa muistaa että jQuery yksinkertaistaa huomattavasti JavaScript-ohjelmointia. Esimerkki häivyttää sivun näkymästä ja palauttaa sen, tämä tehdään silmukassa viisi kertaa. Esimerkistä ei käytännön hyötyä ole.

javascript:document.body.appendChild(document.createElement('script')).src='https://code.jquery.com/jquery-3.5.1.js';for (i = 0; i < 5; i++) { $("body").fadeOut();$("body").fadeIn(); }

 

[Terminal]

Aakkostaminen ja lajittelu niin että lopputulos sisältää vain yhden kutakin kohdetta.
Tämä esimerkki poimii sivulta kaikki linkit, aakkostaa ja lajittelee niin että kutakin linkkiä on vain yksi kappale. Lopputulos näytetään numeroituna listana, kehitystyökalujen "Console" välilehdellä (F12). Tästä on monia versioita selainlaajennoksina, joten voi olettaa löytyvän käyttötarvettakin.

javascript:console.clear();var urls=[];for(var i=document.links.length;i--;){a = document.links[i].href;if (urls.indexOf(a) == -1){urls.push(document.links[i].href)}}urls.sort();for (i = 0; i < urls.length; i++) {console.log(i,urls[i]);}

Spoileri: Lähdekoodi ennen tiivistämistä

/*
* J A V A S C R I P T        17.02.2021
* Tämä skripti pomiin sivulta linkit ja
* tulostaa ne console välilehdelle niin
* että ovat aakkostettuina ja tuplat
* poistettuina.
*
* Jos kokoat tästä sovelluskirjanmerkin
* tiivistä ja lisää etuliite javascript:
*/


console.clear();
var urls=[];

for(var i=document.links.length;i--;){
    a = document.links[i].href;
    if (urls.indexOf(a) == -1){
        urls.push(document.links[i].href)
        };
    };
  
urls.sort();

for(i = 0; i < urls.length; i++){
    console.log(i,urls[i]);
};

 

[Terminal]

Luodaan linkkilista
Tällä esimerkillä luodaan uusi sivu, jolle kirjoitetaan joukko hyödyllisten sivujen linkkejä, linkit avautuvat uuteen ikkunaan. Tämän myötä tarkentuu käsitys sovelluskirjanmerkin maksimipituudesta (2048), koska tätä ei voi laajentaa kuin parilla linkillä. Jonkun verran enemmän saataisiin kohteita mukaan, kun olisi hyödynnetty funktiota linkkien tulostamiseen.

javascript:document.open();document.write('<body style="padding: 20px;">');document.write('<h2>Tutorial kirjanmerkkilista</h2>');document.write('<ul>');document.write('<li><a href="https://bbs.io-tech.fi/help/terms/" target="_blank">Säännöt</a></li>');document.write('<li><a href="https://www.w3schools.com/html/default.asp" target="_blank">HTML Tutorial</a></li>');document.write('<li><a href="https://www.w3schools.com/css/default.asp" target="_blank">CSS Tutorial</a></li>');document.write('<li><a href="https://www.w3schools.com/js/default.asp" target="_blank">JavaScript Tutorial</a></li>');document.write('<li><a href="https://www.w3schools.com/sql/default.asp" target="_blank">SQL Tutorial</a></li>');document.write('<li><a href="https://www.w3schools.com/python/default.asp" target="_blank">Python Tutorial</a></li>');document.write('<li><a href="https://www.w3schools.com/php/default.asp" target="_blank">PHP Tutorial</a></li>');document.write('<li><a href="https://www.w3schools.com/bootstrap/default.asp" target="_blank">Bootstrap 3 Tutorial</a></li>');document.write('<li><a href="https://www.w3schools.com/bootstrap4/default.asp" target="_blank">Bootstrap 4 Tutorial</a></li>');document.write('<li><a href="https://www.w3schools.com/howto/default.asp" target="_blank">W3Schools How To</a></li>');document.write('<li><a href="https://www.w3schools.com/w3css/default.asp" target="_blank">W3.CSS Tutorial</a></li>');document.write('<li><a href="https://www.w3schools.com/jquery/default.asp" target="_blank">jQuery Tutorial</a></li>');document.write('<li><a href="https://www.w3schools.com/java/default.asp" target="_blank">Java Tutorial</a></li>');document.write('<li><a href="#" target="_blank">MORE</a>');document.write('</ul>');document.close();

Spoileri: Lähdekoodi ennen tiivistämistä

/*
* J A V A S C R I P T       18.02.2021
* Tämä skripti avaa uuden dokumentin ja
* luo sivulle linkkilistan. Linkit avaa
* sivunsa uuteen ikkunaan.
*
* Kooltaan tämä lähentelee maksimi
* pituutta sovelluskirjanmerkin
* sisltönä.
*/


document.open();
document.write('<body style="padding: 20px;">');
document.write('<h2>Tutorial kirjanmerkkilista</h2>');
document.write('<ul>');
document.write('<li><a href="https://bbs.io-tech.fi/help/terms/" target="_blank">Säännöt</a></li>');
document.write('<li><a href="https://www.w3schools.com/html/default.asp" target="_blank">HTML Tutorial</a></li>');
document.write('<li><a href="https://www.w3schools.com/css/default.asp" target="_blank">CSS Tutorial</a></li>');
document.write('<li><a href="https://www.w3schools.com/js/default.asp" target="_blank">JavaScript Tutorial</a></li>');
document.write('<li><a href="https://www.w3schools.com/sql/default.asp" target="_blank">SQL Tutorial</a></li>');
document.write('<li><a href="https://www.w3schools.com/python/default.asp" target="_blank">Python Tutorial</a></li>');
document.write('<li><a href="https://www.w3schools.com/php/default.asp" target="_blank">PHP Tutorial</a></li>');
document.write('<li><a href="https://www.w3schools.com/bootstrap/default.asp" target="_blank">Bootstrap 3 Tutorial</a></li>');
document.write('<li><a href="https://www.w3schools.com/bootstrap4/default.asp" target="_blank">Bootstrap 4 Tutorial</a></li>');
document.write('<li><a href="https://www.w3schools.com/howto/default.asp" target="_blank">W3Schools How To</a></li>');
document.write('<li><a href="https://www.w3schools.com/w3css/default.asp" target="_blank">W3.CSS Tutorial</a></li>');
document.write('<li><a href="https://www.w3schools.com/jquery/default.asp" target="_blank">jQuery Tutorial</a></li>');
document.write('<li><a href="https://www.w3schools.com/java/default.asp" target="_blank">Java Tutorial</a></li>');
document.write('<li><a href="#" target="_blank">MORE</a>');
document.write('</ul>');
document.close();

Spoileri: Kuva edellisestä

 

[Terminal]

Käytetään sovelluskirjanmerkkiä verkkosivun uudestaan tyylittelyyn
Käsitykseni mukaan ihmiset uskovat että, siihen on tyytyminen mitä tarjotaan, kun kyse on verkkosivuista, mutta näinhän ei tosiasiassa ole. Tässä esimerkissä tehdään pieniä muutoksia WebVoikko sivun ulkoasuun. Tämä olisi kätevämpi selainlaajennoksena kuin sovelluskirjanmerkkinä, siitä syystä, että muutokset tehtäisiin automaattisesti sivulle mentäessä, nyt muutokset toteutetaan vasta kun klikkaat kirjanmerkkiä.

javascript:document.head.insertAdjacentHTML("beforeend",`<style>body {background-color: #ffffff !important;}.ui-widget-content {border: none !important;}p{display: none !important;}#input {width: 100% !important;max-width: 100% !important;min-height: auto !important;height: 19em !important;font-family: monospace !important;font-size: 14px;padding: 10px;}#result {width: 100%;max-width: -webkit-fill-available !important;font-family: monospace !important;margin-left: 22px;margin-right: 10px;font-size: 14px;padding: 12px;}div.main {padding: 0px !important;color: black !important;background-color: #ffffff !important;}</style>`);

Spoileri: Lähdekoodi ennen tiivistämistä.

/*
* J A V A S C R I P T              19.02.2021
* Tämä skripti uudelleen määrittää  webvoikko
* oikolukusivuston <style> .. </style> tagien
* sisällön.  Tämä tekee  mahdolliseksi löytää
* helpommin "IMPUT" kentästä, "RESULT" kentän
* virheelliseksi merkkaama sanat.  Jos RESULT
* kentässä sana on rivillä 5 ja rivin alusta
* lukien 4 sana, löytyy se samalta paikalta
* myös IMPUT kentästä.
*/


document.head.insertAdjacentHTML("beforeend",`<style>
body {
background-color: #ffffff !important;
}

.ui-widget-content {
border: none !important;
}

p{
display: none !important;
}

#input {
width: 100%  !important;
max-width: 100%  !important;
min-height: auto !important;
height: 19em !important;
font-family: monospace !important;
font-size: 14px;
padding: 10px;
}

#result {
width: 100%;
max-width: -webkit-fill-available !important;
font-family: monospace !important;
margin-left: 22px;
margin-right: 10px;
font-size: 14px;
padding: 12px;
}

div.main {
padding: 0px !important;
color: black !important;
background-color: #ffffff !important;
}
</style>`);

 

[Nigel]

Minulle ei ihan heti tule mieleen mihin tällaisia voisi tarvita. Ehkä joku web scraping -sovellus voisi olla ihan oikeastikin hyödyllinen.

 

[Terminal]

Ehkä joku web scraping -sovellus voisi olla ihan oikeastikin hyödyllinen.

Ei minusta ole "oikeasti hyödyllisen" tekijäksi. Olisiko sinulla mielessä jotain muuta ketjun aiheeseen liittyvää, mitä voisi yrittää.

 

[Zvona]

Itse suosittelisin tutustumaan Greaseonkey / Tampermonkey tyyppisiä User Scriptejä, joita ajella sitten suht. turvallisesti selaimessaan.

Nakuttelin joskus simppelin skriptin, jolla voi "maskata" koko URLin epäluettavaan muotoon. Toimii esimerkiksi XSS-vektoreita hyväksikäytettäessä:

const convert = (s) => s.split('').map((c) => '%'+c.charCodeAt(0).toString(16)).join('');

Eli tuolla saat vaikkapa:
//someTrustworthySite.tld/?reflectedXssRedirectParam=location.assign('evil.com')
muotoon:
//someTrustworthySite.tld/?%72%65%66%6c%65%63%74%65%64%58%73%73%52%65%64%69%72%65%63%74%50%61%72%61%6d%3d%6c%6f%63%61%74%69%6f%6e%2e%61%73%73%69%67%6e%28%27%65%76%69%6c%2e%63%6f%6d%27%29

Toki URL on pitkä, mutta niinhän ne monesti ovat esim. verkkokaupoissa eikä pentti peruskäyttäjä tajua, mistä on kyse

Toinen hyödyllinen on esim. forced download, jota voi käyttää niin hyvään kuin pahaan:

a=document.createElement('a');a.href=`data:application/chrome;base64,dGhpcyBpcyBldmls`;a.download='evil.html';a.click()

 

[Terminal]

a=document.createElement('a');a.href=`data:application/chrome;base64,dGhpcyBpcyBldmls`;a.download='evil.html';a.click()

Yritin muistella mihin tarpeeseen tämä base64 kuvaformaatti oli tarkoitettu, sillä oli joku ihan hyödyllinen ja korvaamaton käyttökohde, mutta eipä se tähän hätään mieleen tullut.

 

[Xiyng]

Yritin muistella mihin tarpeeseen tämä base64 kuvaformaatti oli tarkoitettu, sillä oli joku ihan hyödyllinen ja korvaamaton käyttökohde, mutta eipä se tähän hätään mieleen tullut.

Base64 ei ole kuvaformaatti vaan tapa koodata binäärimuotoista dataa tekstiksi. Käyttökohteena voi olla vaikkapa tilanne, jossa syystä tai toisesta halutaan välittää binäärimuotoista dataa tekstimuodossa. Esimerkiksi HTML-elementtien propertyt lienevät yksi tällainen paikka, joissa ei arvatenkaan ole mahdollista käyttää binääridataa sellaisenaan, vaan se pitää esittää tekstimuodossa.

 

[Terminal]

Tuon toisen ketjun innoittaman tein suotimen Googlen hakutuloksille. Suodin poistaa hakutuloksista sellaiset, jotka eivät sisällä annettua avainsanaa. Suodattaminen muuttuu käänteiseksi kun poistaa tältä riviltä huutomerkin: if ( ! str.includes(a)){. Tätä sovittaen voi tuon toisen ketjun kaveri luoda sivulle painikkeen, jolla joko kysytään kuten tässä, tai suodatetaan tuotteita ennakolta määrätyin avain sanoin. Tällaiseen "hätä" ratkaisuun voi päätyä, kun esim. tietokannan käsittely ei ole varmalla pohjalla, tällä ei voi tietokantaansa sotkea aloittelijakaan. Hyvä sivu testille saattaa olla tämä: for javasript - Google-haku

javascript:var msg = "Kirjoita suotimen avainsana tai osa siitä";var a = prompt(msg, "W3Schools");if (a != null) { var d = document.querySelectorAll("div.g"); for (i = 0; i < d.length; i++) {var str = d[i].innerText;if ( ! str.includes(a)){d[i].style.display = "none";}}}

Spoileri: Lähdekoodi ennen tiivistämistä

/*
* J A V A S C R I P T     17.02.2021
* Tämä skripti suodattaa Google haun
* tuloksia, kysyttyyn avain sanaan
* perustuen. Kaikki ne haun tulokset
* jotka eivät sisällä avain sanaa
* poistetaan.
*
* Jos poistat huutomerkin (!),
* if vertailusta, suodatus muuttuu
* käänteiseksi.
*/


var msg = "Kirjoita suotimen avainsana tai osa siitä";
var a = prompt(msg, "W3Schools");
if (a != null) {
    var d = document.querySelectorAll("div.g");
    for (i = 0; i < d.length; i++) {
        var str = d[i].innerText;
        if ( ! str.includes(a)){
            d[i].style.display = "none";
        }
    }
}

 

[Terminal]

Base64 ei ole kuvaformaatti vaan tapa koodata binäärimuotoista dataa tekstiksi. Käyttökohteena voi olla vaikkapa tilanne, jossa syystä tai toisesta halutaan välittää binäärimuotoista dataa tekstimuodossa. Esimerkiksi HTML-elementtien propertyt lienevät yksi tällainen paikka, joissa ei arvatenkaan ole mahdollista käyttää binääridataa sellaisenaan, vaan se pitää esittää tekstimuodossa.

Joo, minulla on vain niin paljon aikaa, kun tuota asiaa olen viimeksi käsitellyt, on päässyt unohtumaan.

 

[Terminal]

Tein sovelluskirjanmerkin joka laskee ketjun iän vuorokausina, ja katselujen määrän vuorokautta kohti. Mutta en ole varma saako tuollaisen julkaista. Tässä on nyt vain kuvakaappaus, siihen asti kun saan selvää, miten tuon kanssa on. Tämä synty kun rupesin miettimään kuinka vanha tämä ketju jo on.

Tuo ylimääräinen tilastokenttä katoaa sivua vaihtaessa, tai kun painaa F5 näppäintä.