Come creare la tua estensione per Google Chrome

Ti sei mai trovato insoddisfatto delle funzionalità fornite con il tuo browser web? Anche con ore passate a perlustrare il Google Web Store alle spalle, non è sempre una semplice questione di premere "download" per migliorare la tua esperienza di navigazione sul web.

È qui che entrano in gioco le estensioni del browser. In questo articolo, esploreremo il processo di creazione da zero della tua estensione Google Chrome fai-da-te.

Che cos'è un'estensione di Google Chrome?

Moderno browser web come Google Chrome sono dotati di una serie di funzionalità che li rendono facili da usare e in grado di soddisfare le esigenze della maggior parte degli utenti. Tuttavia, l'estensione di queste funzionalità di serie può comportare molti vantaggi diversi. Questo è il motivo per cui gli sviluppatori di browser di solito consentono di creare estensioni, componenti aggiuntivi e plug-in per loro.

Google Chrome offre questa funzione, consentendo a chiunque abbia esperienza di sviluppo web di creare facilmente le proprie estensioni di Chrome. Puoi creare un'estensione utilizzando HTML, JavaScript e CSS, proprio come molti siti Web.

A differenza di un sito Web, le estensioni possono essere eseguite in background durante la navigazione, a volte anche interagendo con i siti che visiti.

Cosa farà la nostra estensione per Google Chrome?

Costruiremo una semplice estensione di Chrome che ti consentirà di visitare il sito Web Make Use Of ed effettuare una ricerca casuale in base alle categorie di articoli trovate sul sito. Questo è un progetto facile e veloce, ma imparerai comunque molto.

Imparerai come farlo

• Crea un'estensione di Google Chrome
• Inserisci il codice personalizzato nelle pagine web utilizzando un'estensione di Chrome
• Crea listener di eventi e simula i clic
• Genera numeri casuali
• Lavora con array e variabili

Costruisci la tua estensione Chrome fai-da-te

Google ha reso sorprendentemente facile creare il tuo Estensioni di Chrome, quindi non ci vorrà molto prima che qualcosa funzioni. Seguire i passaggi seguenti richiederà solo da 10 a 15 minuti, ma ti invitiamo a sperimentare anche il tuo codice.

Passaggio 1: creazione dei file

Puoi archiviare la tua estensione sul tuo computer locale quando non hai intenzione di distribuirla. Abbiamo solo bisogno di creare quattro diversi file per creare la nostra estensione; un file HTML, un file CSS, un file JavaScript e un file JSON.

Abbiamo chiamato i nostri file index.html, style.css, script.js e manifest.json. Il file manifest deve avere questo nome per funzionare correttamente, ma puoi dare agli altri i nomi che preferisci, purché modifichi il tuo codice di conseguenza.

Dovresti mettere questi file nella stessa cartella principale.

Passaggio 2: creazione del file manifest

Il file manifest viene fornito con ogni estensione di Google Chrome. Fornisce informazioni sull'estensione di Chrome e allo stesso tempo mette in atto alcune impostazioni di base. Questo file deve contenere un nome, un numero di versione, una descrizione e una versione manifest. Abbiamo anche incluso le autorizzazioni e un'azione che viene caricata indice.html come il popup visualizzato per l'estensione.

{
"nome": "MakeUseOf.com Ricerca automatizzata",
"versione": "1.0.0",
"descrizione": "Uno strumento di ricerca per trovare articoli interessanti",
"manifest_version": 3,
"autore": "Samuel Garbett",
"permessi": ["Conservazione", "contenuto dichiarativo", "scheda attiva", "scripting"],
"host_permissions": [""],
"azione":{
"default_popup": "indice.html",
"default_title": "MUO Ricerca automatica"
 }
}

Passaggio 3: creazione di HTML e CSS

Prima di poter iniziare a scrivere il nostro script, dobbiamo creare un'interfaccia utente di base utilizzando HTML e CSS. Puoi usare un Libreria CSS come Bootstrap per evitare di crearne uno tuo, ma abbiamo solo bisogno di un paio di regole per la nostra estensione.

Il nostro file index.html contiene tag html, head e body. Il tag head contiene un titolo di pagina e un collegamento al nostro foglio di stile, mentre il body ospita un tag h1, a pulsante che ti porta a MakeUseOf.com e un altro pulsante che useremo come trigger per a sceneggiatura. Un tag di script alla fine del documento include il script.js file.

<html>
<testa>
<titolo>MUO Ricerca automatica</title>
<metacarattere="utf-8">
<collegamento rel="foglio di stile" href="style.css">
</head>
<corpo>
<h1>MUO Ricerca automatica</h1>
<ahref="https://www.makeuseof.com/" obiettivo="_vuoto"><ID pulsante="pulsanteUno">Vai a MakeUseOf.com</button></un>
<ID pulsante="pulsante Due">Avvia ricerca casuale</button>
</body>
<sorgente dello script="script.js"></script>
</html>

Il nostro file CSS è ancora più semplice del nostro HTML, modificando lo stile di soli cinque elementi. Abbiamo regole per i nostri tag html e body, così come per i tag h1 ed entrambi i nostri pulsanti.

html {
 larghezza: 400px;
}
corpo {
 famiglia di caratteri: Helvetica, sans-serif;
}
h1 {
 allineamento testo: centro;
}
#pulsanteUno {
 raggio di confine: 0px;
 larghezza: 100%;
 imbottitura: 10px 0px;
}
#pulsantedue {
 raggio di confine: 0px;
 larghezza: 100%;
 imbottitura: 10px 0px;
 margine superiore: 10px;
}

Passaggio 4: creazione di JavaScript

Come ultimo passaggio di questo processo, è il momento di creare il nostro file script.js.

La prima funzione in questo file, chiamata inserisciScript(), è a posto per inserire l'altra funzione (ricerca automatica()) nella pagina corrente. Questo ci consente di manipolare la pagina e utilizzare le funzionalità di ricerca già presenti sul sito MakeUseOf.com.

Questo è seguito da un listener di eventi che attende fino a quando non viene fatto clic sul pulsante Avvia ricerca casuale prima di chiamare la funzione esplorata in precedenza.

Il ricerca automatica() la funzione è un po' più complicata. Inizia con un array contenente 20 delle categorie sul sito Web MUO, fornendoci un buon campione da cui attingere quando si effettuano le nostre ricerche casuali. Successivamente, utilizziamo il Matematica.casuale() funzione per generare un numero casuale compreso tra 0 e 19 per selezionare una voce dal nostro array.

Con il nostro termine di ricerca in mano, ora dobbiamo simulare un clic di un pulsante per aprire la barra di ricerca MUO. Per prima cosa utilizziamo la console per sviluppatori di Chrome per trovare l'ID del pulsante di ricerca, quindi lo aggiungiamo al nostro codice JavaScript con il clic() funzione.

Come il pulsante di ricerca, dobbiamo anche trovare l'ID della barra di ricerca che appare, consentendoci di inserire il termine di ricerca casuale che abbiamo selezionato. Con questo completo, è sufficiente inviare il modulo per effettuare la nostra ricerca.

// Questa funzione inserisce la nostra funzione di ricerca automatica nel codice della pagina
funzioneinserisciScript() {
// Questo seleziona la scheda focalizzata per l'operazione e passa la funzione di ricerca automatica
 chrome.tabs.query({attivo: VERO, finestra corrente: VERO}, schede => {
cromo.scripting.executeScript({bersaglio: {tabId: schede[0].id}, funzione: ricerca automatica})
 })
// Questo chiude il pop-up dell'estensione per selezionare la barra di ricerca del sito web
finestra.chiudere();
}
// Questo è un listener di eventi che rileva i clic sul nostro "Inizio Casuale Ricercapulsante "
document.getElementById('pulsante Due'.addEventListener('clic', inserisciScript)
// Questa funzione seleziona un argomento casuale da un array e 
funzionericerca automatica() {
// Questo è un array per memorizzare i nostri termini di ricerca
 const searchTerms = ["PC e Mobile", "Stile di vita", "Hardware", "finestre", "Mac",
"Linux", "Androide", "Mela", "Internet", "Sicurezza",
"Programmazione", "Divertimento", "Produttività", "Carriera", "Creativo",
"Gioco", "Social media", "Casa intelligente", "Fai da te", "Revisione"];
// Questo genera un numero casuale compreso tra 0 e 19
permettere numeroselettore = Matematica.pavimento(Matematica.casuale() * 20);
// Utilizza il numero casuale per selezionare una voce dall'array
permettere selezione = searchTerms[selectorNumber];
// Questo simula un clic sull'icona di ricerca del sito web MUO
 document.getElementById("js-ricerca").clic();
// Questo imposta la barra di ricerca del sito web MUO come variabile
var barra di ricerca = documento.getElementById("js-search-input");
// Questo inserisce il nostro termine di ricerca casuale nella barra di ricerca
 searchBar.value = searchBar.value + selezione;
// Questo termina il processo attivando il modulo del sito web
 document.getElementById("modulo di ricerca2").Sottoscrivi();
}

Passaggio 5: aggiunta dei file a Chrome://extensions

Successivamente, è il momento di aggiungere i file appena creati alla pagina delle estensioni di Chrome. Una volta fatto, l'estensione sarà accessibile in Chrome e si aggiornerà ogni volta che apporti modifiche ai tuoi file.

Apri Google Chrome, vai su chrome://extensions e assicurati che il dispositivo di scorrimento Modalità sviluppatore nell'angolo in alto a destra sia in posizione on.

Clic Carica spacchettato nell'angolo in alto a sinistra, quindi scegli la cartella in cui hai salvato i file di estensione e fai clic Seleziona cartella.

Ora che l'estensione è stata caricata, puoi fare clic sull'icona del pezzo del puzzle nell'angolo in alto a destra e aggiungere l'estensione alla barra delle applicazioni principale per un accesso più semplice.

Ora dovresti essere in grado di accedere all'estensione completata all'interno del tuo browser. Vale la pena tenere presente che questa estensione funzionerà solo sul sito Web MUO o sui siti Web con lo stesso ID per il pulsante di ricerca e la barra.

Creazione di un'estensione per Google Chrome

Questo articolo graffia solo la superficie delle possibili funzionalità che potresti integrare nella tua estensione di Google Chrome. Vale la pena esplorare le tue idee dopo aver appreso le basi.

Le estensioni di Chrome possono aiutarti a migliorare la tua navigazione, ma cerca di stare lontano da alcune delle note estensioni losche di Chrome per una navigazione sicura e protetta.

6 estensioni ombrose di Google Chrome da disinstallare al più presto

Leggi Avanti

Circa l'autore