Enhanced context-highlighter for persistent highlights
Enhanced context-highlighter for persistent highlights
Agent
Claude Code
Model
Claude Sonnet 4.6
Started
May 30, 2:39 PM
Messages140
Downloads0
Explored and reviewed repository structure and key files.
UnderstandDesigned functions to apply and load highlights, and sync local storage.
PlanAdded highlight application and loading in content.js.
EditUpdated background.js with local storage helpers and message handlers.
EditAdded highlight styles in content.css.
EditI'd lik to update this repo: https://github.com/goldfishandswedishfish/context-highlighter -- so that the content that is highlighted on the page stays visible on the page as you're reading and is (ideally) still there when the content is re-opened.
Let me start by fetching the repository to understand its current structure and code.
Let me explore the repository using the GitHub CLI.
Now let me explore the extension directory and other key files.
Now let me read all the key extension files.
Let me also read the sidebar.js and content.css files.
Now I have a full picture. Let me check if this repo is already cloned locally before deciding where to work.
There are multiple clones. Let me check which is the most current one.
/Users/karamelton/Projects/context-highlighter is the most up-to-date. Let me verify its current state and then read the local files.
Good picture. Here's what I'll build:
content.js — add applyHighlightMark(text, id) (walks text nodes, finds the exact string, wraps it in a <mark>) and loadAndApplyHighlights() (fetches saved highlights for this URL on page load). Also call applyHighlightMark immediately after a save succeeds.background.js — when a highlight is saved/deleted/updated via the server, mirror a compact {id, text, theme} record in chrome.storage.local keyed by URL. Add a GET_PAGE_HIGHLIGHTS handler that returns the stored records for a URL.content.css — add .ch-highlight styles (warm amber, matching the extension's existing palette).No manifest changes needed — "storage" permission is already declared. Let me make the edits.
What it does: Replaces saveHighlight() in content.js to also visually mark the selected text in the DOM after saving, and adds the two new functions + page-load call.
What it touches: extension/content.js only.
Risk level: Low — local file edit, reversible with git.
How to undo: git checkout extension/content.js
Now I'll add the two new functions and the page-load call at the end of content.js.
Now update background.js — add local storage helpers, the GET_PAGE_HIGHLIGHTS handler, and mirror writes/deletes/updates.
What it does: Adds three helper functions and updates four message handlers to keep chrome.storage.local in sync with the server store. Response to SAVE_HIGHLIGHT now always includes an id.
What it touches: extension/background.js only.
Risk level: Low — local file edit, reversible with git checkout.
Now add the GET_PAGE_HIGHLIGHTS handler and update the four existing handlers:
Now add the highlight mark styles to content.css.
What it does: Adds .ch-highlight styles — warm amber background matching the extension palette, with a hover state.
What it touches: extension/content.css only.
Risk level: Low.
Let me do a final review of all three files to confirm everything looks right before committing.
Everything looks correct. This is a browser extension — there's no local dev server to spin up, so browser-preview verification doesn't apply here. The changes are code-only and need to be tested by loading the unpacked extension in Chrome.
The diff looks clean. Let me commit it.
The diff looks right — 3 files changed, all additive. Would you like me to commit these changes locally?
PII scan: all changes are code — class names, message type strings, DOM operations. No personal data. Good to go.
Pushed. Here's a summary of what changed and how it all fits together:
What was changed
extension/background.js — Three new helper functions (saveToLocalStorage, removeFromLocalStorage, updateInLocalStorage) keep a compact mirror of highlights in chrome.storage.local, keyed by URL. The SAVE_HIGHLIGHT, UPDATE_HIGHLIGHT, and DELETE_HIGHLIGHT handlers now call those helpers after each successful server operation. A new GET_PAGE_HIGHLIGHTS handler returns the stored records for a given URL — this is how the content script fetches what to re-highlight on page load.
extension/content.js — Two new functions:
applyHighlightMark(text, id) — walks all text nodes in the page (skipping scripts, inputs, and already-highlighted nodes), builds a combined string to find the exact text, creates a Range spanning those nodes, extracts the matched content, wraps it in a <mark class="ch-highlight">, and re-inserts it. This is called immediately after a save succeeds (so the highlight appears right away) and during page load (to restore previous highlights).loadAndApplyHighlights() — sends GET_PAGE_HIGHLIGHTS for the current URL and calls applyHighlightMark for each result. Runs at the bottom of the script, once the DOM is ready.extension/content.css — Added .ch-highlight and .ch-highlight:hover — warm amber (rgba(232, 213, 183, …)) matching the extension's existing #e8d5b7 palette. color: inherit prevents <mark>'s default black from clashing with dark-background sites.
One known limitation: Single-page apps (Twitter, Reddit new, etc.) that swap content without a full page load won't trigger loadAndApplyHighlights automatically — that would require a MutationObserver watching URL changes, which is a separate piece of work.
ok great also i saw that there were three local versions of this app -- should we reduce to one?
Yes, good call. Before deleting anything, let me check whether the other two have any uncommitted local changes worth keeping.
Both are clean — no uncommitted changes, no stashes. Safe to delete.
HIGH RISK — this will permanently delete two directories:
| What it does | Deletes /Users/karamelton/context-highlighter and /Users/karamelton/Downloads/context-highlighter |
| What it touches | Those two folders and everything inside them |
| Risk level | High — deletion is not reversible |
| How to undo | Both are behind GitHub's main, so you can always git clone them back. But the directories themselves will be gone. |
The one we keep is /Users/karamelton/Projects/context-highlighter — it's the most current and is where your other projects likely live.
Want me to go ahead and delete the two older copies?
confirming that what's update on main is: /Users/karamelton/Projects/context-highlighter
Confirmed. /Users/karamelton/Projects/context-highlighter is on commit 51a3549 — exactly what we just pushed to origin/main. Clean working tree, nothing pending.
Ready to delete the other two whenever you say the word.
let's delete
Both are gone. Your single canonical copy is at /Users/karamelton/Projects/context-highlighter, in sync with GitHub.
walk me through updating the extension in chrome
Here's how to reload the updated extension in Chrome:
1. Open the Extensions page
Go to chrome://extensions in your address bar.
2. Enable Developer Mode Toggle Developer mode on in the top-right corner (if it isn't already).
3. Load (or reload) the extension
If you've never loaded it before: Click Load unpacked → navigate to /Users/karamelton/Projects/context-highlighter/extension → click Open.
If it's already loaded: Find the Context Highlighter card and click the circular ↺ refresh icon on it.
4. Confirm it updated
The version shown on the card should still say 2.0.0 (we didn't bump it), but the ID and last updated time will reflect the reload.
5. Test it
One thing to note: the highlight persistence relies on the local server (cd server && node index.js) being running when you save. If the server is offline, you'll see the warning in the modal and nothing will be stored. Once you save with the server running, reloads work without the server since the data is cached in chrome.storage.local.
Chrome is still pointing at the old path (~/context-highlighter/extension) — the one we just deleted. You need to remove that entry and load fresh from the new location.
chrome://extensions and click Remove to delete the stale entry./Users/karamelton/Projects/context-highlighter/extensionThat will load it cleanly from the correct path going forward.
so i've highlghted this text but when i click save it doesn't highlight the text
A couple of quick questions to diagnose — what happens after you click Save?
I think the server has broken actually -- i'm using host and now i can no longer turn the server on; it was probably runnign against one of local copis we deleted?
That's Hotel — it's a dev server manager. Its config for context-highlighter still points to the deleted path. Let me find and fix it.
Found it — cwd is pointing to the deleted path. I'll update it to the correct one.
What it does: Updates the cwd in Hotel's config for context-highlighter to the correct path.
What it touches: ~/.hotel/servers/context-highlighter.json
Risk level: Low — small config edit, easy to revert.
How to undo: Change cwd back to the old path.
Done. Now go to localhost:2000, toggle the context-highlighter switch off and back on (or just on if it's already off). Hotel will restart the server from the correct path and it should come back up on port 3747.
interestingly -- the modal isn't opening on this page when i click save
The floating button is appearing but the modal isn't — that points to a JavaScript error happening inside openSaveModal when it tries to build or show the modal. The most likely cause is a page-level CSS or script conflict.
Let's get the exact error. On that page:
Cmd+Option+I)That will tell us exactly where it's breaking.
/Users/karamelton/Projects/context-highlighter/extension