DOCSEARCHbyAlgolia
Submit Docs

Obsidian Web Clipper

repository·main·Indexed 26 days ago

https://github.com/obsidianmd/obsidian-clipper

Official browser extension for Obsidian that allows users to highlight and capture web content as durable Markdown files. Supports Chromium-based browsers, Firefox, and Safari. Features include custom templates, a variety of text and date filters, HTML-to-Markdown conversion, and the ability to save content directly to specific Obsidian vaults and folders.

Tokens
11.2K
Snippets
30
Records
92
Agent score
40%

What's inside obsidian-clipper

  1. Overview of Obsidian Web Clipper features

    main

    The Obsidian Web Clipper provides several ways to capture and process web content for your vault:

    • Clipping: Save full web pages as Markdown files.
    • Highlighter: Select specific elements or highlight important passages to save.
    • Interpreter: Use natural language prompts to capture and modify data on a page.
    • Templates: Create custom templates for specific websites to control how content is saved.
    • Template Customization: Use Variables to pre-populate data, Filters to modify variable output, and Logic (conditionals and loops) to add complexity to your templates.

  2. Navigate the Web Clipper interface

    main

    The Web Clipper interface is organized into four functional sections:

    1. Header

    Used for configuration and mode switching. Includes:

    • Template dropdown: Switch between saved templates.
    • More (...) button: View available page variables for use in templates.
    • Highlighter button: Toggle highlighting mode.
    • Cog button: Open Web Clipper settings.

    2. Properties

    Displays the metadata extracted from the page that will be saved as Obsidian Properties.

    3. Note content

    Shows the actual content that will be saved to Obsidian.

    4. Footer

    Used for final saving actions. Includes:

    • Add to Obsidian button: Saves the data to your vault.
    • Vault dropdown: Switch between saved vaults.
    • Folder field: Specify the destination folder.
    • Interpreter: Run natural language prompts on the page content.

  3. Optimize Interpreter context length

    main

    By default, Interpreter uses the entire page HTML as context, which can be slow or expensive. You can reduce the context size to improve speed and accuracy using two methods:

    1. Targeted Selectors: Use selector variables in your template to only send specific parts of the page to the model.
      • Example: {{selectorHtml:#main}} only sends the #main element.
    2. HTML Processing Filters: Use filters to strip unnecessary data from the context.
      • Useful filters: remove_html, strip_tags, and strip_attr.
    3. Content Slicing: Use the slice filter to limit the amount of text sent.
      • Example: {{content|slice:0,1000}}
    {{selectorHtml:#main}}

  4. Install the extension locally on Firefox

    main

    To load a locally built version of the extension in Firefox:

    1. Navigate to about:debugging#/runtime/this-firefox.
    2. Click Load Temporary Add-on.
    3. Navigate to the dist_firefox directory and select the manifest.json file.

    Note: Temporary add-ons are removed when Firefox restarts. To run the extension permanently, you must use Firefox Nightly or Developer Edition and disable signature requirements by setting xpinstall.signatures.required to false in about:config.

  6. Automatically trigger templates using URL or Schema.org

    main

    Template triggers allow you to automatically select a template based on the page URL or schema.org data. Rules are evaluated in the order they appear in your template list; the first match wins. You can reorder templates in settings to change matching priority.

    Simple URL matching

    Matches if the current page URL starts with the provided pattern. Example: https://obsidian.md

    Regular expression matching

    Matches complex URL patterns. Enclose the pattern in forward slashes (/) and escape special characters (e.g., \. or \/). Example: /^https:\/\/www\.imdb\.com\/title\/tt\d+\/reference\/?$/

    Schema.org matching

    Matches based on structured data using the schema: prefix. You can match by type, presence of a key, or a specific value.

    • Match by type: schema:@Recipe (matches if the page is a Recipe).
    • Match by key presence: schema:@Recipe.name (matches if the name field exists).
    • Match by specific value: schema:@Recipe.name=Cookie (matches if the name is 'Cookie').

  10. Bump project version

    main

    Use the bump-version.sh script to synchronize the version across the entire project. This updates:

    • The version field in package.json.
    • All browser manifests.
    • dev/manifest.json.
    • MARKETING_VERSION in the Xcode project.
    • CURRENT_PROJECT_VERSION (increments by 1).
    ./scripts/bump-version.sh 1.0.1

  11. Capture a web page with Obsidian Web Clipper

    main

    To save a web page to Obsidian, open the extension and click the Add to Obsidian button.

    By default, the clipper attempts to extract only the main article content. You can override this extraction behavior using the following methods:

    • Custom Templates: If a custom template is configured, the clipper uses that template's logic.
    • Selections: If you have text selected on the page, the clipper will use that selection (use Ctrl/Cmd+A to select the entire page).
    • Highlights: If you have active highlights on the page, the clipper will use those highlights.