Natřete to webům

Natřete to webům aneb co si zkusit nabarvit cizí web na červeno nebo do něj přidat vlastní funkce…?

Pavel Kříž

DEN OTEVŘENÝCH DVEŘÍ FIM Z čeho se skládá webová stránka

 Webová stránka (jeden „dokument“)

 Skládá se z HTML elementů

 Elementy dohromady tvoří strom (podobná struktura jako složky na disku)

 Obsahuje/odkazuje kaskádové styly – CSS

 Pravidla říkající, jak má který element ve stránce vypadat a jak má být umístěn

 Obsahuje/odkazuje skript(y) v jazyce JavaScript (ECMAScript)

 „Oživují“ stránku (interaktivní prvky, dodatečné stažení dalších dat, atd.)

 V principu mohou s manipulovat celou stránkou

DEN OTEVŘENÝCH DVEŘÍ FIM Jak si to všechno prohlédnout

 V Chrome přes pravé tlačítko myši na nějakém místě ve stránce a volbu prozkoumat

 Zobrazí se Vývojářské nástroje

 Dozvíme, jak je nastylován daný element

 Vývojářské nástroje lze zobrazit i pomocí kláves F12 nebo Ctrl-Shift-i

DEN OTEVŘENÝCH DVEŘÍ FIM DEN OTEVŘENÝCH DVEŘÍ FIM Spouštíme vlastní kód v JavaScriptu

 Na záložce „Console“ je možné zadat příkaz v JS, který se v „v rámci stránky“ provede

 Příklady: Mění styl

alert("Pokus") document.body.style.backgroundColor="red" document.querySelector(".bigPrice").innerHTML = "Ahoj!"

CSS selektor HTML elementu Mění obsah elementu v HTML

 Pozor, úpravy vidíme jen my a jen do znovu-načtení stránky

DEN OTEVŘENÝCH DVEŘÍ FIM Jak změnit web trvale?

 Pro trvalé změny webu (v našem prohlížeči!) budeme potřebovat nějaké rozšíření pro webový prohlížeč:

 Tampermonkey (Chrome, FF, Edge,…) – skripty, CSS

(Firefox) – skripty, CSS

(Chrome, Firefox,…) – CSS

 Nainstalujeme z Internetového obchodu Chrome

 K dispozici už hotové úpravy pro známé weby (na skripty pozor! mohou vám např. ukrást Facebook účet)

 Možnost uložit si v prohlížeči vlastní skript, který se spustí vždy pro vybraný web

DEN OTEVŘENÝCH DVEŘÍ FIM Vytvoření Tampermonkey skriptu

 Naistalovat Tampermonkey do Chrome

 Ikona na liště vpravo nahoře v Chrome

 Tlačítko Přidat nový skript…

// ==UserScript== // @name New Userscript // @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world! Upravit „předponu“ // @author You stránek // @match https://www.alza.cz/* // @grant none // ==/UserScript==

(function() { Sem napíšeme JS kód, který 'use strict'; se provede na stránkách

// Your code here... })(); DEN OTEVŘENÝCH DVEŘÍ FIM Jak psát speciální symboly

 Speciální symboly na české QWERTZ klávesnici:

 Středník ; – před klávesou 1

 Složené závorky { } – pravý Alt + B, pravý Alt + N

 Křížek # – pravý Alt + X

 atd… (viz obrázek)

DEN OTEVŘENÝCH DVEŘÍ FIM Praktický příklad

// ==UserScript== // @name New Userscript // @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world! // @author You // @match https://www.alza.cz/* Element s cenou // @grant none // ==/UserScript== „Nadpis“ stránky (obsahuje Zakódujeme název (function() { název produktu) produktu 'use strict';

var h1 = document.querySelector("h1"); var priceElement = document.querySelector(".bigPrice"); var encodedName = encodeURIComponent(h1.textContent.trim()); priceElement.innerHTML = '' + priceElement.textContent + ''; Vytvoříme odkaz na Heureku a })(); vložíme jej místo cenovky

 Uložíme skript pomocí tlačítka Uložit

DEN OTEVŘENÝCH DVEŘÍ FIM Praktický příklad (pokrač.)

 Vrátíme se na stránku webu načteme stránku znovu (F5 nebo Ctrl-R), aby se skript spustil (poprvé)

 Upravit existující skript v Tampermonkey lze pomocí tlačítka Řídící panel

 Naučte se JavaScript , dnes se v něm píší celé webové aplikace

DEN OTEVŘENÝCH DVEŘÍ FIM