Sovelluskirjanmerkkit

Liittynyt
28.04.2020
Viestejä
29
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:
javascript:document.body.contentEditable = true; document.designMode="on"; void 0
MUOKKAUS POIS
JavaScript:
javascript:document.body.contentEditable = false; document.designMode="off"; void 0
 
Viimeksi muokattu:
Liittynyt
28.04.2020
Viestejä
29
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.

Valinta_299.png


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.
 
Viimeksi muokattu:
Liittynyt
28.04.2020
Viestejä
29
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() + '"';
 
Viimeksi muokattu:
Liittynyt
28.04.2020
Viestejä
29
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(); }
 
Liittynyt
28.04.2020
Viestejä
29
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]);}

JavaScript:
/*
* 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]);
};
 
Viimeksi muokattu:
Liittynyt
28.04.2020
Viestejä
29
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();
JavaScript:
/*
* 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();
about:blank - Chromium_301.png
 
Viimeksi muokattu:
Liittynyt
28.04.2020
Viestejä
29
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>`);
JavaScript:
/*
* 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>`);
 
Liittynyt
23.10.2016
Viestejä
544
Minulle ei ihan heti tule mieleen mihin tällaisia voisi tarvita. Ehkä joku web scraping -sovellus voisi olla ihan oikeastikin hyödyllinen. :rolleyes:
 
Liittynyt
28.04.2020
Viestejä
29
Ehkä joku web scraping -sovellus voisi olla ihan oikeastikin hyödyllinen. :rolleyes:
Ei minusta ole "oikeasti hyödyllisen" tekijäksi. :notworthy: Olisiko sinulla mielessä jotain muuta ketjun aiheeseen liittyvää, mitä voisi yrittää.
 
Viimeksi muokattu:
Liittynyt
18.10.2016
Viestejä
230
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ä:
JavaScript:
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:
JavaScript:
a=document.createElement('a');a.href=`data:application/chrome;base64,dGhpcyBpcyBldmls`;a.download='evil.html';a.click()
 
Liittynyt
28.04.2020
Viestejä
29
JavaScript:
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.
 
Liittynyt
19.10.2016
Viestejä
1 345
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.
 
Liittynyt
28.04.2020
Viestejä
29
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";}}}
JavaScript:
/*
* 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";
        }
    }
}
 
Liittynyt
28.04.2020
Viestejä
29
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. :hmm:
 
Liittynyt
28.04.2020
Viestejä
29
Valinta_307.pngTein 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ä.
 
Viimeksi muokattu:
Toggle Sidebar

Statistiikka

Viestiketjut
120 442
Viestejä
2 370 438
Jäsenet
47 919
Uusin jäsen
VeheL

Hinta.fi

Ylös Bottom