Potenziare le funzionalità di un sito con la console JavaScript

La maggior parte dei siti web offre funzionalità predefinite che non sempre soddisfano tutte le esigenze degli utenti. Tuttavia, grazie a JavaScript, è possibile aggiungere funzionalità personalizzate per ottimizzare l'esperienza d'uso, automatizzare operazioni ripetitive e migliorare la produttività.

In questo articolo, vedremo come utilizzare JavaScript per migliorare il sistema di ricerca delle fatture su un noto registar di domini. Inoltre, scopriremo come salvare queste personalizzazioni sotto forma di segnalibro interattivo (bookmarklet), per poterle eseguire con un semplice click in qualsiasi momento.

Il Problema del portale

Il nostro ottimo registar, brillante su molti versi, offre un'interfaccia per consultare e scaricare le fatture relative ai domini registrati. Tuttavia, non fornisce un modo semplice per cercare fatture in base a un dominio specifico. Permette infatti solo di cercare le fatture emesse in un range di date voluto. Questo costringe l'utente a scorrere manualmente la lista delle fatture, aprendo una per una per trovare quelle di interesse.

Grazie a JavaScript, possiamo automatizzare questa ricerca in pochi passaggi, identificando e raccogliendo automaticamente i link alle fatture contenenti un dominio specifico.

La Soluzione con JavaScript

Scrivendo uno script JavaScript, possiamo fare in modo che:

• L'utente inserisca il dominio da cercare in un prompt.
• Il codice analizzi tutte le fatture disponibili sulla pagina.
• Venga visualizzato un elenco con i link diretti alle fatture contenenti il dominio richiesto.

Ecco il codice( di esempio)  che permette ( mel mio caso reale, su quella piattaforma che non nomino)  di fare tutto questo:

(async function() {
    const baseUrl = window.location.origin;
    const expectedDomain = prompt("Inserisci il dominio da cercare (es: example.com)").trim();

    if (!expectedDomain) {
        console.log("❌ Nessun dominio inserito. Script annullato.");
        return;
    }

    console.log(`🔎 Cerco il dominio: ${expectedDomain}`);

    const invoiceLinks = [...document.querySelectorAll("a[href^='Invoice-show-paid.html']")]
        .map(a => a.href)
        .filter(url => !url.includes("&print"));

    const totalInvoices = invoiceLinks.length;
    const foundInvoices = [];

    console.log(`📄 Trovate ${totalInvoices} fatture.`);

    for (let i = 0; i < totalInvoices; i++) {
        let invoiceUrl = invoiceLinks[i];
        console.log(`📄 Analizzando fattura ${i + 1} di ${totalInvoices}: ${invoiceUrl}`);

        const response = await fetch(invoiceUrl);
        const text = await response.text();

        const parser = new DOMParser();
        const doc = parser.parseFromString(text, "text/html");

        let foundDomains = [];
        doc.querySelectorAll("td div[title]").forEach(div => {
            let domain = div.getAttribute("title").trim();
            if (domain && domain !== "email account") {
                foundDomains.push(domain);
            }
        });

        if (foundDomains.includes(expectedDomain)) {
            console.log(`✅ Dominio trovato in questa fattura: ${invoiceUrl}`);
            foundInvoices.push(invoiceUrl);
        }
    }

    console.log("🚀 Operazione completata!");

    if (foundInvoices.length > 0) {
        console.log(`🔎 Il dominio \"${expectedDomain}\" è stato trovato nelle seguenti fatture:`);
        foundInvoices.forEach(link => console.log(link));
        alert(`Il dominio \"${expectedDomain}\" è stato trovato in ${foundInvoices.length} fatture. Controlla la console per i link.`);
    } else {
        alert(`❌ Nessuna fattura trovata per il dominio \"${expectedDomain}\".`);
    }
})();

Non faccio nomi, però se analizzate il codice, degli indizi li trovate.

Testare e Sviluppare con la Console di Google Chrome

Uno strumento essenziale per chi vuole automatizzare operazioni su un sito web è la Console di Google Chrome. La console, accessibile premendo F12 o Ctrl + Shift + J (Cmd + Option + J su Mac), permette di eseguire codice JavaScript direttamente sulla pagina, testare script e monitorare le operazioni in tempo reale.

Utilizzando la console, possiamo incollare e modificare il nostro script JavaScript, verificando subito i risultati senza dover aggiornare la pagina. Questo è particolarmente utile per:

• Stampare messaggi di debug (console.log) e controllare il flusso del codice.
• Visualizzare gli errori (console.error) e identificare eventuali problemi nel codice.
• Interagire con gli elementi della pagina, selezionandoli dinamicamente e modificandoli in tempo reale.
• Monitorare richieste di rete, vedendo quali dati vengono caricati o inviati al server.
• Testare codice prima di inserirlo in un bookmarklet o in un'estensione del browser.

Nel caso dello script per il nostro registrar, la console ci permette di vedere i link delle fatture trovate, verificare quali domini vengono estratti e identificare eventuali problemi nel codice. Se un'operazione non funziona come previsto, possiamo modificare lo script direttamente nella console, correggerlo e lanciarlo senza dover ricaricare la pagina.

Una volta trovata la quadra, passeremo a mettere il nostro codice ottimizzato in un bookmarklet

Usare JavaScript Come Bookmarklet: Un Segnalibro Magico

Per rendere l'esecuzione ancora più semplice, possiamo trasformare questo script in un bookmarklet. Un bookmarklet è un segnalibro speciale che, anziché aprire un sito web, esegue un codice JavaScript direttamente sulla pagina in cui ci troviamo.

Creare un Bookmarklet in Chrome:

• Apri la barra dei segnalibri premendo Ctrl + Shift + B su Windows/Linux o Cmd + Shift + B su Mac.
• Clicca con il tasto destro sulla barra e seleziona "Aggiungi Pagina...".
• Nel campo "Nome", scrivi Cerca Fatture.
• Nel campo "URL", incolla il codice compresso per il bookmarklet.
• Salva il segnalibro.
• Vai sull’interfaccia del registrar, apri la pagina delle fatture e clicca il segnalibro per avviare la ricerca automatica!

La Chicca: ChatGPT per Potenziare i Siti Web

La parte più sorprendente di tutto questo è che puoi costruire strumenti come questo con l’aiuto di ChatGPT! Con un po’ di pazienza, puoi:

• Analizzare un problema su un sito web.
• Passare pezzi di codice HTML e JavaScript a ChatGPT per capire la struttura della pagina.
• Chiedere suggerimenti su come estrarre dati, automatizzare azioni e migliorare il codice.
• Iterare e affinare lo script fino a ottenere la soluzione perfetta!

Grazie all'interazione con ChatGPT, puoi trasformare una limitazione di un sito web in un'opportunità per migliorarlo senza dover aspettare aggiornamenti ufficiali o strumenti di terze parti.

Conclusioni

Grazie a JavaScript, siamo riusciti ad aggiungere una funzionalità assente sull’interfaccia che dovevamo usare, migliorando il processo di ricerca delle fatture. L'uso dei bookmarklet ha reso tutto ancora più semplice, permettendoci di eseguire il codice con un solo click e automatizzare una ricerca altrimenti manuale e ripetitiva.

Tuttavia, questa tecnica non è sempre applicabile a qualsiasi sito web, poiché molto dipende da come i dati sono resi disponibili lato frontend. Se le informazioni sono presenti nel codice HTML o accessibili attraverso richieste di rete, allora è possibile estrarle e automatizzare la gestione con JavaScript.

• Se un sito mostra i dati direttamente nel DOM (Document Object Model), possiamo individuarli e recuperarli tramite query selettive.
• Se le informazioni vengono caricate dinamicamente con JavaScript, potrebbe essere possibile intercettarle tramite tecniche come:
• Selezione di elementi HTML chiave, utilizzando ID, classi o attributi specifici.
• Monitoraggio delle richieste di rete (XHR, Fetch API), per individuare API nascoste che forniscono i dati (anche se non è garantito, perché potrebbero esserci sistemi di sicurezza che impediscono l’accesso).
• Manipolazione del DOM, per estrarre, filtrare e organizzare le informazioni.
• Se invece un sito non espone affatto i dati nel frontend, perché l’elaborazione avviene interamente lato server e i dati non sono visibili nel codice HTML o tramite richieste di rete, l'automazione diventa più complessa. In questi casi, l’unica soluzione possibile potrebbe essere l’uso di un'API ufficiale (se disponibile) o l’accesso diretto al database, portandoci però fuori dall’esempio che abbiamo visto in questo articolo.

In sintesi, anche se non è garantito che ogni sito web permetta questo tipo di automazione, laddove i dati siano accessibili in qualche forma, JavaScript offre la possibilità di estrarli e sfruttarli per semplificare operazioni ripetitive o migliorare la navigazione dell’utente.

Ringraziamenti Speciali

Un grazie sentito a Kumar, dell’assistenza del mio registar preferito, senza il quale questo articolo non sarebbe mai nato... ovvero, se mi avesse risolto il problema, non avrei avuto dovuto arrangiarmi, cercando una soluzione  creativa

Detto ciò, vi voglio comunque bene.