Se utilizzi Google Chrome, è probabile che tu abbia già sperimentato alcune delle sue estensioni per migliorare l'esperienza di navigazione.
Ma hai mai pensato di crearne una tutta tua? Non è così complesso come potrebbe sembrare, e con questa semplice guida scoprirai passo dopo passo come dare vita alla tua prima estensione per Chrome, partendo da zero.
Qui trovi una struttura di base funzionante per la gestione dei preferiti e la protezione con PIN, pronta per essere personalizzata secondo le tue necessità .
A cosa serve il gestore di preferiti con PIN?
Un'estensione come questa è utile se desideri organizzare i tuoi segnalibri in cartelle personalizzate e, al contempo, proteggere determinati collegamenti tramite un codice PIN.
Questo può essere utile se condividi il browser con altri e vuoi evitare che possano accedere a preferiti privati.
Quindi l'obbiettivo è la privacy aggiungendo un livello di sicurezza nascondendo i contenuti che preferisci non siano visibili a tutti.
Struttura del progetto: Iniziamo creando cartelle e file
Se sei pronto/a, iniziamo subito. Ti serviranno solo pochi file ma prima di tutto, crea una cartella vuota in cui aggiungere JSON, HTML, CSS, JavaScript e la icona personalizzata. Segui i passaggi qui sotto per iniziare:
1) Crea una cartella del progetto: Avvia Esplora file in Windows, naviga nella posizione in cui desideri salvare l'estensione e crea una nuova cartella chiamata, ad esempio, Bookmarks Pin.
2) Apri Notepad: Usiamo Notepad per copiare e incollare il codice, e successivamente rinominare i file con le estensioni appropriate.
3) All'interno della cartella Bookmarks Pin, creeremo 4 file:
manifest.json: descrive le informazioni principali dell'estensione.
popup.html: struttura dell'interfaccia grafica.
popup.js: contiene il codice per la logica e la gestione dei dati.
styles.css: gestisce la grafica e l'aspetto del layout dell'estensione.
Crea il file manifest.json
4) Copia il seguente testo nel Blocco note:
{
"manifest_version": 3,
"name": "Bookmark Manager con pin",
"version": "1.0",
"description": "Un gestore di preferiti con cartelle protette da PIN.",
"permissions": ["storage"],
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
}
}
}
5) Salva il file con il nome manifest.txt e poi rinomina l'estensione in .json, ottenendo manifest.json.
"manifest_version": 3 indica la versione dell'API Chrome Extensions utilizzata.
"permissions": ["storage"] consenti all'estensione di usare l'archiviazione locale di Chrome.
"default_popup": "popup.html" definisce quale file HTML viene visualizzato nel popup dell'estensione.
Crea file HTML
Questo file costruisce l'interfaccia dell'estensione. Crea un nuovo file nel Blocco note e incolla il codice seguente:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bookmark Manager con pin</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h2><i class="fas fa-star"></i> Gestione Preferiti</h2>
<p>Offerto da <a href="https://www.tantilink.net" target="_blank">TantiLink</a></p>
<button id="theme-toggle"><i class="fas fa-moon"></i> Modalità Giorno/Notte</button>
<!-- Form per aggiungere una nuova cartella -->
<form id="add-folder-form">
<input type="text" id="folder-name" placeholder="Nome Cartella" required>
<input type="password" id="folder-pin" placeholder="PIN (opzionale)">
<button type="submit"><i class="fas fa-folder-plus"></i> Aggiungi Cartella</button>
</form>
<ul id="bookmarks-list"></ul>
</div>
<script src="popup.js"></script>
</body>
</html>
6) Salva come popup.txt e posizionalo nella cartella dell'estensione.
L'HTML utilizza due form, uno per aggiungere le cartelle e l'altro per salvare i preferiti. Ogni preferito è aggiunto alla lista ul id="bookmarks-list".
I pulsanti, gli input e gli elementi vengono collegati a popup.js per gestire le funzioni.
Crea file CSS
Crea ora un file CSS per definire l'aspetto dell'interfaccia dell'estensione. Usa questo codice per iniziare:
body {
font-family: 'Roboto', sans-serif;
background-color: #f9f9f9;
margin: 0;
padding: 20px;
min-width: 530px;
max-width: 100%;
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
}
/* Stile per il pulsante tema */
#theme-toggle {
background-color: #1E90FF;
color: white;
border: none;
padding: 10px;
font-size: 14px;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
#theme-toggle i {
margin-right: 6px; /* Spazio tra l'icona e il testo */
}
#theme-toggle:hover {
background-color: #104e8b;
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Aumenta la profondità al passaggio del mouse */
}
form {
display: flex;
flex-direction: column;
gap: 8px; /* Spazio tra i campi */
width: 100%;
}
input[type="text"], select {
padding: 10px;
font-size: 16px;
width: 100%;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 8px; /* Spazio sotto i campi */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Effetto di profondità */
transition: box-shadow 0.3s ease;
}
input[type="text"]:focus, select:focus {
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Aumenta la profondità al focus */
}
button {
background-color: #1E90FF;
color: white;
border: none;
padding: 6px 12px;
font-size: 15px;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
width: 40%;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Effetto di profondità */
}
button:hover {
background-color: #104e8b;
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Aumenta la profondità al passaggio del mouse */
}
/* Preferiti */
ul {
list-style-type: none;
padding: 0;
margin-top: 10px;
}
li {
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 0;
border-bottom: 1px solid #ddd;
}
li img {
margin-right: 10px;
}
li a {
flex-grow: 1;
color: #1E90FF;
text-decoration: none;
font-size: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
li a:hover {
text-decoration: underline;
}
/* Modalità Scura */
body.dark-mode {
background-color: #333;
color: white;
}
body.dark-mode input[type="text"],
body.dark-mode select {
background-color: #444;
color: white;
border: 1px solid #555;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); /* Ombra più scura in modalità notte */
}
body.dark-mode button {
background-color: #555;
}
body.dark-mode button:hover {
background-color: #444;
}
body.dark-mode a {
color: #00bfff;
}
body.dark-mode li {
border-bottom: 1px solid #555;
}
7) Salva come styles.txt e posizionalo sempre nella cartella dell'estensione.
Lo stile dark-mode cambia il tema della pagina. Gli elementi come pulsanti e input sono formattati per facilitare la lettura e l'interazione. Se i colori scelti da me non ti piacciono, usa il mio generatore e convertitore di colori online.
Crea file JavaScript
Ok. Ora scriviamo insieme il file JavaScript che gestisce tutta la logica per aggiungere e visualizzare preferiti e cartelle. Ecco il codice completo:
document.addEventListener('DOMContentLoaded', function() {
const addFolderForm = document.getElementById('add-folder-form');
const addBookmarkForm = document.getElementById('add-bookmark-form');
const folderSelect = document.getElementById('folder-select');
const bookmarksList = document.getElementById('bookmarks-list');
let folders = [];
let bookmarks = [];
chrome.storage.local.get(['folders', 'bookmarks'], function(data) {
if (data.folders) {
folders = data.folders;
populateFolderSelect();
}
if (data.bookmarks) {
bookmarks = data.bookmarks;
}
});
function populateFolderSelect() {
folderSelect.innerHTML = '';
folders.forEach(folder => {
const option = document.createElement('option');
option.value = folder.id;
option.textContent = folder.name;
folderSelect.appendChild(option);
});
}
// Aggiungi una nuova cartella con PIN
addFolderForm.addEventListener('submit', function(e) {
e.preventDefault();
const folderName = document.getElementById('folder-name').value;
const folderPin = document.getElementById('folder-pin').value;
if (folders.some(folder => folder.name === folderName)) {
alert('Una cartella con questo nome esiste già !');
return;
}
const newFolder = {
id: Date.now().toString(),
name: folderName,
pin: folderPin || null // Salva il PIN solo se è stato inserito
};
folders.push(newFolder);
chrome.storage.local.set({ folders: folders });
populateFolderSelect();
addFolderForm.reset();
});
// Aggiungi un nuovo preferito
addBookmarkForm.addEventListener('submit', function(e) {
e.preventDefault();
const title = document.getElementById('bookmark-title').value;
let url = document.getElementById('bookmark-url').value.trim();
const folderId = folderSelect.value;
if (!url) {
alert('Inserisci un URL.');
return;
}
if (!url.startsWith('http://') && !url.startsWith('https://')) {
alert('Inserisci un URL valido che inizi con "http://" o "https://".');
return;
}
try {
new URL(url);
} catch (_) {
alert('Inserisci un URL valido.');
return;
}
const newBookmark = {
id: Date.now().toString(),
title: title,
url: url,
folderId: folderId
};
bookmarks.push(newBookmark);
chrome.storage.local.set({ bookmarks: bookmarks });
displayBookmarks();
addBookmarkForm.reset();
});
// Funzione per visualizzare i preferiti della cartella selezionata
function displayBookmarks() {
bookmarksList.innerHTML = '';
const selectedFolderId = folderSelect.value;
const selectedFolder = folders.find(folder => folder.id === selectedFolderId);
// Richiede il PIN se la cartella è protetta
if (selectedFolder && selectedFolder.pin) {
const enteredPin = prompt("Questa cartella è protetta. Inserisci il PIN:");
if (enteredPin !== selectedFolder.pin) {
alert("PIN non corretto!");
return;
}
}
const filteredBookmarks = bookmarks.filter(bookmark => bookmark.folderId === selectedFolderId);
if (filteredBookmarks.length === 0) {
bookmarksList.innerHTML = 'Nessun preferito in questa cartella. ';
return;
}
filteredBookmarks.forEach(bookmark => {
const li = document.createElement('li');
const link = document.createElement('a');
const img = document.createElement('img');
const removeButton = document.createElement('button');
const faviconUrl = `https://www.google.com/s2/favicons?domain=${new URL(bookmark.url).hostname}`;
img.src = faviconUrl;
img.alt = 'Favicon Preview';
img.style.width = '16px';
img.style.height = '16px';
img.style.marginRight = '5px';
link.href = bookmark.url;
link.textContent = bookmark.title;
link.target = '_blank';
link.style.display = 'inline-flex';
link.style.alignItems = 'center';
removeButton.textContent = 'Rimuovi';
removeButton.style.marginLeft = '10px';
removeButton.addEventListener('click', function() {
bookmarks = bookmarks.filter(b => b.id !== bookmark.id);
chrome.storage.local.set({ bookmarks: bookmarks });
displayBookmarks();
});
li.appendChild(img);
li.appendChild(link);
li.appendChild(removeButton);
bookmarksList.appendChild(li);
});
}
// Gestione del cambiamento della cartella selezionata
folderSelect.addEventListener('change', function() {
displayBookmarks();
});
// Funzione per rimuovere una cartella
function removeFolder(folderId) {
folders = folders.filter(folder => folder.id !== folderId);
bookmarks = bookmarks.filter(bookmark => bookmark.folderId !== folderId);
chrome.storage.local.set({ folders: folders, bookmarks: bookmarks });
populateFolderSelect();
displayBookmarks();
}
const removeFolderButton = document.createElement('button');
removeFolderButton.textContent = 'Rimuovi Cartella';
removeFolderButton.addEventListener('click', function() {
const selectedFolderId = folderSelect.value;
removeFolder(selectedFolderId);
});
document.body.appendChild(removeFolderButton);
const themeToggleButton = document.getElementById('theme-toggle');
const currentTheme = localStorage.getItem('theme');
if (currentTheme === 'dark') {
document.body.classList.add('dark-mode');
themeToggleButton.textContent = 'Modalità Giorno';
}
themeToggleButton.addEventListener('click', function() {
document.body.classList.toggle('dark-mode');
if (document.body.classList.contains('dark-mode')) {
themeToggleButton.textContent = 'Modalità Giorno';
localStorage.setItem('theme', 'dark');
} else {
themeToggleButton.textContent = 'Modalità Notte';
localStorage.removeItem('theme');
}
});
});
8) Salva il file come popup.txt nella cartella del progetto
Se hai eseguito correttamente tutti i passi descritti qui per creare questa semplice estensione per Google Chrome, dovresti avere adesso 4 file dentro la cartella "Bookmarks Pin" o con un nome a tua scelta: manifest.txt, popup.txt, styles.txt e popup.txt.
9) Per funzionare, rinomina tutti i file come segue: il primo diventa manifest.json, il secondo popup.html, il terzo styles.css e l'ultimo popup.js.
10) Bene. Dopo quest'ultimo passaggio fondamentale, dobbiamo ora aggiungere le icone .png della nostra estensione preferiti Chrome con Pin, così saremo pronti per testarla.
Quindi, dopo aver scelto l'icona di tuo gradimento, essenziale per rappresentarla graficamente all'interno del browser, dovrai farne tre copie con dimensioni differenti per adattarsi a contesti e risoluzioni diverse.
Una 16x16 px utilizzata dalla barra degli strumenti di Chrome,
una 48x48 px visibile nella pagina delle estensioni (chrome://extensions/) quando l'utente consulta i dettagli di quest'ultima,
una da 128x128 px richiesta per il Chrome Web Store, dove l'icona viene mostrata in una dimensione più grande per rappresentare visivamente l'estensione, anche se a noi non interessa per il momento.
Prova dell'Estensione bookmarks con PIN
Finito! Possiamo testare il corretto funzionamento.
Apri Chrome e vai all'indirizzo chrome://extensions (oppure clicca i tre puntini ⁝ in alto a destra > Estensioni > Gestisci estensioni).
Attiva la Modalità sviluppatore (pulsante in alto a destra).
Seleziona Carica estensione non pacchettizzata.
L'estensione apparirà nella lista delle estensioni installate. Clicca sull'icona per aprire il popup e provare a creare cartelle con pin (o senza) e lista preferiti.
Per oggi è tutto. Grazie per aver seguito questa piccola guida! Se hai riscontrato problemi e non sai cosa fare o notato qualche errore nelle mie istruzioni, lascia un commento qui sotto: il tuo feedback è molto prezioso.
Se non sei riuscito/a a far funzionare l'estenzione, scarica una copia funzionante dal servizio mega.nz, sostituendo le icone. Se la guida ti è stata utile, condividila con amici o parenti.
Leggi anche: Come creare da zero temi Chrome personalizzati
Nessun commento:
Posta un commento
Per commentare potete usare un account Google / Gmail. Si prega di non inserire link cliccabili nei vostri commenti. Il vostro intervento dovrà essere il più pertinente possibile all'articolo in questione. Seleziona "Inviami notifiche" per ricevere via email un avviso di risposta.