# 05.06.2025 Browser Extension
## Einleitung
Das Ziel dieses Versuches ist die Entwicklung einer Browser Extension. 
Eine Browser Extension ist ein kleines Programm, welches entwickelt wird, um die Funktionalität eines Webbrowsers zu erweitern. 

Browser Extensions kommen in verschiedenen Bereichen zum Einsatz. Zu den bekannteren Beispielen zählen:
- Werbeblocker
- Passwortmanager
- Sprachübersetzer

Diese sorgen für ein angenehmeres und einfacheres Surfen im Internet.¹


Technisch gesehen bestehen Browser Extensions aus einer Kombination von HTML, CSS und JavaScript. Dadurch lassen sich Benutzeroberflächen gestalten und Interaktion umsetzen. Zumdem gibt es eine JSON-Datei (meist manifest.json), welche grundlegende Einstellungen und Funktionen festlegt. Auch Berechtigungen können von dort aus vergeben werden.

Ein weiterer wichtiger Aspekt ist die Sicherheit. Extensions haben direkten Zugriff auf die Inhalte der Websiten und teilweise auf Benutzereingaben. Dadurch können persönliche Daten gesammelt werden. Deshalb gibt es strenge Anforderungen für Datenschutz und Rechtevergaben.²

Für unseren Versuch haben wir uns entschieden eine Extension für Google Chrome und für Mozilla Firefox zu entwickeln. Diese Übersetzt Inhalte der Browserseiten automatisch in Morse-Code. 



## Chrome

### manifest.json

```json
{
  "manifest_version": 3,
  "name": "Morse Code Converter",
  "version": "1.0",
  "description": "Konvertiert Seiteninhalt in Morsecode",
  "permissions": ["activeTab", "scripting"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["morse.js", "content.js"]
    }
  ],
  "icons": {
    "128": "icon.png"
  }
}
```

Innerhalb dieser Datei befinden sich alle wichtigen Angaben zur Extension. Dazu gehören:

- Manifestversion
- Name
- Versionsnummer
- kurze Beschreibung
- optional ein Bild

Zusätzlich dazu werden hier auch Rechte und Skripte festgelegt.

`"permissions": ["activeTab", "scripting"]` legt fest, dass die Extension nur den aktuell ausgewählten Tab verarbeitet und dass Skripte ausgeführt werden dürfen.

```json
"content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js": ["morse.js", "content.js"]
  }
]
```

Hiermit werden die JavaScript-Dateien eingebunden, die für die Verarbeitung des Seiteninhalts benötigt werden. Mithilfe von `matches` könnten auch noch genauere Anforderungen an den Webseitentyp festgelegt werden.

### content.js

Zunächst muss die Extension den Zugriff auf alle Textzeilen einer Seite ermöglichen. Hierfür machen wir uns den DOM-basierten Aufbau von HTML-Seiten zunutze. Diese Struktur ist vergleichbar mit einem Baum. Es gibt ein Wurzelelement, welches beliebig viele Knoten beinhaltet. Jeder dieser Knoten kann daraufhin wieder beliebig viele Elemente beinhalten. Die Struktur endet, sobald jeder "Ast" bis zum letzten "Blatt" verarbeitet wurde. Ein Blatt ist ein Element, von dem keine weiteren Knoten mehr ausgehen.

```js
function walk(node) {
  // If node is text -> translate text
  if (node.nodeType === Node.TEXT_NODE) {
    node.textContent = toMorse(node.textContent);
  }
}
walk(document.body);
```

Um diese Struktur zu verarbeiten, kann man eine rekursive Funktion verwenden. Diese überprüft, ob es sich beim aktuellen Knoten um ein Textelement (also ein Blatt, das Text darstellt) handelt. Ist dies der Fall, wird eine Methode zum Übersetzen des Textes aufgerufen.

```js
else {
  // else analyse all child elements
  for (let i = 0; i < node.childNodes.length; i++) {
    walk(node.childNodes[i]);
  }
}
```

Falls das Element kein Text-Knoten ist, wird für jedes Kindelement die Funktion erneut aufgerufen. Der Prozess ist beendet, wenn alle Knoten abgearbeitet sind.

### morse.js

Die eigentliche Übersetzung des Textes befindet sich in `morse.js`. Analog zu vorherigen Morse-Konvertern befindet sich auch hier eine Map mit den einzelnen Zeichen und Übersetzungen. Der Textinhalt wird zunächst in Kleinbuchstaben umgewandelt, da das Morse-Alphabet Groß- und Kleinschreibung nicht unterscheidet. Anschließend wird jedes Zeichen auf das entsprechende Morsezeichen übersetzt. Falls das Zeichen nicht in der Übersetzungsmap zu finden ist, wird es unübersetzt zurückgegeben. Anschließend werden die Buchstaben mit Leerzeichen voneinander getrennt ausgegeben.

```js
function toMorse(text) {
  return text
    .toLowerCase()
    .split("")
    .map((char) => morseMap[char] || char)
    .join(" ");
}
```

### Verwendung

1. Um den Morse Converter zu verwenden, muss zuerst das Menü „Erweiterungen“ geöffnet werden.
2. Hier kann man nun den sogenannten „Entwicklermodus“ aktivieren, um das Importieren eigener Erweiterungen zu ermöglichen.
3. Anschließend klickt man auf „Entpackte Erweiterung laden“ und öffnet das Projektverzeichnis der Morse-Browser-Extension.
4. Nun muss die Erweiterung nur noch aktiviert werden, um den Webseiteninhalt jeder beliebigen Webseite in Morsecode zu übersetzen.

## Firefox

Tatsächlich kan die für Chrome geschriebene Extension auch in Firefox verwendet werden.

### Verwendung

1. Firefox öffnen und zu about:debugging#/runtime/this-firefox navigieren (in der Adresszeile)
2. Auf "Load Temporary Add-on"(Temporäres Add-on Laden) klicken .
3. Irgendeine Datei der extension aus wählen (z.B., manifest.json).
4. Eine Seite besuchen. Die Seite wird automatisch übersetzt.


1: https://datei.wiki/definition/browser-erweiterung-erklaert/
2: https://informationssicherheitsbeauftragter-dresden.de/gefaehrliche-chrome-erweiterungen-so-schuetzen-sie-sich/