Vytvoření rozšíření pro google chrome

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.