Scharf Beobachtet

Tech Know How

Eine simple Google Chrome Browser Extension erstellen

2021-11-06 16:02:54

Für eine erste, eigene Extension in Google Chrome bedarf es einer Hand voll Dateien in bestimmtem Format.

Im Google Chrome in die Adresszeile folgendes eingeben und aufrufen:

chrome://extensions/

Dort oben rechts den Entwicklermodus aktivieren

Nun gehts an die Dateien. Zunächst ein Verzeichnis erstellen, mit beliebigem Namen. Darin legen wir eine manifest.json ab, mit folgendem Inhalt:

{
    "name": "Traffic Monitor",
    "description": "Watch requests of websites",
    "version": "1.0",
    "manifest_version": 3,
    "background": {
        "service_worker": "background.js"
      },
    "host_permissions": [
      "*://www.stackoverflow.com/*",
      "*://stackoverflow.com/*"
    ],
    "permissions": [
        "webRequest"
      ]
}

Dazu legen wir noch eine background.js

(function () {
    const networkFilters = {
        urls: [
            "*://www.stackoverflow.com/*",
            "*://stackoverflow.com/*"
        ]
    };

    chrome.webRequest.onBeforeRequest.addListener((details) => {
        console.log('EXT onBeforeRequest', details);
    }, networkFilters);

    chrome.webRequest.onCompleted.addListener((details) => {
        console.log('EXT onCompleted', details);
    }, networkFilters);

    chrome.webRequest.onErrorOccurred.addListener((details) => {
        console.log('EXT onErrorOccurred', details);
    }, networkFilters);

    chrome.tabs.onActivated.addListener((tab) => {
        console.log('EXT onActivated', tab);
    });
    chrome.tabs.onRemoved.addListener((tab) => {
        console.log('EXT onRemoved', tab);
    });

}());

Nun im Google Chrome die „entpackte Erweiterung“ laden, also das eben angelegte Verzeichnis anwählen.

Ansicht einer Google Chrome Extension
Google Chrome Extension

Kurz zum Inhalt: wir haben nun eine Manifest-Datei angelegt, die beschreibt wie die Extension heißt und was sie darf, bzw. worauf sie zugreifen darf.

Mit der background.js haben wir einen Service Worker in Chrome eingehängt (wenn die Extension dann läuft), der alle Requests zu sehen bekommt und auch alle Events in dem offenen Tab

Das Setting der o. g. Extension ist auf stackoverflow.com eingestellt. Hat man die Extension installiert, kann man per Klick auf den Service Worker den Dev Tools View öffnen und somit alles sehen, was – wie im Service Worker definiert, über stackoverflow.com an Requests läuft.

Das kann natürlich auch beliebig angepasst werden. So kann im Permission Mapping der manifest.json festgehalten werden, auf welchen Seiten die Extension greift und im Service Worker welche Urls ein Monitoring erfahren.

Alle Callbacks aus dem Service Worker der Google Extension

So könnte man auch zum Beispiel Zugriffe auf Google Analytics anzapfen und sich besser aufbereiten. Um das Fenster zu öffnen, muss man lediglich auf dem Extensions View im Browser auf den Service Worker Link klicken. Und dann die Seite neu laden, in der man stackoverflow.com geöffnet hat.

So sieht zum Beispiel ein JSON Objekt aus einem der Listener aus:

Auszug eines JSON Requests über die Google Extension
Zurück