Üdv a digitális útkereszteződésnél, ahol a hatékonyság találkozik a személyre szabással! Ha valaha is azon kaptad magad, hogy újra és újra ugyanazokat a sitemap URL-eket kopírozod és illeszted be, vagy épp bosszankodva keresgéled egy-egy projekt oldaltérképét, akkor jó helyen jársz. Ez a cikk egy olyan megoldást kínál, ami nem csupán időt spórol, de a munkádat is gördülékenyebbé teszi: egy saját, custom Chrome bővítményt a gyakran használt sitemap-ek eléréséhez.
Képzeld el, hogy nem kell többé külön fülön megnyitni a Google Search Console-t, vagy az Excel táblázatot böngészni a szükséges XML fájl címéért. Ehelyett egyetlen kattintással előugrik a kedvenc webhelytérképeid listája, és máris mehetsz is arra, amelyikre szükséged van. Ez nem álom, hanem valóság, és meglepően egyszerű megvalósítani, még akkor is, ha a programozási tapasztalatod még gyerekcipőben jár!
Miért Pont egy Custom Bővítmény? Az Egyedi Megoldások Előnye ✨
Lehet, hogy most azt gondolod: „De hát van már erre ezer meg egy eszköz!” Igaz, léteznek böngésző kiegészítők, amelyek sitemap-ekkel kapcsolatos funkciókat kínálnak, de ezek szinte sosem pont azt tudják, amire neked specifikusan szükséged van. Gyakran túl sok funkciót zsúfolnak bele, amik sosem kellenek, vagy épp a legfontosabb hiányzik. Egy egyénileg fejlesztett plugin pont erre ad választ: pontosan azt fogja tudni, amit akarsz, és semmi olyat, amire nincs szükséged. Ez a testre szabhatóság kulcsfontosságú az igazi hatékonysághoz.
Képzelj el egy olyan eszközt, amit te magad építesz fel. Ez a folyamat nemcsak hasznos, de hihetetlenül tanulságos is. Megértheted a Chrome kiegészítők működését, és egyben megoldhatsz egy valós problémát, ami téged – vagy akár a csapatodat – is érint. A cél, hogy a gyakori sitemap elérés sose okozzon többé fejtörést, hanem egy villámgyors rutinná váljon.
Mire Lesz Szükségünk? Az Alapok Letétele 🛠️
Mielőtt belevágnánk a kódolásba, nézzük meg, mi minden kell ehhez a projekthez. Spoiler: nem sok!
- Alapvető HTML, CSS és JavaScript ismeretek: Ne ijedj meg, nem kell profi fejlesztőnek lenned! Egy-egy egyszerű HTML elem, minimális CSS stílus és néhány JavaScript függvény megírása bőven elegendő lesz. Ha valaha is láttál már ezekből kódot, máris előnyben vagy.
- Egy szövegszerkesztő: Bármilyen, amivel kódot tudsz írni. Ilyen például a Visual Studio Code, Sublime Text, Atom vagy akár a jegyzettömb is megteszi, bár utóbbi kényelmetlen lehet.
- Google Chrome böngésző: Mivel Chrome bővítményt készítünk, logikusan szükségünk lesz rá a teszteléshez és a használathoz.
- Egy jó adag lelkesedés és nyitottság: Ez a legfontosabb! Ne félj kísérletezni és hibázni, a tanulási folyamat része!
Az Alapok: A Chrome Bővítmények Működése a Motorháztető Alatt ⚙️
Minden Chrome kiegészítőnek van egy alapvető szerkezete. Ez a mini alkalmazás lényegében egy külön mappában él, és három fő fájlból áll (legalábbis a mi esetünkben):
manifest.json: Ez a bővítmény „személyi igazolványa” vagy konfigurációs fájlja. Itt adod meg a nevét, verzióját, leírását, ikonjait és a számára szükséges engedélyeket. Ez a központi vezérlő, ami elmondja a Chrome-nak, hogyan kezelje a kiegészítőt.popup.html: Ez lesz az a kis ablak, ami megjelenik, amikor rákattintasz a bővítmény ikonjára a böngésző eszköztárán. Ide írod meg a felhasználói felületet (UI) HTML-ben. Gondolj rá úgy, mint egy mini weboldalra, ami az alkalmazásodat jeleníti meg.popup.js: Ez a JavaScript fájl adja a „lelket” az alkalmazásnak. Itt található a logika, ami kezeli a gombnyomásokat, menti és betölti az adatokat (a mi esetünkben a sitemap URL-eket), és frissíti a felhasználói felületet. Ide csatlakozik a stíluslap, apopup.cssis, ami az arculatért felel.
Lépésről Lépésre: A Saját Bővítmény Elkészítése 🧑💻
Most jöjjön a lényeg! Kezdjük a nulláról, és építsük fel a saját, gyors sitemap hozzáférésre alkalmas bővítményünket!
1. Készíts egy Új Mappát 📁
Hozd létre a számítógépeden egy új mappát, például my_sitemap_extension néven. Ide fog kerülni az összes fájl. Én szeretem a tiszta mappaszerkezetet, ezért egy icons mappát is érdemes létrehozni ebbe, ahova a bővítmény ikonjai kerülnek majd.
2. Írd Meg a manifest.json Fájlt ⚙️
Ebben a mappában hozd létre a manifest.json nevű fájlt, és másold bele a következő kódot:
{
"manifest_version": 3,
"name": "Gyors Sitemap Hozzáférés",
"version": "1.0",
"description": "Gyors hozzáférés a gyakran használt sitemap-ekhez egyetlen kattintással.",
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}
},
"permissions": ["storage", "activeTab"]
}
Nézzük meg, mit jelentenek a kulcsok:
"manifest_version": 3: Ez a manifest fájl verziója. Fontos, hogy a 3-as verziót használd, mert a 2-es már elavulóban van."name"és"description": Ezek a bővítmény nevét és rövid leírását adják meg, ahogy az a Chrome bővítmények listájában megjelenik."version": A bővítmény verziószáma. Kezdjük 1.0-val."action": Ez a rész felelős azért, hogy mi történjen, ha rákattintasz a bővítmény ikonjára."default_popup": "popup.html": Azt jelenti, hogy apopup.htmlfájl tartalma jelenik meg felugró ablakban."default_icon": Itt adhatod meg az ikonok elérési útját különböző méretekben. Én általában 16×16, 48×48 és 128×128 pixeles ikonokat szoktam használni. Helyezz el legalább egy 128×128-as PNG képet aziconsmappába (pl.icon128.png).
"permissions": Itt sorolod fel azokat az engedélyeket, amelyekre a bővítménynek szüksége van."storage": Ez elengedhetetlen, mert ezzel tudjuk tartósan tárolni a hozzáadott sitemap URL-eket a Chrome böngésző helyi tárhelyén, hogy ne vesszenek el, amikor bezárod a popup ablakot."activeTab": Erre azért van szükség, hogy a bővítmény új lapot nyithasson, amikor rákattintasz egy sitemap URL-jére.
3. Készítsd El a popup.html Fájlt 📝
Most hozzuk létre a felhasználói felületet. Ugyanebben a mappában hozd létre a popup.html fájlt, és illeszd be a következő kódot:
<!DOCTYPE html>
<html>
<head>
<title>Gyors Sitemap</title>
<link rel="stylesheet" href="popup.css">
</head>
<body>
<h1>Sitemap Kezelő</h1>
<input type="text" id="sitemapUrl" placeholder="Add meg a sitemap URL-jét...">
<button id="addSitemapBtn">Hozzáad</button>
<ul id="sitemapList"></ul>
<script src="popup.js"></script>
</body>
</html>
Ez egy nagyon egyszerű HTML struktúra:
- Egy címsor (
h1). - Egy beviteli mező (
input type="text") az új sitemap URL-ek beírására. - Egy „Hozzáad” gomb (
button). - Egy rendezetlen lista (
ul), amiben a hozzáadott sitemap-ek fognak megjelenni. - Fontos, hogy hivatkozunk a
popup.cssstíluslapra (amit nemsokára megírunk), és apopup.jsszkriptre, ami a logikát szolgáltatja.
4. Írj Egy Kis Stílust a popup.css Fájlba 🎨 (Opcionális, de Ajánlott)
A felhasználói élmény javítása érdekében érdemes egy kis stílust adni a felületnek. Hozd létre a popup.css fájlt, és másold bele a következő kódot:
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
width: 320px;
padding: 15px;
background-color: #f0f2f5;
color: #333;
}
h1 {
font-size: 20px;
color: #0056b3;
margin-top: 0;
margin-bottom: 15px;
}
input[type="text"] {
width: calc(100% - 85px); /* Gomb melletti hely biztosítása */
padding: 8px 10px;
margin-right: 8px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
}
button {
padding: 8px 12px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.2s ease;
}
button:hover {
background-color: #0056b3;
}
ul {
list-style-type: none;
padding: 0;
margin-top: 20px;
max-height: 250px; /* Görgethetővé teszi, ha sok elem van */
overflow-y: auto;
border-top: 1px solid #eee;
padding-top: 10px;
}
li {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
padding: 8px;
background-color: #fff;
border: 1px solid #e9ecef;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
li a {
text-decoration: none;
color: #007bff;
font-weight: bold;
flex-grow: 1; /* Hogy a link kitöltse a rendelkezésre álló helyet */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* Hosszú URL-ek rövidítése */
}
li a:hover {
text-decoration: underline;
}
li .delete-btn {
background-color: #dc3545;
margin-left: 10px;
padding: 5px 10px;
font-size: 12px;
border-radius: 3px;
}
li .delete-btn:hover {
background-color: #c82333;
}
Ez a CSS kód alapvető stílusokat ad a popup-nak, hogy esztétikusabb és könnyebben használható legyen. Gondoskodik a betűtípusról, gombokról, beviteli mezőkről, és arról is, hogy a sitemap URL-ek szépen jelenjenek meg listában, törlés gombokkal.
5. Írd Meg a popup.js Logikáját 💻
Ez a bővítmény lelke. Itt történik a sitemap-ek hozzáadása, mentése, betöltése és törlése. Hozd létre a popup.js fájlt, és másold bele a következő kódot:
document.addEventListener('DOMContentLoaded', () => {
const sitemapUrlInput = document.getElementById('sitemapUrl');
const addSitemapBtn = document.getElementById('addSitemapBtn');
const sitemapList = document.getElementById('sitemapList');
// Sitemap-ek betöltése a tárolóból
function loadSitemaps() {
chrome.storage.local.get(['sitemaps'], (result) => {
const sitemaps = result.sitemaps || [];
renderSitemaps(sitemaps);
});
}
// Sitemap-ek megjelenítése a listában
function renderSitemaps(sitemaps) {
sitemapList.innerHTML = ''; // Töröljük a korábbi elemeket
sitemaps.forEach((sitemap, index) => {
const listItem = document.createElement('li');
const sitemapLink = document.createElement('a');
sitemapLink.href = sitemap;
sitemapLink.textContent = sitemap;
sitemapLink.target = '_blank'; // Új lapon nyitja meg
sitemapLink.title = sitemap; // Tooltip a teljes URL-lel
const deleteBtn = document.createElement('button');
deleteBtn.textContent = 'X';
deleteBtn.classList.add('delete-btn');
deleteBtn.addEventListener('click', () => deleteSitemap(index));
listItem.appendChild(sitemapLink);
listItem.appendChild(deleteBtn);
sitemapList.appendChild(listItem);
});
}
// Új sitemap hozzáadása
addSitemapBtn.addEventListener('click', () => {
const newSitemapUrl = sitemapUrlInput.value.trim();
if (newSitemapUrl && isValidHttpUrl(newSitemapUrl)) {
chrome.storage.local.get(['sitemaps'], (result) => {
const sitemaps = result.sitemaps || [];
// Ellenőrizzük, hogy az URL már létezik-e
if (!sitemaps.includes(newSitemapUrl)) {
sitemaps.push(newSitemapUrl);
chrome.storage.local.set({ sitemaps }, () => {
sitemapUrlInput.value = ''; // Ürítjük a beviteli mezőt
loadSitemaps(); // Frissítjük a listát
});
} else {
alert('Ez a sitemap már szerepel a listában!');
}
});
} else {
alert('Kérlek, adj meg egy érvényes URL-t (http:// vagy https://)!');
}
});
// Sitemap törlése
function deleteSitemap(indexToDelete) {
chrome.storage.local.get(['sitemaps'], (result) => {
let sitemaps = result.sitemaps || [];
sitemaps = sitemaps.filter((_, index) => index !== indexToDelete);
chrome.storage.local.set({ sitemaps }, () => {
loadSitemaps(); // Frissítjük a listát
});
});
}
// URL validáció egyszerű regex-szel
function isValidHttpUrl(string) {
let url;
try {
url = new URL(string);
} catch (_) {
return false;
}
return url.protocol === "http:" || url.protocol === "https:";
}
// Az oldal betöltésekor azonnal töltse be a sitemap-eket
loadSitemaps();
});
Ez a JavaScript kód:
- Figyeli, mikor töltődik be a
popup.html. - Lekéri a
chrome.storage.localtárhelyről a korábban elmentett sitemap-eket. - A
renderSitemapsfüggvény segítségével megjeleníti őket egy listában, ahol minden elem egy kattintható link, és van mellette egy „X” gomb a törléshez. - Amikor az „Hozzáad” gombra kattintunk, ellenőrzi, hogy érvényes-e az URL (egy egyszerű függvény segítségével), majd menti a
chrome.storage.local-ba és frissíti a listát. - A
deleteSitemapfüggvény felelős egy adott elem törléséért a tárolóból és a felületről. - Az
isValidHttpUrlegy egyszerű ellenőrzés, hogy a megadott érték valóban URL-nek tűnik-e.
Most, hogy megvannak a fájlok, már csak telepíteni kell a bővítményt!
A Bővítmény Telepítése és Tesztelése a Chrome-ban ✅
A fejlesztés alatt álló bővítményeket a Chrome böngésző „Fejlesztői módjában” tudjuk futtatni:
- Nyisd meg a Chrome böngészőt.
- Írd be a címsorba:
chrome://extensions, és nyomd meg az Entert. - A jobb felső sarokban kapcsold be a „Fejlesztői mód” kapcsolót.
- Megjelenik három új gomb. Kattints a „Kicsomagolt bővítmény betöltése” gombra.
- Navigálj ahhoz a mappához (pl.
my_sitemap_extension), amit az elején hoztál létre, és válaszd ki azt. - Ha minden rendben ment, a bővítményed megjelenik a listában, és az ikonja is látható lesz a böngésző eszköztárán.
- Kattints az ikonra! Meg kell jelennie a popup ablaknak. Próbáld meg hozzáadni a kedvenc sitemap-jeidet (pl.
https://example.com/sitemap.xml), és teszteld a linkek megnyitását, valamint a törlés funkciót.
Ha bármilyen hibát észlelsz, vagy a bővítmény nem működik, ellenőrizd a Chrome fejlesztői konzolját (jobb klikk a popup ablakra, majd „Vizsgálat”, vagy az „Eszköztár” menüből a „További eszközök” -> „Fejlesztői eszközök” opciót, majd a „Console” fület).
Fejlesztési Tippek és Továbblépés 💡
Ez egy alap verzió, de rengeteg lehetőség van a bővítésére:
- URL Validáció: A jelenlegi ellenőrzés egyszerű. Egy robusztusabb megoldás biztosíthatja, hogy tényleg csak érvényes URL-ek kerüljenek be.
- Sitemap Nevek: Lehetőséget adhatsz a felhasználónak, hogy ne csak az URL-t, hanem egy könnyebben megjegyezhető nevet is adjon a sitemapnek (pl. „Fő Blog Sitemap”).
- Rendezés és Szűrés: Ha sok sitemap-et tárolsz, jól jöhet a rendezési (pl. ábécé szerint) vagy szűrési funkció.
- Import/Export: Lehetőséget biztosíthatsz a sitemap lista exportálására és importálására (pl. JSON formátumban), hogy megoszthasd másokkal, vagy biztonsági másolatot készíthess.
- Vizsgálat: Készíthetsz egy gombot, amivel egyből validálhatod is a sitemap-et egy külső szolgáltatással.
- Mappák, Kategóriák: Ha sok különböző projekt sitemap-jeit kezeled, kategóriákba rendezheted őket.
Személyes Vélemény: Az Önmegvalósítás Öröme a Kóddal ❤️
„Emlékszem, mennyit kattintgattam, kerestem, másoltam be sitemap URL-eket nap mint nap. Mindig volt egy olyan érzésem, hogy ‘ennek lennie kell egy egyszerűbb módjának!’ Miután megírtam a saját bővítményemet – ami kezdetben még sokkal egyszerűbb volt, mint amit most bemutattam –, mintha egy súly esett volna le a vállamról. Percről percre takarítottam meg időt, ami egy hónapban órákat jelentett. Ez a kis fejlesztés nemcsak a munkámat gyorsította fel, hanem egyúttal azt is megmutatta, milyen erő rejlik abban, ha a saját kezünkbe vesszük a dolgokat és a saját problémáinkra keresünk egyedi megoldásokat. Valóban felszabadító érzés! A SEO munkafolyamatok felgyorsítása szempontjából ez egy igazi game-changer. Nem csak a webhelytérképekkel kapcsolatos feladatok válnak hatékonyabbá, de egyúttal a Chrome bővítmények fejlesztésének alapjaiba is beleláthatsz, ami egy nagyon hasznos képesség a digitális világban.”
Záró Gondolatok 🎉
Gratulálok! Most már nem csak egy felhasználó vagy, hanem egy alkotó. Megépítetted a saját, custom sitemap bővítményedet, ami a te igényeidre szabva gyorsítja fel a munkádat. Ez a tudás nem csak a sitemap-ekkel kapcsolatos feladatokra alkalmazható, hanem bármilyen apró ismétlődő feladatra, amit a böngészőben végzel. Kísérletezz, fejlessz tovább, és élvezd a saját fejlesztésű eszközök nyújtotta szabadságot és hatékonyságot!
Ez a projekt egy kiváló ugródeszka ahhoz, hogy mélyebbre áss a webfejlesztés világába, és lássad, milyen közvetlen, kézzelfogható előnyökkel járhat a programozás. Ne feledd, a legbonyolultabb szoftverek is egyszerű alapokból épülnek fel. A te bővítményed az első lépés egy olyan út felé, ahol a technológia nem korlátoz, hanem felszabadít.
