logo

Vytvořte rozšíření Google Chrome, část 1:Image Grabber

Obsah

Úvod
Základní struktura rozšíření
Minimální rozšíření Chrome
Nainstalujte rozšíření Chrome
Přidejte ikony rozšíření
Vytvořte rozhraní rozšíření
Implementujte funkci "CHYTIT HNED".
Získejte požadovaná oprávnění
Získejte informace o aktivní kartě prohlížeče
Uchopte obrázky z aktuální stránky
Čištění kódu
Závěr

Úvod

Rozšíření Chrome jsou malé programy, které lze nainstalovat do webového prohlížeče Google Chrome a obohatit tak jeho funkce. K instalaci rozšíření pro Chrome by měl uživatel obvykle otevřít Internetový obchod Chrome, najít požadované rozšíření a nainstalovat jej odtud.

V tomto článku ukážu, jak vytvořit rozšíření Chrome od začátku. Rozšíření, které dnes vytvoříme, bude používat rozhraní API Chrome pro přístup k obsahu webových stránek, které se otevírají ve webovém prohlížeči, a získávat z nich různé informace. Pomocí těchto API můžete nejen číst obsah webových stránek, ale také na ně obsah zapisovat a pracovat s těmito stránkami, jako je například automatické mačkání tlačítek nebo sledování odkazů. Tuto funkci lze použít pro širokou škálu úloh automatizace prohlížeče, jako je odstranění požadovaných informací z webových stránek nebo automatizace procházení webu, což může být užitečné pro automatizaci testování uživatelského rozhraní.

V tomto článku vás provedu procesem vytváření rozšíření s názvem Image Grabber . Výsledné rozšíření poskytne rozhraní pro připojení k webové stránce, čtení všech obrázků z ní, zachycení jejich absolutních adres URL a zkopírování těchto adres URL do schránky. Během tohoto procesu se dozvíte o základních částech rozšíření Google Chrome, které lze znovu použít k vytvoření jakéhokoli rozšíření.

Na konci tohoto článku vytvoříte rozšíření, které vypadá a funguje tak, jak je ukázáno v tomto videu.

Toto je pouze první část tohoto tutoriálu. Ve druhé části ukážu, jak rozšířit rozhraní rozšíření o výběr a stahování zachycených obrázků jako ZIP archiv a poté vysvětlím, jak rozšíření publikovat na Google Chrome WebStore. Toto je odkaz na druhou část:https://dev.to/andreygermanov/create-a-google-chrome-extension-part-2-image-grabber-47h7.

Základní struktura rozšíření

Rozšíření Google Chrome je webová aplikace, která může obsahovat libovolný počet stránek HTML, šablon stylů CSS, souborů JavaScript, obrázků, jakýchkoli dalších souborů a manifest.json soubor ve stejné složce, který definuje, jak bude toto konkrétní rozšíření vypadat a fungovat.

Minimální rozšíření Chrome

Minimální rozšíření Chrome se skládá pouze z manifest.json soubor. Toto je příklad základního manifest.json soubor, který lze použít jako šablonu při vytváření jakéhokoli nového rozšíření pro Chrome:

{
    "name": "Image Grabber",
    "description": "Extract all images from current web page",
    "version": "1.0",
    "manifest_version": 3,
    "icons": {},
    "action": {},
    "permissions": [],
    "background":{}
}

Jediné požadované parametry jsou name , description , version a manifest_version . manifest_version by měla být rovna 3. Hodnoty ostatních parametrů jsou na vás, měly by jasně popisovat vaše rozšíření a jeho verzi. V tomto příkladu jsem popsal Image Grabber rozšíření, které extrahuje odkazy na všechny obrázky z aktuální stránky prohlížeče.

Úplný seznam možností, které lze zadat, můžete vidět v manifest.json soubor v oficiální dokumentaci.

Složka s jedním manifest.json file je minimálně spustitelné rozšíření Chrome, které lze zabalit, nainstalovat do Chromu a distribuovat. Toto minimální rozšíření bude mít výchozí vzhled a nebude dělat nic, dokud nedefinujeme další parametry:icons , action , permissions a background .

Pojďme tedy vytvořit image_grabber a vložte manifest.json soubor s tímto výchozím obsahem. Pak stačí nainstalovat toto rozšíření do Chromu.

Nainstalujte rozšíření Chrome

Když vyvíjíte rozšíření, má podobu složky se soubory. V podmínkách rozšíření Chrome se nazývá unpacked extension . Po dokončení vývoje budete potřebovat pack složku rozšíření do archivu s .crx pomocí správce rozšíření Chrome. Tento archiv pak lze použít k nahrání do Chrome Web Store ze kterého si uživatelé mohou nainstalovat vaše rozšíření do svých prohlížečů.

Pro testování a ladění rozšíření během vývoje si můžete nainstalovat unpacked extension do Chromu. Chcete-li to provést, zadejte chrome://extensions v řetězci adresy URL prohlížeče a otevřete Správce rozšíření Chrome.

Pro instalaci a ladění rozšíření během vývoje zapněte Developer mode přepínač na pravé straně panelu Rozšíření. Zobrazí se panel pro správu rozšíření:

Poté stiskněte Load unpacked a vyberte složku s příponou. Nasměrujte to na naše minimální image_grabber rozšíření. Hned poté se v seznamu nainstalovaných rozšíření objeví panel pro rozšíření Image Grabber:

Image Grabber panel rozšíření zobrazuje jedinečné ID, popis a verzi rozšíření. Pokaždé při změně manifest.json musíte stisknout Reload ikonu na panelu rozšíření pro opětovné načtení aktualizovaného rozšíření:

Chcete-li rozšíření použít v prohlížeči, najdete jej v seznamu nainstalovaných rozšíření Chrome. Chcete-li zobrazit tento seznam, stiskněte Extensions tlačítko ikony

na pravé straně lišty URL prohlížeče Chrome a v rozevíracím seznamu najděte položku „Image Grabber“. Můžete také stisknout tlačítko ikony „Připnout“ na pravé straně rozšíření a umístit ikonu rozšíření na lištu prohlížeče na stejný řádek s ostatními běžnými rozšířeními:

Po Pin rozšíření, jeho výchozí ikona se zobrazí na panelu nástrojů:

To je vše. Nainstalovali jsme minimálně funkční rozšíření Chrome. Vypadá to však jako jednoduchý symbol „Já“ na šedém pozadí a po kliknutí na něj se nic nestane. Pojďme přidat další chybějící části do manifest.json to změnit.

Přidat ikony rozšíření

icons parametr v manifest.json soubor má formát objektu Javascript, který definuje umístění ikon různých velikostí. Rozšíření by mělo mít ikony různých velikostí:16x16 px, 32x32 px, 48x48 px a 128x128 px. Ikony jsou obrázky „.PNG“, které by měly být umístěny kdekoli ve složce rozšíření. Soubory obrázků mohou mít libovolné názvy. Vytvořil jsem 4 ikony odpovídající velikosti v souborech 16.png, 32.png, 48.png a 128.png a vložil je do icons složku v kořenové složce rozšíření. Poté manifest.json by měl být nasměrován na tato místa pomocí icons parametr způsobem, jak je ukázáno níže:

{
    "name": "Image Grabber",
    "description": "Extract all images from current web page",
    "version": "1.0",
    "manifest_version": 3,
    "icons": {
        "16":"icons/16.png",
        "32":"icons/32.png",
        "48":"icons/48.png",
        "128":"icons/128.png"
    },
    "action": {},
    "permissions": [],
    "background":{}
}

Cesty k souborům ikon jsou určeny jako relativní cesty.

Po dokončení stiskněte Reload na panelu rozšíření Image Grabber na chrome://extensions karta pro použití změněného manifest.json . V důsledku toho byste měli vidět, že se ikona rozšíření na panelu nástrojů změnila, jak je zobrazeno níže:

Nyní to vypadá lépe, ale pokud stisknete tuto ikonu, nic se nestane. Pojďme k tomuto rozšíření přidat akce.

Vytvořte rozhraní rozšíření

Rozšíření by mělo něco dělat, mělo by spouštět nějaké akce, aby mělo smysl. Rozšíření umožňuje spouštět akce dvěma způsoby:

  • Při spuštění rozšíření na pozadí
  • Z rozhraní rozšíření, když s ním uživatel interaguje pomocí tlačítek nebo jiných ovládacích prvků uživatelského rozhraní

Rozšíření může používat obě možnosti současně.

Chcete-li spouštět akce na pozadí, musíte vytvořit skript JS a zadat jeho umístění v background parametr manifest.json . Tento skript může definovat posluchače pro širokou škálu událostí prohlížeče, například:když je rozšíření nainstalováno, když uživatel otevře/zavře kartu v prohlížeči, když uživatel přidá/odebere záložku, a mnoho dalších. Potom bude tento skript neustále běžet na pozadí a reagovat na každou z těchto událostí spuštěním kódu Javascript z funkcí pro zpracování událostí.

U tohoto rozšíření tuto funkci nevyužiji, takže background parametr manifest.json bude prázdný. Je zahrnut pouze pro vytvoření manifest.json aby byl užitečný jako výchozí šablona pro rozšíření Chrome jakéhokoli druhu, ale v rozšíření Image Grabber je jedinou akcí „Uchopit obrázky“ a spustí se pouze z uživatelského rozhraní, když uživatel výslovně stiskne tlačítko „Uchopte NYNÍ“ tlačítko.

Pro spouštění akcí z rozhraní musíme definovat rozhraní. Rozhraní pro rozšíření Chrome jsou stránky HTML, které lze zkombinovat se šablonami stylů CSS pro úpravu těchto stránek, a soubory Javascript, které definují akce, které se mají spustit, když uživatel interaguje s prvky tohoto rozhraní. Hlavní rozhraní je rozhraní, které se zobrazí, když uživatel klikne na ikonu rozšíření na panelu nástrojů, a mělo by být definováno v action parametru manifest.json soubor. V závislosti na tom, jak je rozhraní definováno, může být otevřeno jako nová karta v prohlížeči nebo zobrazeno jako vyskakovací okno pod tlačítkem rozšíření, když jej uživatel stiskne.

Rozšíření Image Grabber využívá druhou možnost. Zobrazuje vyskakovací okno se záhlavím a tlačítkem „UHRNI NYNÍ“. Pojďme to tedy definovat v manifest.json :

{
    "name": "Image Grabber",
    "description": "Extract all images from current web page",
    "version": "1.0",
    "manifest_version": 3,
    "icons": {
        "16":"icons/16.png",
        "32":"icons/32.png",
        "48":"icons/48.png",
        "128":"icons/128.png"
    },
    "action": {
        "default_popup":"popup.html"
    },
    "permissions": [],
    "background":{}
}

Takže, jak je zde definováno, hlavní rozhraní je vyskakovací okno a obsah tohoto vyskakovacího okna by měl být v popup.html soubor. Tento soubor je obyčejná HTML stránka. Vytvořte tedy popup.html soubor ve složce rozšíření s následujícím obsahem:

<!DOCTYPE html>
<html>
    <head>
        <title>Image Grabber</title>
    </head>
    <body>
        <h1>Image Grabber</h1>
        <button id="grabBtn">GRAB NOW</button>
    </body>
</html>

Toto je jednoduchá stránka se záhlavím "Image Grabber" a tlačítkem "GRAB NOW", které má id "grabBtn".

Přejděte na chrome://extensions na reload rozšíření Image Grabber. Nyní můžete stisknutím ikony rozšíření zobrazit vyskakovací okno s rozhraním:

Funguje, ale nevypadá dostatečně dokonale. Pojďme si to nastylovat pomocí CSS. Vytvořte následující popup.css soubor ve složce rozšíření:

body {
    text-align:center;
    width:200px;
}

button {
    width:100%;
    color:white;
    background:linear-gradient(#01a9e1, #5bc4bc);
    border-width:0px;
    border-radius:20px;
    padding:5px;
    font-weight: bold;
    cursor:pointer;
}

Tento CSS definuje, že body by měl mít šířku 200 pixelů. Tímto způsobem by měla být pro rozšíření Chrome definována velikost vyskakovacího okna. Pokud není definováno, rozšíření použije minimální velikost potřebnou k zobrazení obsahu.

Poté přidejte toto popup.css stylů do záhlaví popup.html strana:

<!DOCTYPE html>
<html>
    <head>
        <title>Image Grabber</title>
        <link rel="stylesheet" type="text/css" href="popup.css"/>
    </head>
    <body>
        <h1>Image Grabber</h1>
        <button id="grabBtn">GRAB NOW</button>
    </body>
</html>

Takže, když je toto vše na místě, můžete znovu kliknout na ikonu rozšíření a zobrazit stylizované vyskakovací okno:

Jak jste si mohli všimnout, nepotřebujete reload rozšíření pokaždé, když upravíte HTML nebo jakýkoli jiný soubor. Rozšíření musíte znovu načíst pouze při změně manifest.json .

Nyní, aby bylo naše uživatelské rozhraní kompletní, přidáme kód Javascript, který bude reagovat na událost kliknutí na tlačítko „CHYTIT HNED“. Zde je jedna důležitá poznámka, Chrome neumožňuje mít na HTML stránkách rozšíření žádný vložený Javascript. Veškerý kód Javascript by měl být definován pouze v samostatném .js soubory. Proto vytvořte popup.js soubor ve složce extensions s následujícím zástupným kódem:

const grabBtn = document.getElementById("grabBtn");
grabBtn.addEventListener("click",() => {    
    alert("CLICKED");
})

a zahrňte tento soubor skriptu do popup.html strana:

<!DOCTYPE html>
<html>
    <head>
        <title>Image Grabber</title>
        <link rel="stylesheet" type="text/css" href="popup.css"/>
    </head>
    <body>
        <h1>Image Grabber</h1>
        <button id="grabBtn">GRAB NOW</button>
        <script src="popup.js"></script>
    </body>
</html>

Tento kód přidá onClick posluchač události na tlačítko s grabBtn ID. Pokud nyní otevřete vyskakovací okno s rozšířením a kliknete na tlačítko „Uchopte NYNÍ“, mělo by se zobrazit pole upozornění s textem „KLIKNUTO“.

Konečně máme kompletní rozložení rozšíření se stylizovaným rozhraním a skriptem pro zpracování událostí.

V současné fázi se jedná o rozšíření, které lze použít jako základní šablonu pro zahájení vytváření široké škály rozšíření pro Chrome na základě vyskakovacího uživatelského rozhraní.

Nyní implementujme „obchodní logiku“ tohoto konkrétního rozšíření – obslužnou rutinu onClick pro tlačítko „Uchopte NYNÍ“, abyste získali seznam adres URL obrázků z aktuální stránky prohlížeče a zkopírovali jej do schránky.

Implementujte funkci "GRAB NOW"

Pomocí Javascriptu v rozšíření můžete dělat vše, co můžete dělat pomocí Javascriptu na webu:otevírat další HTML stránky z aktuální, zadávat požadavky na vzdálené servery, nahrávat data z rozšíření do vzdálených míst a cokoli jiného. Ale kromě toho, pokud je tento skript spuštěn v rozšíření pro Chrome, můžete pomocí rozhraní API prohlížeče Chrome komunikovat s objekty prohlížeče:číst z nich a měnit je. Většina rozhraní Google Chrome API je k dispozici prostřednictvím chrome jmenný prostor. Konkrétně pro rozšíření Image Grabber použijeme následující API:

  • chrome.tabs - Chrome Tabs API. Bude použit pro přístup k aktivní kartě prohlížeče Chrome.
  • chrome.scripting - Chrome Scripting API. Bude použit k vložení a spuštění kódu JavaScript na webové stránce, která se otevře na aktivní kartě prohlížeče.

Získejte požadovaná oprávnění

Ve výchozím nastavení Chrome z bezpečnostních důvodů nepovoluje přístup ke všem dostupným rozhraním API. Rozšíření by mělo deklarovat, která oprávnění vyžaduje v permissions parametru manifest.json . Existuje mnoho oprávnění, všechna jsou popsána v oficiální dokumentaci zde:https://developer.chrome.com/docs/extensions/mv3/declare_permissions/. Pro Image Grabber potřebujeme dvě oprávnění s následujícími názvy:

  • activeTab - získat přístup k aktivní kartě prohlížeče
  • scripting – získat přístup k rozhraní Chrome Scripting API pro vkládání a spouštění skriptů JavaScript na různých místech prohlížeče Chrome.

Chcete-li získat tato oprávnění, musíte přidat jejich jména do permissions pole parametru manifest.json :

{
    "name": "Image Grabber",
    "description": "Extract all images from current web page",
    "version": "1.0",
    "manifest_version": 3,
    "icons": {
        "16":"icons/16.png",
        "32":"icons/32.png",
        "48":"icons/48.png",
        "128":"icons/128.png"
    },
    "action": {
        "default_popup":"popup.html",
    },
    "permissions": ["scripting", "activeTab"],
    "background":{}
}

a reload rozšíření na chrome://extensions panel.

Toto je konečný manifest.json pro tento projekt. Nyní má všechny požadované části:ikony, odkaz na hlavní vyskakovací rozhraní a oprávnění, která toto rozhraní vyžaduje.

Získejte informace o aktivní kartě prohlížeče

K dotazu na informace o kartách prohlížeče použijeme chrome.tabs.query funkce, která má následující podpis:

chrome.tabs.query(queryObject,callback)
  • queryObject je Javascriptový objekt s parametry, které definují kritéria vyhledávání pro karty prohlížeče, které potřebujeme získat.
  • Číslo callback - je funkce, která se volá po dokončení dotazu. Tato funkce se provádí s jediným parametrem tabs , což je pole nalezených karet, které splňují zadaná kritéria vyhledávání. Každý prvek z tabs pole je Tab objekt. Tab objekt popisuje nalezenou kartu a obsahuje jedinečné ID karty, její název a další informace.

Zde nebudu úplně popisovat queryObject formát a vrácené Tab objekt. Tyto informace naleznete v chrome.tabs Odkaz na API zde:https://developer.chrome.com/docs/extensions/reference/tabs/.

Pro účely Image Grabber rozšíření, musíme se zeptat na kartu, která je aktivní. Dotaz pro vyhledávání na tomto druhu karty je {active: true} .

Pojďme napsat kód pro získání informací o aktivní kartě do tlačítka „UHNOUT NYNÍ“ na obslužné rutině kliknutí:

const grabBtn = document.getElementById("grabBtn");
grabBtn.addEventListener("click",() => {    
    chrome.tabs.query({active: true}, (tabs) => {
        const tab = tabs[0];
        if (tab) {
            alert(tab.id)
        } else {
            alert("There are no active tabs")
        }
    })
})

Tento kód provede dotaz, aby získal všechny karty, které jsou active . Po dokončení dotazu zavolá zpětné volání s polem nalezených karet v tabs argument. Aktivní může být pouze jedna karta, takže můžeme předpokládat, že se jedná o první a jedinou položku v tabs pole. Pokud aktivní karta existuje, zobrazíme ID této karty v poli upozornění (v další části toto upozornění nahradíme přiměřeným kódem). Pokud však nejsou aktivní žádné karty, upozorníme na to uživatele.

Pokud nyní otevřete rozšíření a stisknete tlačítko „Uchopte NYNÍ“, mělo by se zobrazit okno s upozorněním s číselným ID aktivní karty.

V další části použijeme toto ID k manipulaci s obsahem webové stránky zobrazené na této kartě.

Stahujte obrázky z aktuální stránky

Rozšíření může komunikovat s otevřenými stránkami prohlížeče Chrome pomocí rozhraní Chrome Scripting JavaScript API, které se nachází v chrome.scripting jmenný prostor. Toto rozhraní API použijeme zejména k vložení skriptu na webovou stránku aktuální karty, spuštění tohoto skriptu a vrácení výsledku zpět do rozšíření. Při spuštění má přístup k veškerému obsahu webové stránky, do které je tento skript vložen.

Jediná funkce chrome.scripting API, které se používá pro toto rozšíření, je executeScript . Má následující podpis:

chrome.scripting.executeScript(injectSpec,callback)

injectSpec

Toto je objekt typu ScriptInjection. Definuje, kam a jak vložit skript. target parametr tohoto objektu se používá k určení "kam" vložit skript - ID karty prohlížeče, do které se má skript vložit. Pak další parametry tohoto objektu definují "jak" vložit skript. Skript lze vložit jako:

  • soubor nebo soubory – v tomto případě je třeba zadat pole souborů Javascript, které se mají vložit. Soubory by měly existovat ve složce rozšíření.
  • funkce – v tomto případě je třeba zadat funkci, která se má vložit. Funkce by měla existovat ve stejném (popup.js ) soubor.

Skript, který potřebujeme vložit, bude použit k získání všech obrázků cílové stránky a vrácení jejich URL. Toto je malý skript, takže jej vložíme jako funkci umístěnou ve stejném popup.js soubor. Takže injectSpec pro tento případ bude vypadat takto:

{
    target:{ tabId: tab.id, allFrames: true },
    func: grabImages,
},

Zde používáme id tab objekt, který jsme obdrželi v předchozím kroku jako cíl pro vložení skriptu. Také je zde allFrames sada voleb, která říká, že vložený skript by měl být spuštěn v každém vloženém rámci cílové stránky, pokud má tato stránka vložené rámce. Jako skript vložíme grabImages funkce, která bude definována později.

zpětné volání

Vložená funkce provede akce na cílové webové stránce a na všech vložených rámcích této stránky (každý rámec je také samostatná stránka) a vrátí výsledek. Poté rozšíření provede zpětné volání funkce s vrácenými výsledky jako argument. Argumentem funkce je pole objektů typu InjectionResult pro každý snímek. Každý objekt obsahuje vlastnost "result", což je skutečný výsledek, že grabImages funkce vrátí.

Nyní spojíme všechny části dohromady:

const grabBtn = document.getElementById("grabBtn");
grabBtn.addEventListener("click",() => {    
    chrome.tabs.query({active: true}, function(tabs) {
        var tab = tabs[0];
        if (tab) {
            chrome.scripting.executeScript(
                {
                    target:{tabId: tab.id, allFrames: true},
                    func:grabImages
                },
                onResult
            )
        } else {
            alert("There are no active tabs")
        }
    })
})

function grabImages() {
    // TODO - Query all images on a target web page
    // and return an array of their URLs
}

function onResult(frames) {
    // TODO - Combine returned arrays of image URLs,
    // join them to a single string, delimited by 
    // carriage return symbol and copy to a clipboard
}

Potom takto grabImages funkce je implementována:

/**
 * Executed on a remote browser page to grab all images
 * and return their URLs
 * 
 *  @return Array of image URLs
 */
function grabImages() {
    const images = document.querySelectorAll("img");
    return Array.from(images).map(image=>image.src);    
}

Tato funkce bude spuštěna na cílové webové stránce, tedy na document , v něm specifikovaný uzel dokumentu DOM cílové webové stránky. Tato funkce se dotazuje na seznam všech img uzly z dokumentu pak převedou tento seznam na pole a vrátí pole adres URL (image.src) těchto obrázků. Jedná se o velmi nezpracovanou a jednoduchou funkci, takže jako domácí úkol si ji můžete přizpůsobit:aplikujte na tento seznam různé filtry, vyčistěte adresy URL tím, že z nich odstraníte řetězce „dotazů“ a tak dále, aby výsledný seznam vypadal dokonale.

Po provedení této funkce v každém rámci cílové webové stránky budou výsledná pole zkombinována a odeslána na onResult funkce zpětného volání, která by mohla vypadat takto:

/**
 * Executed after all grabImages() calls finished on 
 * remote page
 * Combines results and copy a list of image URLs 
 * to clipboard
 * 
 * @param {[]InjectionResult} frames Array 
 * of grabImage() function execution results
 */
function onResult(frames) {
    // If script execution failed on the remote end 
    // and could not return results
    if (!frames || !frames.length) { 
        alert("Could not retrieve images from specified page");
        return;
    }
    // Combine arrays of the image URLs from 
    // each frame to a single array
    const imageUrls = frames.map(frame=>frame.result)
                            .reduce((r1,r2)=>r1.concat(r2));
    // Copy to clipboard a string of image URLs, delimited by 
    // carriage return symbol  
    window.navigator.clipboard
          .writeText(imageUrls.join("\n"))
          .then(()=>{
             // close the extension popup after data 
             // is copied to the clipboard
             window.close();
          });
}

Ne všechny karty otevřené v prohlížeči jsou karty s webovými stránkami uvnitř. Například karta se seznamem rozšíření nebo karta s nastavením prohlížeče nejsou karty s webovými stránkami. Pokud se pokusíte spustit skript s document objekt na těchto kartách selže a nevrátí nic. Proto na začátku onResult zkontrolujeme výsledek a pokračujeme pouze v případě, že existuje. Potom zkombinujeme pole adres URL obrázků vrácených pro každý snímek do jednoho pole pomocí kombinace map/reduce a poté pomocí window.navigator.clipboard API zkopírujeme spojené s polem řetězců do schránky. writeText funkce je asynchronní, takže musíme počkat, až skončí vyřešením slibu, že se vrátí. A když je vyřešeno, zavřeme vyskakovací okno rozšíření.

Vysvětlil jsem pouze jednu funkci skriptovacího API Chrome a pouze v kontextu rozšíření Image Grabber. Úplnou dokumentaci k rozhraní Chrome Scripting API si můžete prohlédnout na adrese https://developer.chrome.com/docs/extensions/reference/scripting/.

Vyčištění kódu

Poslední věc, kterou bych udělal s kódem, který zpracovává událost "GRAB NOW" onClick, je extrahovat kód, který dělá chrome.scripting na samostatnou funkci:

const grabBtn = document.getElementById("grabBtn");
grabBtn.addEventListener("click",() => {    
    // Get active browser tab
    chrome.tabs.query({active: true}, function(tabs) {
        var tab = tabs[0];
        if (tab) {
            execScript(tab);
        } else {
            alert("There are no active tabs")
        }
    })
})

/**
 * Function executes a grabImages() function on a web page,
 * opened on specified tab
 * @param tab - A tab to execute script on
 */
function execScript(tab) {
    // Execute a function on a page of the current browser tab
    // and process the result of execution
    chrome.scripting.executeScript(
        {
            target:{tabId: tab.id, allFrames: true},
            func:grabImages
        },
        onResult
    )
}

A konečný obsah popup.js je následující:

const grabBtn = document.getElementById("grabBtn");
grabBtn.addEventListener("click",() => {    
    // Get active browser tab
    chrome.tabs.query({active: true}, function(tabs) {
        var tab = tabs[0];
        if (tab) {
            execScript(tab);
        } else {
            alert("There are no active tabs")
        }
    })
})

/**
 * Execute a grabImages() function on a web page,
 * opened on specified tab and on all frames of this page
 * @param tab - A tab to execute script on
 */
function execScript(tab) {
    // Execute a function on a page of the current browser tab
    // and process the result of execution
    chrome.scripting.executeScript(
        {
            target:{tabId: tab.id, allFrames: true},
            func:grabImages
        },
        onResult
    )
}

/**
 * Executed on a remote browser page to grab all images
 * and return their URLs
 * 
 *  @return Array of image URLs
 */
function grabImages() {
    const images = document.querySelectorAll("img");
    return Array.from(images).map(image=>image.src);    
}

/**
 * Executed after all grabImages() calls finished on 
 * remote page
 * Combines results and copy a list of image URLs 
 * to clipboard
 * 
 * @param {[]InjectionResult} frames Array 
 * of grabImage() function execution results
 */
function onResult(frames) {
    // If script execution failed on remote end 
    // and could not return results
    if (!frames || !frames.length) { 
        alert("Could not retrieve images from specified page");
        return;
    }
    // Combine arrays of image URLs from 
    // each frame to a single array
    const imageUrls = frames.map(frame=>frame.result)
                            .reduce((r1,r2)=>r1.concat(r2));
    // Copy to clipboard a string of image URLs, delimited by 
    // carriage return symbol  
    window.navigator.clipboard
          .writeText(imageUrls.join("\n"))
          .then(()=>{
             // close the extension popup after data 
             // is copied to the clipboard
             window.close();
          });
}

Závěr

Poté můžete otevřít libovolnou webovou stránku prohlížeče s obrázky, klikněte na Image Grabber rozšíření pro otevření jeho vyskakovacího rozhraní a poté klikněte na tlačítko "UHNOUT NYNÍ". Poté vložte obsah schránky do libovolného textového editoru. Měl by vložit seznam absolutních adres URL všech obrázků z dané webové stránky.

Můžete klonovat a používat úplný zdrojový kód tohoto rozšíření z mého úložiště GitHub:https://github.com/AndreyGermanov/image_grabber. Doporučil bych však vytvořit toto rozšíření od začátku při čtení tohoto článku.

Toto je pouze první část tutoriálu související s tímto rozšířením. Ve druhé části použiji tento seznam adres URL obrázků k vytvoření dalšího rozhraní pro toto rozšíření, které umožní stáhnout všechny nebo vybrané obrázky z tohoto seznamu jako jediný archiv ZIP. To je rozhodně užitečnější než mít jen seznam adres URL ve schránce. Také ukážu, jak zabalit dokončené rozšíření a nahrát jej do Internetového obchodu Chrome, který jej zpřístupní komukoli.

Přečtěte si část 2 zde:https://dev.to/andreygermanov/create-a-google-chrome-extension-part-2-image-grabber-47h7.

Neváhejte se připojit a sledovat mě na sociálních sítích, kde zveřejňuji oznámení o svých článcích, podobně jako tento a další novinky z vývoje softwaru:

LinkedIn:https://www.linkedin.com/in/andrey-germanov-dev/
Facebook:https://web.facebook.com/AndreyGermanovDev
Twitter:https://twitter.com/GermanovDev