Come creare la tua estensione per Chrome

E se potessi ottenere il massimo dalla tua navigazione? Scopri come creare le tue estensioni di Google Chrome.

Sei mai stato insoddisfatto delle funzioni fornite dal tuo browser web? Anche se hai passato ore a esplorare il Google Online Store, non è sempre così semplice premere "scarica" ​​per migliorare la tua esperienza di navigazione sul web.

È qui che entrano in gioco i componenti aggiuntivi del browser. In questo tutorial, vedremo come creare la tua estensione Google Chrome fai-da-te da zero.

Che cos'è un'estensione di Google Chrome?

I browser moderni, come Google Chrome, includono una miriade di funzionalità che li rendono semplici da usare e in grado di soddisfare le esigenze della maggior parte degli utenti. Tuttavia, l'estensione di queste funzionalità di base potrebbe avere una serie di vantaggi. Questo è il motivo per cui i produttori di browser normalmente consentono la creazione di estensioni, componenti aggiuntivi e plug-in per loro.

Questa funzionalità è disponibile in Google Chrome, consentendo a chiunque abbia conoscenze di programmazione web di creare facilmente le proprie estensioni di Chrome. Come molti siti Web, puoi creare un'estensione con HTML, JavaScript e CSS.

A differenza dei siti Web, le estensioni possono funzionare in background durante la navigazione, a volte anche interagendo con i siti visitati.

Quali funzioni fornirà la nostra estensione di Google Chrome?

Creeremo un'estensione di Chrome di base che ti consentirà di visitare il sito Web Make Use Of ed eseguire una ricerca casuale in base alle categorie di articoli disponibili. Anche se questo è un progetto semplice, imparerai molto.

Scoprirai come fare

• Sviluppa un'estensione di Google Chrome
• Utilizzando un'estensione di Chrome, inserisci il codice personalizzato nelle pagine web.
• Simula i clic creando listener di eventi.
• Produci numeri casuali
• Usa array e variabili.

Crea la tua estensione Chrome fai-da-te

Google ha reso incredibilmente semplice lo sviluppo delle tue estensioni di Chrome, quindi sarai subito operativo. Il completamento delle istruzioni seguenti richiederà solo da 10 a 15 minuti, ma ti invitiamo a sperimentare anche il tuo codice.

Passaggio 1: crea i file

Quando non vuoi condividere la tua estensione, puoi mantenerla sul tuo sistema locale. Per costruire la nostra estensione, abbiamo semplicemente bisogno di quattro file: una pagina HTML, un file CSS, un file JavaScript e un file JSON.

Index.html, style.css, script.js e manifest.json erano i nomi che abbiamo dato ai nostri file. Il file manifest deve avere questo nome per funzionare correttamente, ma gli altri possono avere qualsiasi nome tu scelga purché modifichi il codice di conseguenza.

Questi file devono essere inseriti nella stessa cartella principale.

Passaggio 2: crea il file manifest

Ogni estensione di Google Chrome include un file manifest. Informa Chrome sull'estensione implementando anche alcune impostazioni di base. In questo file devono essere inclusi nome, numero di versione, descrizione e versione manifest. Abbiamo anche fornito le autorizzazioni e un'azione che carica index.html come popup dell'estensione.

 { "name": "MakeUseOf.com Automated Search", "version": "1.0.0", "description": "A search tool to find interesting articles", "manifest_version": 3, "author": "Samuel Garbett", "permissions": ["storage", "declarativeContent", "activeTab", "scripting"], "host_permissions": [""], "action":{ "default_popup": "index.html", "default_title": "MUO Auto Search" } }

Passaggio 3: crea HTML e CSS

Prima di iniziare a codificare il nostro script, dobbiamo prima progettare una semplice interfaccia utente (UI) utilizzando HTML e CSS. Puoi utilizzare una libreria CSS come Bootstrap per evitare di scriverne una tua, ma il nostro componente aggiuntivo richiede solo alcune regole.

I tag HTML, head e body sono tutti presenti nel nostro file index.html. Il tag head ha il titolo della pagina e un link al nostro foglio di stile, mentre il body contiene un tag h1, un link a MakeUseOf.com e un altro pulsante che sarà usato come trigger per uno script. Il file script.js è incluso in un tag di script alla fine del documento.

 <html> <head> <title>MUO Auto Search</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>MUO Auto Search</h1> <a href="https://www.makeuseof.com/" target="_blank"><button>Go to MakeUseOf.com</button></a> <button>Start Random Search</button> </body> <script src="script.js"></script> </html>

Il nostro file CSS è ancora più semplice del nostro file HTML, poiché cambia solo lo stile di cinque componenti. Abbiamo linee guida per i tag html e body, così come i tag h1 ed entrambi i pulsanti.

 html { width: 400px; } body { font-family: Helvetica, sans-serif; } h1 { text-align: center; } #buttonOne { border-radius: 0px; width: 100%; padding: 10px 0px; } #buttonTwo { border-radius: 0px; width: 100%; padding: 10px 0px; margin-top: 10px; }

Passaggio 4: crea il JavaScript

Il passaggio finale di questa procedura è creare il nostro file script.js.

La funzione insertScript() in questo file viene utilizzata per inserire l'altra funzione ( autoSearch() ) nella pagina corrente. Questo ci consente di modificare la pagina e utilizzare le opzioni di ricerca attualmente disponibili sul sito Web MakeUseOf.com.

Questo è seguito da un listener di eventi che attende fino a quando non viene premuto il pulsante Avvia ricerca casuale prima di eseguire la funzione discussa in precedenza.

Il metodo autoSearch() è un po' più complicato. Inizia con un array contenente 20 delle categorie del sito Web MUO, fornendoci un campione decente da cui attingere per eseguire ricerche casuali. Successivamente, utilizziamo la funzione Math.random() per produrre un numero intero casuale compreso tra 0 e 19 per scegliere un elemento dal nostro array.

Ora dobbiamo imitare il clic di un pulsante per aprire la casella di ricerca MUO con la nostra parola di ricerca in mano. Per prima cosa utilizziamo la console per sviluppatori di Chrome per ottenere l'ID del pulsante di ricerca, che poi aggiungiamo al nostro codice JavaScript utilizzando il metodo click() .

 // This method incorporates our autoSearch functionality into the page's code function insertScript() { // This chooses the operation's focused tab and invokes the autoSearch function chrome.tabs.query({active: true, currentWindow: true}, tabs => { chrome.scripting.executeScript({target: {tabId: tabs[0].id}, function: autoSearch}) }) // This closes the extension pop-up window that allows you to pick the website search bar window.close(); } // This is an event listener that detects when our "Start Random Search" button is clicked document.getElementById('buttonTwo').addEventListener('click', insertScript) // This code chooses a topic at random from an array and function autoSearch() { // This is an array in which we will store our search keywords const searchTerms = ["PC and Mobile", "Lifestyle", "Hardware", "Windows", "Mac", "Linux", "Android", "Apple", "Internet", "Security", "Programming", "Entertainment", "Productivity", "Career", "Creative", "Gaming", "Social Media", "Smart Home", "DIY", "Review"]; // This creates a number between 0 and 19 at random let selectorNumber = Math.floor(Math.random() * 20); // The random number is used to choose an element from the array let selection = searchTerms[selectorNumber]; // This mimics clicking on the MUO website search button document.getElementById("js-search").click(); // This variables the MUO website search bar var searchBar = document.getElementById("js-search-input"); // This enters our arbitrary search query into the search field searchBar.value = searchBar.value + selection; // The process is completed by activating the online form document.getElementById("searchform2").submit(); }

Passaggio 5: caricamento di file su Chrome:/estensioni

I file che hai appena prodotto dovrebbero ora essere aggiunti alla pagina delle estensioni di Chrome. Successivamente, l'estensione sarà disponibile in Chrome e si aggiornerà automaticamente ogni volta che apporti modifiche ai tuoi file.

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

Fai clic su Carica decompresso nell'angolo in alto a sinistra, quindi seleziona la cartella contenente i file di estensione e fai clic su Seleziona cartella .

Una volta caricata l'estensione, fai clic sull'icona del pezzo del puzzle nell'angolo in alto a destra per fissarla sulla barra delle applicazioni principale per un accesso più rapido.

Ora dovresti essere in grado di vedere l'estensione finita nel tuo browser. È importante notare che questa estensione funzionerà solo sul sito Web MUO o sui siti Web che utilizzano lo stesso ID per il pulsante di ricerca e la barra.

Creazione di un'estensione di Google Chrome

Questo post tocca semplicemente la superficie delle funzionalità che potresti incorporare nella tua estensione di Google Chrome. Una volta che hai imparato i fondamenti, vale sicuramente la pena dedicare del tempo a sperimentare le tue idee.

Le estensioni di Chrome possono aiutarti a migliorare la tua esperienza di navigazione, ma evita alcune delle note estensioni di Chrome imprecise per un'esperienza online sicura.