Ebben a bejegyzésben megmutatom neked, hogyan készíts pár lépésben egy bővítményt a google chrome böngészőhöz. Az bővítmény segítségével akár kedvenc oldalad stílusát is megváltoztathatod kedved szerint magadnak már az oldal betöltésekor, de akár egy felugró ablak segítségével is hajthatsz végre változásokat egy adott weboldalon.
Először nézzük meg, hogy milyen fájlokból épül fel egy chrome bővítmény.
Google chrome bővítmény fontosabb elemei
A bővítmény több fájlt is tartalmazhat, attól függően, hogy mi a funkciója az applikációnak. A következő fájlok a leggyakrabban használtak:
- A manifest.json fájlban tudod megadni a böngészőnek az összes szükséges információt a bővítményedről. Minden esetben a manifest.json nevet szükséges a fájlnak adni. Ebből a fájlból fogja tudni a böngésző, hogy egy chrome bővítményről van szó. Továbbá ezt a fájlt mindenképpen a program gyökérkönyvtárában szükséges létrehozni.
- Például: itt lehet megadni azokat a további, használni kívánt fájlokat, amiket még létrehozunk a projektünknél, illetve egyéb meta adatokat is, mint például verzió szám, szerző stb.
- A bővítmény service worker fájlja kezeli és figyeli a böngésző eseményeit.
- Például: itt lehet beállítani, hogy csak akkor lehessen megnyitni a bővítmény popup ablakát, ha egy adott url van megnyitva a böngésző ablakában
- A content script fájl tartalma a böngésző betöltésekor hívódik meg, méghozzá a weboldal kontextusában. Itt tudod közvetlenül manipulálni a weboldal DOM szerkezetét már az oldal betöltésekor.
- Például: az oldal összes képét kicseréli, egy általad beállított képre, és ezt minden egyes alkalommal megcsinálja a bővítmény, mikor megnyitunk a weboldalt
- a popup fájlok segítségével tudsz létrehozni egy felugró felhasználói felületet a bővítményednek.
Első chrome bővítményed
Hozz létre egy új mappát a gépeden, aminek a neve legyen extension , majd a mappán belül hozd létre a manifest.json fájlt.
Készítsd el a manifest.json fájl alapstruktúráját minden olyan adattal, ami szükséges az alkalmazásod hibátlan működéséhez. Mivel a fájl formátuma JSON (JavaScript Object Notation), ami hasonló, egy JavaScript objektumhoz, ezért a fájl tartalmát kapcsos zárójelek közé kell elhelyezni.
Mindenképpen szükséges megadni az alkalmazásod nevét, verziószámát, a manifest verziószámát illetve egy rövid leírást a programunkról.
A manifest.json a következő módon néz ki:
{
"name": "Background Changer",
"version": "1.0.0",
"manifest_version": 3,
"description": "A weboldal háttérszínét módosítja",
"content_scripts": [
{
"matches": ["<all_urls>"],
"css": ["content.css"],
"js": ["content.js"]
}
]
}
- A
nameobjektum kulcs alatt adható meg az alkalmazás neve, - A
versionkulcs alatt adható meg az alkalmazás verziószáma, - A
manifest.jsonkulcs alatt adható meg, hogy melyikmanifestcsomagot használja az alkalmazás. A legújabb csomag száma3, számodra ebben az esetben ez megfelelő, - A
descriptionkulcs alatt adhatod meg a projekted rövid leírását. - A
content_scriptskulcs alatt tudod regisztrálni azt a fájlt, ami az oldal betöltésekor hívódjon meg. Acontent_scriptskulcs egy tömböt vár, aminek egy objektum az egyetlen eleme. Az objektumon belül a következő elemeket adhatjuk meg többek között:matches– Elvárt elem, aminek az értéke egy tömb. A tömbben tudod megadni, melyik weboldalak esetében működjön acontent_scripts, ebben a példában minden weboldalon hívódjon meg acontent_scriptstartalmacss– Opcionális, értéke tömb. Azon css fájlok listája, amik meghívódnak az a kiválasztott weboldalakon.js– Opcionális, értéke tömb. Azon JavaScript fájlok listája, amik lefutnak a kiválasztott weboldalon.
Hozd létre a manifest.json fájlban regisztrált fájlokat a gyökérkönyvtárban valami egyszerű tartalmakkal. Például:
content.js
console.log("Hello Chrome Bővitmény");
content.css
body {
background: red !important;
}
A js fájl csak egy üzenetet fog kiírni a konzolra, a css fájl pedig megfogja változtatni az oldal body elemének a hátterét.
Hogyan tudod tesztelni az alkalmazást?
Nyisd meg a Google chrome böngészőben a bővítményeket az alábbi linken.
A jobb felső sarokban található egy váltógomb, ahol be tudod kapcsolni a fejlesztői mód ot.
Ha bekapcsoltad a fejlesztői mód -ot, akkor megjelenik egy új menüsáv a következő lehetőségekkel:
- Kicsomagolt elemek betöltése…
- Bővítmény becsomagolása
- Frissítés
A Kicsomagolt elemek betöltése... gombra kattintva tudod megkeresni és betölteni az általad létrehozott projektet a számítógépedről. Válaszd ki az általad létrehozott mappát, ami tartalmazza a manifest.json , content.css és content.js fájlt.
Ha ez megtörtént, megjelenik a bővítmények között az általad létrehozott bővítmény a manifest.json -ban megadott adatokkal a többi bővítmény között.
A jobb alsó sarokban található gombbal tudod ki- és bekapcsolni az alkalmazást, illetve a Részletek gombra kattintva egyéb beállításokat is el tudsz végezni az alkalmazáson, mint például, hogy inkognitó módban is használható legyen a bővítmény.
Nyiss meg egy új ablakot a böngészőben és navigálj el egy neked szimpatikus oldalra. Ha minden rendben ment, akkor a megnyitott oldal body elemének a háttérszíne piros lett, illetve ha megnyitod a konzolt, akkor a konzolon megjelenik a content.js -ben meghívott console.log -nak megadott szöveg.
Amennyiben módosítasz valamit a programodon, nem elég csak az oldalt újratölteni, hanem a bővítmények ablakban is újra kell tölteni a bővítményeket a Frissítés gombbal, majd ezután újratölteni a megnyitott weboldalt. Így tudod az alkalmazásod kódváltoztatásait tesztelni.
Ennyi tudással már tudsz magadnak készíteni olyan bővítményt, ami módosítani tudja a kedvenc oldalad stílusát saját ízlésed szerint, illetve tudod már manipulálni a content.js fájlból a DOM-ot is.
Bővítmény rögzítése böngészőben
Ahhoz, hogy a bővítményedet rögzíteni tudd a böngésző jobb felső sarkában, kattints a chrome bővítmény ikonra.
Majd az alkalmazásod mellett lévő gombostű ikonra kattintva tudod rögzíteni a bővítményt a chrome keresőmezője mellett.
Közvetlenül a bővitmény ikon mellett megfog jelenni egy B betű, ami az elkészült alkalmazásod ikonja.
Nézzük meg, hogy miért is jó, ha a bővítmény rögzítve van a toolbarban.
Felugró ablak készítése
A felugró ablak, vagy másnéven popup ablak akkor fog megjelenni, amikor a bővítmény ikonjára kattintasz a toolbarban.
Hozz létre három fájlt a projekted gyökérkönyvtárában:
popup.htmlpopup.csspopup.js
A popup ablak bármilyen HTML tartalmat tartalmazhat, amit csak szeretnénk. Az ablak mérete nem lehet kisebbek 25×25 pixelnél és nem lehet nagyobb 800×600 pixelnél.
A manifest.json -ben az action kulcsszó alatt tudod regisztrálni a popup.html fájlt. Az action értéke egy objektum, ahol a következő elemek elérését lehet megadni:
default_title– értéke szöveg, ez fog megjelenni, amikor az egeret az alkalmazás ikonja felé húzod a toolbarban.default_popup– értéke szöveg, apopup.htmlfájl elérését kell megadni. Ennek a tartalma fog megjelenni, ha az alkalmazás ikonjára kattintasz.default_icon– értéke objektum, ahol különböző méretekben tudsz ikont rendelni az alkalmazásodhoz.
A fentieknek megfelelően módosítsd a manifest.json fájlt.
manifest.json
{
"name": "Background Changer",
"version": "1.0.0",
"manifest_version": 3,
"description": "A weboldal háttérszínét módosítja",
"content_scripts": [
{
"matches": ["<all_urls>"],
"css": ["content.css"],
"js": ["content.js"]
}
],
"action" : {
"default_title" : "BG changer",
"default_popup" : "popup.html"
}
}
Most módosítsd a popup.html tartalmát is. Hozz létre egy alap html dokumentumot, amiben csak egy szöveget helyezz el a következő módon:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="popup.css">
</head>
<body>
<h1>Change your background</h1>
<button class="btn">Click</button>
http://popup.js
</body>
</html>
Ahogy látható, a popup ablakhoz tartozó JavaScript és CSS fájlt itt kell behivatkozni, mint mikor egy weboldalt hoznál létre.
Módosítsd a popup.css és a popup.js fájlt is.
A CSS fájlban egy minimális stílust rendelj a felugró ablakhoz tetszésed szerint, például:
body {
width: 200px;
height: 200px;
background: rgb(150, 150, 150);
}
h1 {
color: rgb(255, 255, 255);
}A JavaScript fájlban szelektáld ki a html-ben létrehozott gombot. A gombra kattintva megfog jelenni egy egyszerű üzenet a konzolban, illetve az ablak betöltésekor is megjelenik egy egyszerű üzenet a konzolban.
const btn = document.querySelector(".btn");
console.log('Popup message');
btn.addEventListener('click', () => {
console.log('Click');
})Ha frissíted a bővítményeket, mostantól a bővítményed ikonjára kattintva megjelenik egy új ablak, az általad létrehozott html tartalommal. De hol jelenik meg a konzol üzenet, ha a gombra kattintunk?
Felugró ablak
Kattints az alkalmazásod toolbarban található ikonjára, hogy a popup ablak megjelenjen, majd a popup ablakon belül bárhova kattintva az egér jobb gombjával válaszd ki a felugró menüben a vizsgálat opciót. Egy új ablakban fog megjelenni, ami popup ablak DevTools menüje.
Ezt a felugró ablakot ugyan úgy tudod használni, mint a weboldalak DevTools menüjét.
Ha a popup ablakban létrehozott gombra elkezdesz kattintgatni, akkor a DevTools konzol részén meg fog jelenni a popup.js fájlban megadott konzol üzenet.
Ha bezárod a popup ablakot, akkor a felugró ablakhoz tartozó DevTools is be fog záródni, illetve minden újbóli megnyitás az ablak újra betöltését fogja eredményezni.
Content script
Módosítsd a content.js fájlt egy kicsit úgy, hogy minden oldalon, amit betöltöttél a böngészőben, jelenjen meg egy üdvözlő felugró ablak ami felhívja a figyelmet az általad készített bővítményre. A felugró ablakot egy “x” gombbal be is lehet zárni.
A content.js tartalma az alábbi módon fog módosulni:
Hozz létre egy div , p és egy button elemet a document.createElement segítségével. A p tag tartalmát módosíts egy tetszőleges szövegre, például: “Üdvözöl a Background Changer!”. A button elem tartalmát módosítsd “x” -re.
Minden létrehozott elemnek adj egy tetszőleges osztályt. Ez azért lesz fontos, hogy a css fájlban tudj stílust hozzárendelni az elemekhez. A button -t és a p taget gyermekelemként csatold hozzá a div taghez, majd a div taget add hozzá a megnyitott oldal body eleméhez.
A button elemhez rendelj hozzá egy click eseményfigyelőt, ami a div tag display tulajdonságát módosítja none-ra, így eltüntetve a popup ablakot az oldalról.
A teljes kód így néz ki:
const body = document.querySelector('body');
const popup = document.createElement('div');
const text = document.createElement('p');
const btn = document.createElement('button');
text.innerHTML = "Üdvözöl a Background Changer!";
btn.innerHTML = "x";
popup.className = "bg-popup";
text.className = "bg-text";
btn.className = "bg-btn";
popup.appendChild(text);
popup.appendChild(btn);
body.appendChild(popup);
btn.addEventListener('click', () => {
popup.style.display = "none";
})
A létrehozott elemkehez rendelj hozzá stílust a content.css fájlban.
Például content.css a következő módon néz ki:
.bg-popup {
position: fixed;
top: 0;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
z-index: 1000;
background-color: rgba(40, 42, 66, 0.9);
}
.bg-text {
margin: 0;
margin-left: 20px;
padding: 0;
font-size: 16px;
line-height: 25px;
color: rgb(235, 235, 235);
}
.bg-btn {
border: none;
cursor: pointer;
background-color: rgba(0, 0, 0, 0);
color: rgb(235, 235, 235);
font-size: 16px;
margin: 0 20px;
padding: 10px;
}
Scripting API engedélyezése
Most, hogy már tudod manipulálni betöltéskor a weboldalt, nézzük meg, hogyan tudod a weboldal DOM-ját a felugró ablakból módosítani.
Ehhez szükséged lesz egy, a chrome böngésző által biztosított speciális API-ra. Ez a chrome.scripting API lehetővé teszi számodra, hogy bizonyos kódrészleteket egy másik kontextusban futass le, például a popup.js -ben írt függvény a böngésző ablakban hajtódjon végre. Így például egy a felugró ablakban egy gombra kattintva tudod a oldal háttérszínét módosítani.
Ahhoz, hogy használni tudd a chrome.scripting API-t, engedélyezned kell a használatát a manifest.json fájlban. Két új sort adj hozzá a manifest.json fájlhoz, az egyik a "permissions" , ami egy tömböt vár értékként. Itt adhatod meg az alkalmazásodnak az engedélyt, hogy használni tudja a scripting API-t.
A másik a "host_permissions" , ahol be tudod állítani, hogy milyen url esetén kapjon az alkalmazásod hozzáférést az API-hoz. Ebben az esetben most minden oldalt engedélyezhetsz.
A manifest.json a következőmódon módosul:
{
"name": "Background Changer",
"version": "1.0.0",
"manifest_version": 3,
"description": "Change any website background",
"permissions": ["scripting"],
"host_permissions": ["<all_urls>"],
"content_scripts": [
{
"matches": ["<all_urls>"],
"css": ["content.css"],
"js": ["content.js"]
}
],
"action": {
"default_title": "BG changer",
"default_popup": "popup.html"
}
}
Popup ablak módosítása
Módosítsd a popup.html fájlt úgy, hogy hozz létre benne négy darab div-et. Ezekre kattintva tudod majd módosítani a megnyitott weboldal body hátterét.
Minden div elemhez rendelj hozzá egy data attribútumot, egy box osztályt és a színének megfelelő osztályt.
A négy szín legyen gray, blue, black és white, de tetszőlegesen is létrehozhatsz további színeket, vagy ezeket is módosíthatod.
A módosított popup.html fájl a következőképpen néz ki:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="popup.css">
</head>
<body>
<h1>Change your background</h1>
<div class="container">
<div class="box box-gray" data-color="gray">Gray</div>
<div class="box box-blue" data-color="blue">Blue</div>
<div class="box box-black" data-color="black">Black</div>
<div class="box box-white" data-color="white">White</div>
</div>
http://popup.js
</body>
</html>
Adj némi stílust a popup ablaknak a popup.css fájl módosításával, például:
* {
margin: 0;
padding: 0;
}
body {
width: 320px;
height: 150px;
background-color: rgba(40, 42, 66, 1);
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
h1 {
color: rgb(235, 235, 235);
text-transform: uppercase;
font-size: 20px;
}
.container {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
}
.box {
width: 55px;
height: 55px;
text-align: center;
cursor: pointer;
border: 2px solid rgb(38, 145, 187);
}
.box-gray {
background-color: gray;
color: yellow;
}
.box-blue {
background-color: blue;
color: black;
}
.box-black {
background-color: black;
color: white;
}
.box-white {
background-color: white;
color: black;
}
Módosítsd a popup.js fájlt. A fájl a popup ablakban fog lefutni, így kitudod szelektálni az összes div -et a .box szelektor segítségével a következőmódon:
const boxes = document.querySelectorAll('.box');
Most iterálj végig az összes box elemen és adj hozzá az összes elemhez egy click eseményfigyelőt, ami, ha esemény bekövetkezik, írja ki a box elem színét a konzolra. Ez még nem a weboldal konzolja, ez a popup konzolja. Ezt a következőmódon tudod megtenni az event objektum és a data attribútum segítségével:
const boxes = document.querySelectorAll('.box');
boxes.forEach( (box) => {
box.addEventListener( "click", (e) => {
const color = e.target.dataset.color;
console.log(color);
})
});
Mentsd el a kódot és a bővítmények ablakban frissítsd a bővítményeket. Nyisd meg az alkalmazásod popup ablakát, majd a popup ablak DevTools ablakját is. Ha mindent jól csináltál, akkor, ha rákattintasz az egérrel bármely doboza, a konzolon meg fog jelenni a megnyomott doboz data attribútumának értéke.
Hozzáférés az aktív böngésző ablakhoz API segítségével
Most nézzük meg, hogyan tudsz kapcsolatba lépni a böngésző ablakkal a scripting API segítségével. Ennek használata és viselkedése nagyon hasonló, mint a content script , annyi a különbség a kettő között, hogy a content script az oldal betöltésekor fut le, viszont a scripting API segítségével futásidőben tudsz változtatásokat végrehajtani a weboldalon.
Először ki kell szelektálni az aktív tabot, azaz azt az oldalt, amelyik megvan nyitva a böngészőben.
Ehhez egy másik API-t kell használni, méghozzá a chrome.tabs API-t, ami segítségével kapcsolatba tudsz lépni a böngésző ablakaival. Az API-nak van egy query metódusa, ami segítségével tudsz szűrni a megnyitott ablakok között.
Ez a metódus első paraméterként egy objektumot vár a szűrési feltételekkel, második paraméterként pedig egy callback függvényt vár, aminek a segítségével lehet dolgozni a szűrésnek megfelelő ablakokkal.
Ebben az esetben ez egy egy darab elemből álló tömb lesz, aminek az első eleme az aktív oldal objektuma, ami minden információt tartalmaz az oldalról, többek között az oldal id értékét is.
const boxes = document.querySelectorAll('.box');
boxes.forEach( (box) => {
box.addEventListener( "click", (e) => {
const color = e.target.dataset.color;
chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
console.log(tabs[0]);
console.log(tabs[0].id);
})
})
});
Teszteld le, nézd meg mi jelenik meg a bővítmény DevTools konzolján.
Mostmár, hogy tudod az aktív oldal ID értékét, tudod használni a chrome.scripting API-t.
Kapcsolat létrehozása a popup ablak és a böngésző ablaka között
Most jön az érdekes rész, és végre használni fogod a scripting API-t.
A chrome.scripting API-nak van egy executeScript metódusa, ez fogja meghívni az általad megadott függvényt az általad megadott tabon. Ennek a metódusnak egy objektumot kell átadni az argumentumában a következő módon:
const boxes = document.querySelectorAll('.box');
boxes.forEach( (box) => {
box.addEventListener( "click", (e) => {
const color = e.target.dataset.color;
chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
chrome.scripting.executeScript(
{
target : {tabId : tabs[0].id},
func : changeBg
}
);
})
})
});
Mint láthatod, a target kulcsszóval regisztráltad a böngésző aktív ablakát. Ezen az ablakon szeretnénk változtatásokat végrehajtani.
A func kulcsszóval regisztráltad azt a függvényt, ami a target oldalon fog változtatásokat végrehajtani. Ez a függvény mostantól nem a popup kontextusában működik, hanem az aktív böngésző ablak kontextusában. Mit is jelent ez? Azt, hogy az itt végrehajtott műveletnek nem a popup ablakra van ráhatása, hanem a böngésző aktív ablakára.
Hozd létre a függvényt, ami először csak annyit fog csinálni, hogy a konzolra kiírja azt, hogy információ átadva. Ne feledd, ez a függvény nem a bővítményedben fog lefutni, hanem a böngésző ablakában megnyitott weboldalon.
const boxes = document.querySelectorAll('.box');
boxes.forEach( (box) => {
box.addEventListener( "click", (e) => {
const color = e.target.dataset.color;
chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
chrome.scripting.executeScript(
{
target : {tabId : tabs[0].id},
func : changeBg
}
);
})
})
});
function changeBg() {
console.log("információ átadva");
}
Frissítsd a bővítményeket, majd teszteld le, hogy működik-e az alkalmazás. Ha az alkalmazás popup ablakjában rákattintasz valamelyik dobozra, akkor a weboldal konzolján meg kell jelenni az “információ átadva” üzenetnek.
Ha az aktív weboldal konzolján megjelent az üzenet, gratulálok, mindent jól csináltál. Már csak pár lépés maradt, hogy valójában manipulálni tudj egy weboldalt.
Módosítsd a függvényt úgy, hogy az argumentumban egy color változót vár és ezt írja ki a konzolra.
Ahhoz, hogy a scripting API -ban meghívott függvénynek tudj átadni változót, az executeScript argumentumában megadott objektumhoz még egy args kulcsot kell hozzáadni, ami egy tömböt fog várni értékként. Ebben a tömbben kell felsorolni azokat a változókat, amiket át szeretnénk adni a függvénynek.
A kód a következőmódon változik:
const boxes = document.querySelectorAll('.box');
boxes.forEach( (box) => {
box.addEventListener( "click", (e) => {
const boxColor = e.target.dataset.color;
chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
chrome.scripting.executeScript(
{
target : {tabId : tabs[0].id},
func : changeBg,
args: [boxColor]
}
);
})
})
});
function changeBg(color) {
console.log(color);
}
Frissítsd a bővítmények ablakot és a böngészőt is, majd teszteld le, hogy működik-e az alkalmazás. Ha mindent jól csináltál a böngésző konzoljában mindig annak a doboznak a színe fog megjelenni, amire rákattintasz.
Módosítsd a changeBg függvényt úgy, hogy az oldal body elemének a színét változtassa meg arra a színre, amire az alkalmazásban rákattintasz, illetve a változóként átadott színnek megfelelően változtassa az oldal összes elemének a color stílusát.
const boxes = document.querySelectorAll('.box');
boxes.forEach( (box) => {
box.addEventListener( "click", (e) => {
const boxColor = e.target.dataset.color;
chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
chrome.scripting.executeScript(
{
target : {tabId : tabs[0].id},
func : changeBg,
args: [boxColor]
}
);
})
})
});
function changeBg(color) {
const fontColor = {
gray : "yellow",
blue : "black",
black : "white",
white : "black"
};
const body = document.querySelector("body");
const all = document.querySelectorAll("*");
body.style.backgroundColor = color;
all.forEach( (item) => {
item.style.color = fontColor[color]
}
);
}
Összefoglalás
Ha idáig eljutottál és megértetted az anyagot, akkor gratulálok, szép munka!
Most már tudsz chrome bővítményt készíteni, amivel tudod módosítani kedvenc weboldal stílusát akár az általad létrehozott alkalmazás felugró ablakából, de akár az oldal betöltődésekor.
Azt javaslom kísérletezz, módosítsd az chrome bővítményedet kedved szerint.