Erstellen von Chrome-Erweiterungen: Ein kurzer Überblick

Mods – Modifikationen? Wenn Sie sich für Spiele interessieren, wissen Sie, dass es nichts Schöneres gibt, als ein modifiziertes Spiel zu spielen. Es ist Ihr Lieblingsspiel, aber mit zusätzlicher Leistung, Funktionen und Spaß. Stellen Sie sich nun vor, dass Sie die gleiche Spannung auch beim Surfen im Internet erleben würden. Genau das machen Browser-Erweiterungen – sie sind wie Mods für Ihren Browser, die ihn auf eine Weise aufladen, die Sie nie für möglich gehalten hätten.

Mit einer Chrome-Erweiterung können Sie Ihren Browser perfekt an Ihre Bedürfnisse anpassen – sei es, indem er bestimmte URLs blockiert, neue Funktionen hinzufügt oder ihm sogar ein völlig neues Aussehen verleiht. Und das Beste daran? Sie können diese Erweiterungen selbst erstellen. In dieser Anleitung führe ich Sie Schritt für Schritt durch den Prozess der Erstellung Ihrer eigenen Chrome-Erweiterung.

---

Der Einstieg in Web-Erweiterungen ist einfacher als Sie denken! Wenn Sie JavaScript beherrschen, ist es ein Kinderspiel – Sie müssen nur eine neue API erlernen. Schließlich handelt es sich im Kern immer noch um JavaScript.

Dieser Artikel ist eine Ergänzung zu: The Chrome Extensions Handbook: Memory-Heavy to Production-Ready

---

Inhaltsverzeichnis

• Weberweiterungen 101
• Das Manifest aufschlüsseln:
• Einen einfachen Bild-Downloader erstellen
• Die Download-Funktion:
• Wir sind bereit, unsere Erweiterung zu testen
• Laden der Erweiterung
• Fazit

Weberweiterungen 101

Weberweiterungen sind wie Mods, jedoch für Browser. Sie können vollständig anpassen, wie sich der Browser verhält – denken Sie an AdBlock – oder wie er aussieht, wie bei Mozilla-Themes.

Erstellen Sie zunächst einen neuen Ordner!

Alles, was Sie brauchen, ist eine manifest.json. Dies ist die Hauptfunktion, außer für Web-Erweiterungen. Es ist die erste Datei, nach der der Browser sucht!

{
    "manifest_version": 3,
    "name": "img-downl",
    "version": "1.0",
    "description": "image ac?",
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["content.js"]
        }
    ],
    "permissions": [
        "activeTab"
    ]
}

Das Manifest enthält alle Metadaten für Ihre Erweiterung. Es geht darum, wie Browser Ihre Erweiterung verstehen und was sie kann.

---

Das Manifest aufschlüsseln:

• „manifest_version“: 3, Dadurch wird dem Browser mitgeteilt, welche API-Version Sie verwenden werden. Während Version 2 die vorherige ist, ist Version 3 (V3) die neueste API. Es ist sicherer und leistungsfähiger und die meisten Browser, einschließlich Chrome, sind nur auf Version 3 umgestiegen.

Ein wesentlicher Unterschied ist der Übergang von persistenten Hintergrundskripten zu Servicemitarbeitern. Hintergrundskripte in V2 wurden während der gesamten Lebensdauer einer Erweiterung ausgeführt (während der Benutzer surft), daher der „persistente“ Aspekt. In V3 werden sie nur bei Bedarf ausgeführt!

• Inhaltsskripte: Inhaltsskripte werden in die Webseite selbst eingefügt. In unserer kleinen Erweiterung wird content.js in jede URL eingefügt, die mit „matches“ übereinstimmt: [„“]. Wenn Sie also zu einer beliebigen URL navigieren oder einen neuen Tab öffnen, wird content.js in die Seite eingefügt und ausgeführt.

Inhaltsskripte haben im Gegensatz zu Hintergrundskripten Zugriff auf das DOM.

Dies ist die Grundstruktur eines einfachen Plugins. Wenn Sie weitere Erweiterungsprojekte erstellen, erfahren Sie mehr über Berechtigungen und zusätzliche Funktionen. Für eine Einführung reicht diese einfache Aufschlüsselung.

---

Erstellen eines einfachen Bild-Downloaders

Fertig?

Diese Erweiterung ist von einem Computer-Vision-Kurs inspiriert, den ich vor einiger Zeit besucht habe. Wir mussten ein Tool zum Herunterladen von Bildern aus der Google-Suche implementieren.

Hinweis: Ich empfehle nicht, diese Erweiterung ständig laufen zu lassen, es sei denn, Sie möchten bei jedem Surfen Bilder herunterladen.

Erstellen Sie im selben Ordner wie Ihre manifest.json content.js und fügen Sie Folgendes ein:

async function processAllImages() {
    const images = document.querySelectorAll('img');
    let count = 0;
    for (const img of images) {
        const url = img.src;
        const filename = `image${count++}.png`; // Generate a filename for each image
        try {
            await downloadImage(url, filename);
            console.log(`Downloaded ${filename}`);
        } catch (error) {
            console.error(`Error downloading image from ${url}:`, error);
        }
    }
}
// Run the function to process and download images
processAllImages();

Denken Sie daran, dass ein Inhaltsskript in eine Webseite eingefügt wird. Wenn Sie beispielsweise zu example.com navigieren, wird „processAllImages“ ausgeführt.

Es greift lediglich alle Bildelemente und übergibt sie an eine Download-Funktion:

const images = document.querySelectorAll('img');

---

Die Download-Funktion:

async function downloadImage(url, filename) {
    return new Promise((resolve, reject) => {
        fetch(url)
            .then(response => {
                if (!response.ok) throw new Error('Network response was not ok.');
                return response.blob();
            })
            .then(blob => {
                const a = document.createElement('a');
                a.href = URL.createObjectURL(blob);
                a.download = filename;
                a.style.display = 'none';
                document.body.appendChild(a);
                a.click();
                URL.revokeObjectURL(a.href); // Clean up the object URL
                document.body.removeChild(a);
                resolve();
            })
            .catch(error => reject(error));
    });
}

Hinweis: Dies funktioniert nur für statische Bilder. Dynamische und verzögert geladene Bilder können beschädigt sein – das können Sie in zukünftigen Iterationen beheben.

---

Wir sind bereit, unsere Erweiterung zu testen

Ich verwende Brave, das auf Chrome basiert, aber der Vorgang ist bei allen Browsern ähnlich.

Zum Testen müssen Sie den Entwicklermodus in Ihrem gewählten Browser aktivieren.

---

Laden der Erweiterung

Diese Erweiterung sollte unverändert auch in Mozilla funktionieren, da wir nicht auf den Chrome-Namespace angewiesen sind.

          Mutig:        

              Geben Sie brave://extensions/ in die Adressleiste ein.        

              Entwicklermodus aktivieren.      

              Laden Sie die Erweiterung, indem Sie den Ordner auswählen.
             

   Chrome und Edge: Befolgen Sie ähnliche Schritte wie bei Brave.

         (chrome://extensions/ oder edge://extensions/)

     

---

Abschluss

Mods – Modifikationen machen Spaß! Diese Erweiterung mag einfach sein, zeigt aber die Grundlagen, die Ihnen den Einstieg erleichtern. Mozillas MDN ist eine perfekte Ressource, um Ihr Wissen über Weberweiterungen (sowohl allgemeine Weberweiterungen als auch browserspezifische) zu erweitern.

Denken Sie daran: Deaktivieren Sie die Erweiterung oder deinstallieren Sie sie, wenn Sie fertig sind, um unerwünschte Downloads zu vermeiden.

Oder noch besser…

Eine Herausforderung: Finden Sie eine Möglichkeit, Eingaben zu empfangen (Hinweis: Klick, Symbol und Hintergrundskript) und führen Sie die Funktion „Bilder verarbeiten“ nur aus, wenn der Benutzer auf eine Schaltfläche klickt.

Das obige ist der detaillierte Inhalt vonErstellen von Chrome-Erweiterungen: Ein kurzer Überblick. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!