Obsidian Web Clipper

Obsidian Web Clipper ist eine offiziell von Obsidian entwickelte Browsererweiterung. Sie kann jede Webseite mit einem einzigen Klick als lokale Markdown-Notiz speichern.

Obsidian Web Clipper ist kostenlos, Open Source und werbefrei. Es ist ein leistungsstarkes Werkzeug zum Aufbau Ihrer persönlichen Wissensdatenbank.

Installation

Web Clipper unterstützt alle gängigen Browser. Installieren Sie ihn einfach aus dem entsprechenden Store.

Browser	Installationslink
Chrome / Brave / Arc / Vivaldi	Chrome Web Store
Firefox	Firefox-Add-ons
Safari（iOS / macOS）	App Store
Edge	Edge-Add-ons

Nach der Installation klicken Sie auf das Obsidian-Symbol in der Browser-Symbolleiste, um das Clipper-Panel zu öffnen.

Bei der ersten Verwendung erkennt es automatisch Ihren laufenden Obsidian-Vault und stellt die Verbindung her; es ist keine zusätzliche Konfiguration erforderlich.

Sie können die Sprache in den Einstellungen auf Chinesisch stellen. Klicken Sie auf das Obsidian-Symbol und dann auf die Schaltfläche Einstellungen:

Stellen Sie in den allgemeinen Optionen die Sprache auf Chinesisch:

Kernfunktionen

Web Clipper bietet zwei primäre Nutzungsmodi:Ganzseitiges ClippingundHervorhebungs-Clipping。

Ganzseitiges Clipping

Öffnen Sie eine beliebige Webseite, klicken Sie auf das Symbol der Erweiterung und dann auf „Zu Obsidian hinzufügen“. Der Seiteninhalt wird im Markdown-Format in Ihrem Vault gespeichert.

Web Clipper extrahiert automatisch die folgenden Inhalte:

Artikeltext (Entfernen von Werbung und Seitenleisten)
Titel, Autor, Veröffentlichungsdatum, Beschreibung
Seiten-URL und Quell-Domain
Codeblöcke (unter Beibehaltung von Syntaxhervorhebungsmarkern), mathematische Formeln (LaTeX-Format)

Hervorhebungs-Clipping

Möchten Sie nicht den ganzen Artikel speichern? Wählen Sie die Absätze aus, die Sie interessieren, klicken Sie auf die Hervorheben-Schaltfläche, und nur der markierte Teil wird gespeichert.

Hervorgehobener Inhalt wird als Blockzitat (>) in die Notiz geschrieben. Wenn du die Seite erneut besuchst, bleiben deine Hervorhebungen sichtbar.

Der Workflow ist wie folgt:

Wähle Text oder Bilder auf der Seite mit der Maus aus
Klicke auf das Erweiterungssymbol
Wähle "Highlight selection"
Nachdem du alle Hervorhebungen gesammelt hast, klicke auf "Add to Obsidian", um sie auf einmal zu speichern

Du kannst auch mit der rechten Maustaste klicken und Obsidian Web Clipper auswählen, um zu speichern:

Vorlagen: Clipping intelligenter machen

Dies ist die leistungsstärkste Funktion von Web Clipper.

Standardmäßig werden alle Webseiten im selben Format gespeichert, aber mit Vorlagen kannst du die Speicherstruktur für verschiedene Arten von Webseiten anpassen.

Unter den Vorlagenoptionen auf der Einstellungsseite kannst duDefaultsehen:

Integrierte Vorlagentypen

Die offizielle Website von Web Clipper zeigt mehrere typische Vorlagen für verschiedene Szenarien:

Vorlagentyp	Extrahierter Inhalt	Anwendungsfall
Artikelvorlage	Füllt automatisch Autor, Veröffentlichungsdatum und Beschreibung aus; der Textkörper wird im Artikelformat gespeichert.	Inhalte lesen, Blogs, Nachrichten
Rezeptvorlage	Extrahiert Zutatenliste (automatisch in To-do-Checkboxen - [ ] umgewandelt), Schritte, Nährwertinformationen	Kochlisten-Verwaltung, funktioniert am besten mit dem Tasks-Plugin.
Film-/Buchvorlage	Extrahiert Regisseur, Bewertung, Dauer, Besetzung, Handlung usw.	Mit dem Dataview-Plugin verwenden, um eine Datenbank mit Film-Sehprotokollen zu erstellen.
Vorlage für wissenschaftliche Arbeiten	Behält Codeblöcke und LaTeX-Formeln vollständig bei	arxiv, ACM Digital Library und andere akademische Websites

Benutzerdefinierte Vorlagen erstellen

In den Erweiterungseinstellungen → Vorlagen → Neue Vorlage können Sie Folgendes anpassen:

Konfigurationsoption	Beschreibung	Beispiel
Vorlagenname	Der Bezeichnername der Vorlage	"YouTube-Video", "GitHub-Repository"
Notizname	Unterstützt Variablen	{{title}}oder{{date}}-{{title}}
Speicherort	Geben Sie einen Ordner im Vault an	Clippings/Articles
Eigenschaften	Strukturierte Eigenschaften, die automatisch oben in der Notiz ausgefüllt werden (YAML-Frontmatter)	author, published, tags, usw.
Notizinhalt	Vollständig anpassbare Markdown-Vorlage	Kann Variablen und beliebigen Markdown-Inhalt einbetten

Automatischer Vorlagen-Trigger

Nach dem Festlegen der "Vorlagen-Trigger-Bedingungen" wird beim Besuch bestimmter Websites die entsprechende Vorlage automatisch angewendet, ohne manuelle Auswahl.

Auslösebedingung	Automatisch angewendet
URL enthältyoutube.com	YouTube-Vorlage
URL enthältarxiv.org	Paper-Vorlage
URL enthältamazon.com	Shopping-Vorlage

Schnellreferenz für Vorlagenvariablen

Vorlagen können Variablen verwenden, um Seitendaten automatisch auszufüllen, im Format{{variable name}}。

Gängige voreingestellte Variablen

Variable	Beschreibung
{{title}}	Seitentitel
{{url}}	Aktuelle URL
{{author}}	Autor
{{published}}	Veröffentlichungsdatum
{{description}}	Seitenbeschreibung
{{content}}	Inhalt (Markdown-Format)
{{highlights}}	Alle hervorgehobenen Inhalte
{{date}}	Aktuelles Datum
{{site}}	Website-Name
{{domain}}	Domäne
{{image}}	Social-Share-Bild-URL
{{words}}	Wortanzahl

Erweiterte Variablen

Meta-VariablenWerden verwendet, um den<meta>-Inhalt der Seite in <meta>-Tags zu extrahieren:

Beispiel

{{meta:name:description}} ← description-Meta-Tag
{{meta:property:og:title}} ← Open-Graph-Titel

CSS-Selektor-VariablenWerden verwendet, um bestimmte Elemente präzise aus der Seite zu extrahieren:

Beispiel

{{selector:h1}} ← Text der h1-Überschrift extrahieren
{{selector:.author}} ← Das Element mit der Klasse "author" extrahieren
{{selector:img.hero?src}} ← Das src-Attribut eines bestimmten Bildes extrahieren

Schema.org-VariablenWird verwendet, um Informationen aus strukturierten Daten zu extrahieren:

Beispiel

{{schema:@Recipe:name}} ← Rezeptname
{{schema:@Article:author}} ← Artikelautor
{{schema:author.name}} ← Ohne Angabe eines Typs direkt author.name abrufen

KI-Prompt-Variablen (Prompt-Variablen)Erfordert die Aktivierung der Interpreter-Funktion zur Verwendung:

Beispiel

{{"Fasse diesen Artikel in drei Sätzen zusammen"}}
{{"Extrahiere alle Personennamen aus dem Text und gib sie als Liste zurück"}}
{{"Übersetze die Kernargumente ins Chinesische"}}

Praktisches Vorlagenbeispiel: Artikel-Clipping

Das Folgende ist eine vollständige Artikelvorlagen-Konfiguration. Du kannst sie direkt in den Einstellungen erstellen und verwenden.

Notizname

Beispiel

Speicherort

Beispiel

Clippings/Articles

Eigenschaften (YAML-Frontmatter)

Beispiel

span style="color: green;">
Kategorie: Ausschnitte
Autor: "{{author}}"
Veröffentlicht: "{{published}}"
Quelle: "{{url}}"
Website: "{{site}}"
Beschreibung: "{{description}}"
Tags: [Ausschnitte, Artikel]

Notizinhalt

Beispiel

> [!info] Quelle
> Autor: {{author}} | Veröffentlicht: {{published}} | [Original-Link]({{url}})

{{content}}

Datenschutz und Datenhoheit

Dies ist der größte Vorteil von Web Clipper im Vergleich zu Diensten wie Pocket und Instapaper.

Alle Inhalte werden lokal gespeichert. Die geclippten Notizen sind .md-Dateien auf Ihrer Festplatte, und es werden keine Inhalte auf einen Server hochgeladen.
Highlights und Einstellungen können als JSONexportiert werden, was jederzeit eine Migration ohne Lock-in-Risiko ermöglicht.
Wenn Sie Prompt-Variablen zum Aufrufen von KI verwenden, werden Daten an den von Ihnen konfigurierten KI-Dienstanbieter gesendet (z. B. OpenAI). Dies ist das einzige Szenario, das eine Netzwerkübertragung umfassen kann.

Häufig gestellte Fragen

Im Folgenden finden Sie häufige Probleme und Lösungen bei der Verwendung von Web Clipper.

Problem	Lösung
Kann die Datei nach dem Clipping nicht in Obsidian gefunden werden?	Prüfen Sie, ob der "Vault" in den Erweiterungseinstellungen auf den richtigen Obsidian-Vault verweist und ob der unter "Note Location" festgelegte Ordner existiert.
Wird der Inhalt des Textkörpers ungenau extrahiert, sodass Werbung und Navigationsleisten beigemischt werden?	Wechseln Sie im Vorlagen-Body zur Verwendung von{{selector:article}}oder{{selector:.post-content}}CSS-Selektoren wie ... um Inhalte für bestimmte Websites präzise zu extrahieren.
Kann ich gleichzeitig in mehrere Vaults speichern?	Sie können auf der Seite "Allgemein" in den Erweiterungseinstellungen mehrere Vaults hinzufügen und in jeder Vorlage separat den Ziel-Vault angeben.
Funktioniert es unter Safari?	Ja. Die Safari-Version ist sowohl für iOS als auch für macOS verfügbar und kann aus dem App Store installiert werden. Ihre Funktionen sind im Wesentlichen dieselben wie bei der Desktop-Browser-Version.

Weitere Ressourcen

Offizielle Website:obsidian.md/zh/clipper
Offizielle Dokumentation (vollständige Liste der Variablen):help.obsidian.md/web-clipper/variables
Community-Vorlagenbibliothek:github.com/obsidian-community/web-clipper-templates
Quellcode (Open Source):github.com/obsidianmd/obsidian-clipper

Andere Erweiterungen