Skip to content

Update DOM selectors for current Claude UI#12

Open
provos wants to merge 1 commit intoryanschiang:mainfrom
provos:fix/update-dom-selectors
Open

Update DOM selectors for current Claude UI#12
provos wants to merge 1 commit intoryanschiang:mainfrom
provos:fix/update-dom-selectors

Conversation

@provos
Copy link
Copy Markdown

@provos provos commented Mar 7, 2026

Summary

  • Updated CSS selectors to match the current Claude web UI DOM structure:
    • User messages: [data-testid="user-message"]
    • Assistant messages: div.standard-markdown
    • Code language: language-* classes on <code> elements
  • Messages are now collected individually and sorted by DOM position, instead of relying on a single parent container selector (which no longer exists)
  • Added ESLint configuration and fixed lint warnings (varconst/let, removed useless escapes)
  • Rebuilt dist files

Context

The previous selectors (div.font-claude-message, div.font-user-message, div.flex-1.flex.flex-col.gap-3.px-4) no longer exist in the Claude UI, causing a TypeError: Cannot read properties of null when running the exported scripts.

Test plan

  • Open a Claude conversation in the regular chat UI
  • Paste dist/md.min.js into the browser console — verify markdown file downloads
  • Paste dist/json.min.js into the browser console — verify JSON file downloads
  • Paste dist/image.min.js into the browser console — verify PNG file downloads
  • Verify conversations with code blocks, lists, and tables export correctly

The Claude web UI has changed its DOM structure since the original
selectors were written. User messages are now found via
[data-testid="user-message"] and assistant messages via
div.standard-markdown. Code language detection updated to use
language-* classes on <code> elements.

Also adds ESLint config and fixes lint warnings (var -> const/let).
Copy link
Copy Markdown

@colonket colonket left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

dist/json.min.js worked for me, my gemma4:e4b instance analyzed the code as being functionally identically except for the updated DOM selectors.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants