Create Obsidian Web Clip Summaries on MacOS with Firefox and Llama 3.2

November 29, 2024

I use Obsidian to capture information like my daily todo lists; notes about things I've read, listened to, watched, or done; reminders about repeating chores and home maintenance tasks; trips I'm planning or places I've visited--anything and everything.

I recently learned about the Obsidian web clipper browser extension. I was intrigued by some of the features shown on the landing page. I started thinking about how it might improve my workflows for indexing web pages that I want to go back and read in more detail and distilling them into notes for quick reference later. Instead of manually entering all of the page metadata, copy/pasting text from the page into a note, and writing a quick summary, maybe the extension could take a first pass for me.

I set out to get the web clipper Firefox extension configured on my Mac, with a local Meta Llama 3.2 model set as an interpreter to summarize content in some of my templates. The Obsidian help pages explained the basics. I wrote this post to describe the steps I took from top-to-bottom, including what I did to get summaries of acceptable quality in my clippings.¹

Prereqs

I started with the following:

• Macbook Pro M2 w/ 16 GB RAM
• macOS Sequoia 15.x
• homebrew
• Firefox (brew install --cask firefox)
• Obsidian >=1.7.2 (brew install --cask obsidian)

Page Highlights

I installed the extension and created an initial template to store page highlights in Obsidian notes by following the steps below.

1. Install the Obsidian web clipper extension from the Firefox add-ons site.
2. Click the Obsidian icon in the Firefox toolbar and then click the gear to open the settings screen.
3. Add my primary vault named Journal to the Vaults list.
4. Create a New Template named Highlights Only which saves to the untriaged folder in my Journal vault and has Note content {{highlights|map: item => item.text|join:"\n\n"}} (i.e., the text of all my highlights separated by newlines).
5. Update the Properties in the template to align with ones I already use on my Obsidian notes (e.g., url instead of source, clipped instead of created with an ISO-8601 datetime).
6. Delete the Default template.
7. Click Properties in the sidebar and then Remove unused properties so only the metadata I care about are listed.

At this point, I was able to open the extension, click the highlighter icon, select portions of the page, and save notes containing my manual highlights.

Page Summaries

I created a second template that includes a generated page summary in addition to my highlights by taking these steps.

Create an ollama model for summarization

1. Install the Ollama macOS desktop app and CLI with brew install --cask ollama.
2. Run launchctl setenv OLLAMA_ORIGINS 'moz-extension://*' so that the local Ollama server will accept connections from my Firefox browser.²
3. Run the Ollama macOS app from the finder and work through the setup dialog screens until they disappear.³
4. Create a Modelfile with the following content.

# Use the 3B parameter, 2 GB base model file
FROM llama3.2
# Larger context window for page summaries
PARAMETER num_ctx 32768
# Lower temperature for more conservative sampling / less creative summaries
PARAMETER temperature 0.25

5. Run ollama create -f Modelfile llama3.2:ctx32k-t0.25 to create a model config with that ID.
6. Run ollama list and confirm the base and custom models exist.

Enable the model as an interpreter

1. Click the Obsidian icon in the Firefox toolbar and then click the gear to open the settings screen again.
2. Click Interpreter and enable it.
3. Click Add model and enter details about the local Ollama server. - Display name: Llama 3.2 (ctx=32k, t=0.25) - Base URL: http://127.0.0.1:11434/api/chat - Model ID: llama3.2:ctx32k-t0.25 (the ID used when running ollama create earlier) - Provider: Ollama - API key: ollama
4. Drag the new model so that it appears first and disable the other models.

Create a new template

1. Click the Highlights Only template created earlier.
2. Click More -> Duplicate at the top.
3. Name the new template Summary and Highlights.
4. Update the Note content to include a prompt variable.

# AI Summary

{{"Generate a concise, 5 sentence summary of the content within the prior <documentPrefix></documentPrefix> tags."|strip_tags}}

# Highlights

{{highlights|map: item => item.text|join:"\n\n"}}

5. Update the Interpreter context to include a slice of the page content smaller than the context window configured for the model.

<documentPrefix>{{content|slice:0,16384}}</documentPrefix>

After these additional steps, I was able to select the Summary and Highlights template in the extension popup, select the Llama 3.2 (ctx=32k, t=0.25) interpreter, click Interpret to get a preview of generated summary, and save notes containing both the summary and my manual highlights.

Site-Specific Templates

I found that my generic Summary and Highlights template did not work on all sites. The {{content}} variable, for instance, only contains text about cookies on AWS documentation pages. I created a template selected automatically for the AWS docs site by following the steps below.

1. Visit the extension settings again.
2. Click the Summary and Highlights template created earlier.
3. Click More -> Duplicate at the top.
4. Name the new template AWS Docs Summary and Highlights.
5. Put https://docs.aws.amazon.com/ in the Template triggers textbox.
6. Update the Note content with a slightly customized prompt.

# AI Summary

{{"Generate a concise, 5 sentence summary of the AWS docs content within the prior <documentPrefix></documentPrefix> tags."|strip_tags}}

# Highlights

{{highlights|map: item => item.text|join:"\n\n"}}

7. Update the Interpreter context to pull content from the HTML element with id="main" instead of where the extension gets it by default.

<documentPrefix>{{selectorHtml:#main|markdown|slice:0,16384}}</documentPrefix>

I was able to visit one of the Amazon Bedrock documentation pages and generate a meaningful summary after configuring this template for automatic activation on the https://docs.aws.amazon.com site.

Final Thoughts

• The web clipper extension is in beta as of this writing. I expect the UX will change.
• There are a lot of knobs to turn here, from model parameters to prompt variables to note formats to template configs. Tuning and tweaking is in order.
• The OpenAI and Anthropic models would likely provide better results out of the gate. I'm sticking with Ollama/Llama in the spirit of the local-only Obsidian privacy model.