Schritt 1: Extension erstellen

Geht eigentlich relativ einfach:

Anlegen eines Verzeichnisses auf der Festplatte. Darin 2 Dateien ablegen:

manifest.json und content.js

Die manifest.json enthält die Infos über das Plugin und welches JS (content.js) wann (all_urls) aufzurufen ist:

{
  "manifest_version": 2,
  "name": "My Cool Extension1",
  "version": "0.1",
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": ["content.js"]
    }
]
}

die content.js enthält den Code der ausgeführt werden soll:

alert("hallo");

Schritt 2: Extension installieren

Rufe: chrome://extensions/

aktiviere rechts den Entwicklermodus

dann wähle:

Wähle das Verzeichnis mit den beiden Dateien aus und lade.

Wenn du nun eine neue Webseite aufmachst, erscheint immer das "hallo".

Wenn du das js änderst musst du die Extension erst entfernen und dann neu laden.

um zB aus Google Daten auszulesen und diese an den eigenen Server zu senden (via Fake Script)


try{


var result = "";

//search for searchbox
result = result + "&searchfor=" + document.querySelector('[aria-label="Suche"]').value;



let myScript = document.createElement("script");
myScript.setAttribute("src", "https://www.mypage.com/foo.php?botstuff=1"+encodeURI(result));
document.body.appendChild(myScript);




}
catch (e) {};

hier wäre es dann besser die Manifest umzubauen in


{
  "manifest_version": 2,
  "name": "My Cool Extension1",
  "version": "0.1",
  "content_scripts": [
    {
      "matches": ["https://www.google.com/*", "https://www.google.de/*"]   ,
      "js": ["content.js"]
    }
]
}

und schon läufts

Mehr:

  • https://thoughtbot.com/blog/how-to-make-a-chrome-extension und
  • https://www.tomforth.co.uk/chromeextension/

Wichtiger Hinweis zu Manifest V3

Das obige Beispiel nutzt manifest_version 2. Chrome stellt inzwischen auf Manifest V3 um; neue Erweiterungen sollten darauf setzen. Das Grundprinzip bleibt gleich – ein Manifest plus ein Content-Script –, einige Felder unterscheiden sich aber.

Eine minimale Erweiterung mit Manifest V3

{
  "manifest_version": 3,
  "name": "My Cool Extension",
  "version": "0.1",
  "content_scripts": [
    {
      "matches": ["https://www.google.com/*"],
      "js": ["content.js"]
    }
  ]
}

Die content.js enthält den Code, der auf den passenden Seiten ausgeführt wird. Installiert wird die Erweiterung unverändert über chrome://extensions/ → Entwicklermodus aktivieren → „Entpackte Erweiterung laden" → das Verzeichnis auswählen.

Sinnvolle, legitime Einsatzzwecke

  • Eigene Seiten testen und Debug-Informationen einblenden.
  • Wiederkehrende Aufgaben im Browser automatisieren.
  • Daten von eigenen Anwendungen oder mit ausdrücklicher Erlaubnis auslesen.

Rechtliches & Fairness

Beim Auslesen fremder Seiten ist Vorsicht geboten: Das automatisierte Abgreifen von Suchmaschinen- oder Drittanbieter-Daten verstößt häufig gegen deren Nutzungsbedingungen und kann rechtliche Folgen haben. Wer Daten erhebt, sollte zudem Datenschutz und Urheberrecht beachten. Für eigene Projekte und mit klarer Berechtigung sind Erweiterungen aber ein mächtiges, einfaches Werkzeug.

Weiterführend

Gute Einstiege bieten die offizielle Chrome-Entwicklerdokumentation sowie Tutorials wie das von thoughtbot.