ho costruito una estensione del browser in un weekend e ho imparato più di un anno di tutorial
tech · 2024-03-15 · 6 min
il tutorial mi ha insegnato a mettere un pulsante nella barra degli strumenti. il weekend mi ha insegnato a cosa serve davvero un'estensione.
cosa ho costruito e perché
la cosa che ho costruito era piccola: un pulsante che osserva una pagina alla ricerca di un tipo specifico di informazione e la porta in evidenza senza che io debba cercarla. facevo lo stesso passo manuale tre o quattro volte al giorno da mesi, e avevo finalmente raggiunto il punto in cui la ripetizione gridava più dell'impegno per automatizzarlo.
la prima versione era la cosa più piccola che poteva funzionare. script di contenuto, un messaggio indietro all'estensione, un popup minuscolo. nessuna pagina delle opzioni, nessuna impostazione, nessuna persistenza oltre ciò che il browser offre gratuitamente. l'obiettivo non era costruire un prodotto. l'obiettivo era smettere di fare la cosa a mano.
quel quadro conta. molti tutorial ti insegnano implicitamente a costruire come se lo pubblicherai, come se l'estensione debba essere generale, come se la prima versione sia anche la versione pubblica. è un buon modo per perdere un weekend e finire con nulla. costruisci prima la cosa specifica.
cosa significa davvero l'api delle estensioni
un'estensione non è una pagina web con passi extra. è un piccolo programma che il browser esegue in un contesto che la pagina non può vedere. questo è tutto il vantaggio. uno script nella pagina può leggere la pagina, per lo più. un'estensione può leggere la pagina e anche fare cose che la pagina non può: aggiungere un pulsante nella barra, leggere le schede, memorizzare dati che il sito non può toccare, eseguire in background.
le parti che ho toccato:
- un manifest che dice cos'è l'estensione e cosa chiede
- uno script di contenuto che gira nella pagina e può vedere il dom
- uno script in background, o service worker, che ascolta gli eventi del browser
- un popup o un pulsante di azione che dà all'utente un posto per cliccare
- eventuale storage per piccoli Stati
non è molto superficie. quello che mi ha sorpreso è quanto poco colla ci sia tra le parti una volta accettato il modello. lo script di contenuto e lo script in background non sono nello stesso ambito. si scambiano messaggi. una volta smesso di aspettarmi che condividano variabili, tutta la cosa diventa più semplice.
cosa hanno lasciato fuori i tutorial
i tutorial hanno lasciato fuori le parti che contano solo una volta che hai qualcosa in esecuzione.
la prima è le autorizzazioni. è tentante chiedere un'autorizzazione ampia perché è più facile chiedere una stretta e rivedere in seguito. resistere. un'autorizzazione è una promessa che fai alla persona che installa l'estensione, e le autorizzazioni ampie sono più difficili da giustificare quando la cosa è piccola. chiedi solo ciò che l'estensione ha davvero bisogno.
la seconda è l'attrito degli aggiornamenti. un'estensione non è un sito che distribuisci e dimentichi. l'utente ha una copia installata. quando spingi una nuova versione, il browser deve scaricarla, e l'utente potrebbe dover approvarla a seconda dello store e della piattaforma. questo significa che la prima versione dovrebbe essere vergognosamente piccola, perché la prima versione sarà quella che ti devi spiegare a te stesso quando sei stanco e stai cercando di capire perché il nuovo pulsante non appare.
la terza è il gap tra localhost e installato. molto dello sviluppo di estensioni non è scrivere codice. è ricaricare, ricliccare, rileggere la console in un contesto che non è la console della pagina e nemmeno proprio la console degli strumenti di sviluppo. ho sottostimato quanto del weekend sarebbe stato diagnosticare dove era finito un messaggio.
la quarta è che gli script di contenuto sono isolati per design. vedono la pagina, ma non condividono il contesto javascript con la pagina. questo è bene per l'utente. è leggermente irritante per lo sviluppatore che sperava di raggiungere gli script della pagina e prelevare un valore a mano. ci sono motivi per volerlo e motivi per non volerlo, e i motivi per non volerlo sono solitamente i migliori.
quello che ho imparato e i tutorial non lo dicevano
la prima lezione è che consegnare la versione utile più piccola educa di più rispetto a costruire a metà la versione interessante. avrei potuto passare il weekend a pianificare una cosa più ricca. invece ho passato qualche ora sulla cosa che ha rimosso la ripetizione, e poi qualche ora in più a capire ciò che avevo costruito abbastanza da spiegarmelo a me stesso.
la seconda lezione è che le estensioni dei browser sono uno dei pochi posti in cui un progetto di weekend può essere genuinamente utile a una persona senza fingere di essere utile a tutti. uno strumento che aiuta un flusso di lavoro è ancora uno strumento. non tutto deve generalizzarsi per valere la pena di essere costruito.
la terza lezione è che il browser è una piattaforma più onesta di quanto sembri. il modello delle estensioni è vincolato per design. quel vincolo è il punto. se stai costruendo una cosa che gira nel browser di qualcun altro, sulla macchina di qualcun altro, con un utente che l'ha installata aspettandosi un lavoro specifico, i vincoli non sono un ostacolo da aggirare. sono la forma del lavoro.
la quarta lezione è che debuggare un'estensione è per lo più tracciare i confini. quale parte dell'estensione sta girando, quale no, dove il messaggio ha attraversato da un contesto all'altro, quale autorizzazione è stata davvero concessa, cosa ha rifiutato lo store, cosa ha messo in cache il browser. una volta smesso di cercare un errore logico nella parte del codice che non è mai stata raggiunta, la maggior parte di questi problemi diventa ordinaria.
cosa farei diversamente la prossima volta
iniziare con il manifest e l'insieme di autorizzazioni più piccolo che riesco a giustificare, e non aggiungere un'autorizzazione perché è più facile che pensare al percorso dei messaggi. trattare la prima versione come scartabile per default. testare su una pagina vera prima, non su una pagina rappresentativa che ho costruito per sembrare quella vera.
e ricordare che l'obiettivo non è pubblicare. l'obiettivo è smettere di fare la cosa a mano. se l'estensione lo fa, ha già vinto, anche se nessun altro la installa mai.
per l'automazione lato browser più grande che ha ispirato: prime impressioni di apple intelligence. per la disciplina di una settimana di test alla base della scelta di qualsiasi strumento: testare un prodotto come utente.