<ForrigeUke uke="39" år="2025" />

Utvikling

Publisert:30. september

Chrome har kommet med en MCP som lar AI styre nettleseren din, og Sara Soueidan viser oss hvordan vi kan gi alternativ tekst til CSS-generert innhold – i denne ukas ForrigeUke.

Dette var uka for farlige eksperimenter 🚀🙀, gode sikkerhetstips 🔐 – og 922 ting skjedde i frontend-verdenen.

«<ForrigeUke /> er en artikkelserie som oppsummerer hva som skjedde i frontend-verden i uken som var.»

Chrome gir AI øyne i nettleseren 👀

Tirsdag forrige uke kom Chrome ut med en preview på DevTools MCP. Kort forklart er en MCP en felles protokoll for hvordan AI applikasjoner/agenter kan snakke med tjenester. Chromes DevTools MCP er da altså en integrasjon AI kan bruke for å interagere med nettleseren din!

Gi Claude Code prompten "Can you do a performance analysis on https://bekk.no. Give me suggestions on what the most impactful changes I can make are." - og plutselig starter Claude en hel Chrome-instans via MCP, analyserer og finner ting vi kan forbedre!

Skjermbilde av en nettleser og en terminal. Nettleseren, Google Chrome, har bekk.no som aktiv fane, og det vises en banner med teksten "Chrome kontrolleres av programvare for automatisk testing.". I terminalen kjøres programmet Claude Code. Her er det masse forslag til hvordan ytelsen til bekk.no kan forbedres. — Gi Claude Code prompten "Can you do a performance analysis on https://bekk.no. Give me suggestions on what the most impactful changes I can make are." - og plutselig starter Claude en hel Chrome-instans via MCP, analyserer og finner ting vi kan forbedre!

Er du som meg og lager webapplikasjoner betyr dette i praksis at du nå kan be din favoritt kodeagenten om å verifisere endringer den gjør i kodebasen din direkte i brukergrensesnittet, debugge ytelses- eller nettverksproblemer, simulere brukerinteraksjon, og mye, mye mer! Ønsker du at Claude Code skal lage et skjema i applikasjonen din, kan Claude nå også fylle ut og sende inn skjemaet for å verifisere at alt fungerer som forventet 🔥

På GitHuben til Chrome DevTools MCP finnes instruksjoner for å komme i gang, og det var lekende lett! Teamet bak har publisert MCP-serveren som en NPM-pakke. I Claude Code var det for eksempel så enkelt som å kjøre:

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

Og, voilà, så er du i gang!

Hvis du syntes dette hørtes kult ut, og vil lære litt mer, sjekk ut Addy Osmanis artikkel om hvordan de lagde MCP-en!

addyosmani.com

Give your AI eyes: Introducing Chrome DevTools MCP

Chrome DevTools MCP is a newly announced tool that allows AI coding assistants to **see and interact with a live Chrome browser

Nord-øst pil. Trekantet flagg på stolpe.

Visste du at CSS ikke bare kan brukes til å style'e nettsider, men også legge til innhold. Et vanlig eksempel på dette er å legge til en "↗" (nord-øst pil som den ofte refereres til) på lenker som lenker til eksterne kilder:

a.external::after {
    content: " \2197" ; /* ↗ = North East Arrow */
}

Men, har du noen gang tenkt over hvordan det blir for skjermleserbrukere? Lager jeg en lenke med denne stilen til "Mitt kule nettsted", så vil en skjermleser lese opp dette som "Mitt kule nettsted nord-øst pil". Ganske forvirrende, ikke sant? Et annet morsomt eksempel er at emojien "🚩" (rødt flagg) ofte leses opp som "trekantet flagg på stolpe". Ikke akkurat dekkende for måten emojien vanligvis brukes på, å illustrere at noe eller noen har problematiske trekk, eller et så kalt "red flag". Det finnes mange feller å gå i når det kommer til bruk av unicode-bokstaver, som emojis er. Hvordan kan vi gi skjermleserbrukere den samme konteksten som seende-brukere.

Det har heldigvis Sara Soueidan svaret på! Hun har nemlig skrevet litt om hvordan du kan gi alternativ-tekst til CSS-generert innhold, som eksempelet med nord-øst pilen over. Ikke nok med det, her går Sara godt ned i dybden for å forklare hvordan skjermlesere tolker slikt innhold. Visste du for eksempel at before og after content i CSS legges på før og etter innholdet, uten mellomrom. Ikke helt tilfeldig at eksempelet over hadde mellomrom før nord-øst pilen, akkurat. Bruker du CSS-generert innhold bør du definitivt lese denne artikkelen!