Dnes se podíváme, jak vytvořit rozšíření pro Google Chrome a jak interaguje s domem aktuální stránky.
Rozšíření je jednoduché, bude mít vstup, do kterého můžete napsat popisek a po kliknutí na tlačítko se tyto prvky, které jsou na stránce, přidají v červeném rámečku.
Úplný kód lze nalézt v tomto úložišti
Soubory
Ve složce projektu vytvořte následující soubory:
- manifest.json
- popup.html
- popup.js
- background.js
Manifest.json
Začněme vytvořením manifest.json
soubor, který bude mít podrobnosti o našem rozšíření, jako je (název, popis) včetně jeho oprávnění.
{
"name": "Gettin started example",
"description": "i build a example for getting started",
"version": "1.0.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"permissions": ["storage", "activeTab", "scripting"],
"action": {
"default_popup": "popup.html"
}
}
nejprve uvádíme popis názvu a verze, pokračujeme ve čtení, uvidíme vlastnost background> service_worker, což je velmi důležité, protože musíme zaregistrovat soubor, který bude spuštěn na pozadí, v tomto případě máme soubor, který se bude nazývat background.js
Zde můžete podrobněji vidět, co můžete ve svém manifestu zadat.
Background.js
Vytvoříme soubor s názvem background.js
abyste viděli, jak to funguje.
// background.js
chrome.runtime.onInstalled.addListener(function () {
console.log("Hello from background");
});
Začněte zahrnutím události posluchače pro runtime.onInstalled do skriptu na pozadí. Uvnitř onInstalled listeneru zobrazí rozšíření konzolovou zprávu, zde můžeme také nastavit persistentní proměnné atd.
Načtěte rozšíření do našeho prohlížeče
Přejdeme do správce rozšíření našeho prohlížeče a aktivujeme režim vývoje.
Klikneme na tlačítko s nápisem načíst rozbalené a vybereme složku, ve které jsou naše soubory.
Měli bychom vidět naše rozšíření načtené jako na obrázku
Nyní klikneme na pohled inspects, kde je napsáno service worker, otevře se karta a v konzole budeme moci vidět naši zprávu Hello from background
Již máte soubor na pozadí, kde můžete spouštět skripty na pozadí, nyní přistoupíme k zobrazení formuláře v našem rozšíření.
Popup.html
Jak jste si již možná všimli, v našem manifestu máme vlastnost nazvanou action:default_popup, ve které označujeme soubor s názvem popup.html, do kterého vložíme html kód s naším formulářem:
<!DOCTYPE html>
<html>
<body>
<p>Tag for change the border</p>
<input type="text" id="tagcolor" />
<button id="changeColor">Change</button>
<script src="popup.js"></script>
</body>
</html>
Máme skript, který se chystáme vytvořit, nazvaný popup.js a tam zapíšeme logiku, ale podívejme se na obsah našeho html, který má vstup a tlačítko s příslušnými ID, abychom je mohli získat pomocí js a být schopen dělat logiku.
Popup.js
V tomto souboru uděláme několik věcí, první je vybrat naše tlačítko podle id
let changeColor = document.getElementById("changeColor");
Nyní k tomuto tlačítku přidáme událost click a v asynchronní funkci vybereme náš vstup a tím budeme mít hodnotu, kterou zapíšeme.
changeColor.addEventListener("click", async() => {
let inputtag = document.querySelector("#tagcolor");
chrome.storage.sync.set({ inputtag: inputtag.value });
let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
chrome.scripting.executeScript({
target: { tabId: tab.id },
function: setBorderColor,
});
});
function setBorderColor() {
chrome.storage.sync.get("inputtag", ({ inputtag }) => {
document.querySelectorAll(inputtag).forEach((element) => {
element.style.border = "1px solid red";
});
});
}
Hodnotu toho, co zapíšeme do našeho vstupu, odešleme do našeho storage.sync, abychom k ní později měli přístup z funkce setBorderColor
chrome.storage.sync.set({ inputtag: inputtag.value });
Poté musíme vybrat okno, ve kterém se nacházíme, a uložit ho do proměnné, k tomu použijeme destrukci polí
let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
Pošleme ke spuštění skriptu na obrazovce, ve které se nacházíme s následujícím kódem
chrome.scripting.executeScript({
target: { tabId: tab.id },
function: setBorderColor,
});
V rámci této funkce setBorderColor je dokument, do kterého provedeme výběr, již ten z karty, kterou jsme označili, již to není náš popup.html dom, to musí být jasné, mimo funkci byl dokument ekvivalentem dokument popup.html našeho rozšíření.
Nakonec ve funkci setBorderColor získáme trvalou hodnotu, kterou jsme vytvořili, což by měl být název štítku, id nebo třídy, a jako zpětné volání provedeme dotaz querySelectorAll, projdeme prvky a změnit vlastnost stylu. okraj:
function setBorderColor() {
chrome.storage.sync.get("inputtag", ({ inputtag }) => {
document.querySelectorAll(inputtag).forEach((element) => {
element.style.border = "1px solid red";
});
});
}
Nyní přejdeme na libovolnou stránku a vložíme název štítku, v tomto případě použiji div
Výsledky:
Zde, jak vidíte, používáme různé nástroje Chrome, jako je úložiště, skriptování a karty, a proto je od začátku definujeme v našem manifest.json.
Doufám, že vám to opravdu pomohlo, teď je řada na vás, abyste to procvičili a prozkoumali.