Webben och webbläsare

Utöver terminalen är webbläsaren ett verktyg du kommer att tillbringa mycket tid i. Därför är det värt att lära sig använda den effektivt.

Kortkommandon

Att klicka runt i webbläsaren är ofta inte snabbast. Att bli bekant med vanliga kortkommandon lönar sig på sikt.

Sökoperatorer

Sökmotorer på webben, som Google eller DuckDuckGo, erbjuder sökoperatorer för mer avancerade sökningar:

Mer utförliga listor finns för populära motorer som Google och DuckDuckGo.

Adressfältet

Adressfältet är också ett kraftfullt verktyg. De flesta webbläsare kan härleda sökmotorer från webbplatser och lagrar dem. Genom att redigera nyckelordsargumentet:

Till exempel kan du göra så att y SOME SEARCH TERMS söker direkt på YouTube.

Om du äger en domän kan du dessutom sätta upp vidarebefordran av subdomäner hos din registrar. Jag har till exempel pekat https://ht.josejg.com till kurswebbplatsen. Då kan jag bara skriva ht. så autokompletterar adressfältet. En annan fördel med upplägget är att det, till skillnad från bokmärken, fungerar i alla webbläsare.

Integritetstillägg

Numera kan webbsurfning bli ganska störig på grund av annonser och påträngande spårning. En bra annonsblockerare blockerar inte bara annonsinnehåll, utan kan också blockera suspekta och skadliga webbplatser eftersom de ofta finns i vanliga blocklistor. Ibland förbättras även laddningstider eftersom färre förfrågningar skickas. Några rekommendationer:

Du hittar fler tillägg av den här typen här.

Stilanpassning

Webbläsare är bara ännu en programvara som kör på din maskin, så du har i regel sista ordet om vad de ska visa och hur de ska bete sig. Ett exempel är anpassade stilar. Webbläsare avgör hur en webbsidas stil renderas med Cascading Style Sheets, oftast förkortat CSS.

Du kan komma åt en webbplats källkod genom att inspektera den och ändra innehåll och stilar tillfälligt. (Det är också en anledning till att du aldrig bör lita blint på skärmbilder av webbsidor.)

Om du permanent vill att webbläsaren ska skriva över stilinställningar för en webbplats behöver du ett tillägg. Vår rekommendation är Stylus (Firefox, Chrome).

Vi kan till exempel skriva följande stil för kurswebbplatsen.


body {
    background-color: #2d2d2d;
    color: #eee;
    font-family: Fira Code;
    font-size: 16pt;
}

a:link {
    text-decoration: none;
    color: #0a0;
}

Stylus kan dessutom hitta stilar skrivna av andra användare och publicerade på userstyles.org. Många vanliga webbplatser har till exempel en eller flera mörka teman. Använd däremot inte Stylish, eftersom tillägget visat sig läcka användardata. Läs mer här.

Anpassa funktionalitet

På samma sätt som du kan ändra stil kan du också ändra beteendet hos en webbplats genom att skriva egen JavaScript och ladda den via ett webbläsartillägg som Tampermonkey.

Följande skript aktiverar till exempel vim-liknande navigering med tangenterna J och K.

// ==UserScript==
// @name         VIM HT
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Vim JK for our website
// @author       You
// @match        https://hacker-tools.github.io/*
// @grant        none
// ==/UserScript==


(function() {
    'use strict';

    window.onkeyup = function(e) {
        var key = e.keyCode ? e.keyCode : e.which;

        if (key == 74) { // J is key 74
            window.scrollBy(0,500);;
        }else if (key == 75) { // K is key 75
            window.scrollBy(0,-500);;
        }
    }
})();

Det finns också skriptarkiv som OpenUserJS och Greasy Fork. Men var försiktig: att installera användarskript från andra kan vara mycket farligt, eftersom de i princip kan göra vad som helst, till exempel stjäla dina kortuppgifter. Installera aldrig ett skript om du inte läst hela själv, förstått vad det gör, och är helt säker på att det inte gör något misstänkt. Installera aldrig skript med minifierad eller obfuskerad kod som du inte kan läsa.

Webb-API:er

Det har blivit allt vanligare att webbtjänster erbjuder ett applikationsgränssnitt, alltså ett webb-API, så att du kan interagera med tjänsten via webbförfrågningar. En mer djupgående introduktion finns här. Det finns många publika API:er. Webb-API:er kan vara användbara av många skäl:

function c() {
    url='https://www.google.com/complete/search?client=hp&hl=en&xhr=t'
    # NB: user-agent must be specified to get back UTF-8 data!
    curl -H 'user-agent: Mozilla/5.0' -sSG --data-urlencode "q=$*" "$url" |
        jq -r ".[1][][0]" |
        sed 's,</\?b>,,g'
}

Webbautomatisering

Ibland räcker webb-API:er inte till. Om du bara behöver läsa innehåll kan du använda en HTML-parser som pup eller ett bibliotek, till exempel BeautifulSoup i Python. Men om interaktivitet eller JavaScript-körning krävs räcker de lösningarna inte. Då är WebDriver relevant.

Följande skript sparar till exempel angiven URL i Wayback Machine genom att simulera interaktionen att skriva in webbplatsen.

from selenium.webdriver import Firefox
from selenium.webdriver.common.keys import Keys


def snapshot_wayback(driver, url):

    driver.get("https://web.archive.org/")
    elem = driver.find_element_by_class_name('web-save-url-input')
    elem.clear()
    elem.send_keys(url)
    elem.send_keys(Keys.RETURN)
    driver.close()


driver = Firefox()
url = 'https://hacker-tools.github.io'
snapshot_wayback(driver, url)

Övningar

  1. Redigera en nyckelordsbaserad sökmotor som du använder ofta i webbläsaren.
  2. Installera de nämnda tilläggen. Undersök hur uBlock Origin/Privacy Badger kan inaktiveras för en webbplats. Vilka skillnader ser du? Testa på en webbplats med mycket annonser, som YouTube.
  3. Installera Stylus och skriv en egen stil för kurswebbplatsen med den CSS som ges. Här är några vanliga programmeringstecken: = == === >= => ++ /= ~=. Vad händer med dem när du byter typsnitt till Fira Code? Om du vill veta mer, sök på typsnittsligaturer för programmering.
  4. Hitta ett webb-API för väder i din stad eller region.
  5. Använd en WebDriver-programvara som Selenium för att automatisera en repetitiv manuell uppgift du ofta gör i webbläsaren.

Edit this page.

Licensed under CC BY-NC-SA.