✨ feat(chrome-extension): add Chrome extension for converting and filtering pages with mq - #2152
Merged
Conversation
harehare
force-pushed
the
feat/chrome-extension
branch
from
August 4, 2026 15:07
5814887 to
a8f64ac
Compare
harehare
marked this pull request as ready for review
August 7, 2026 07:46
…tering pages with mq Adds packages/mq-chrome-extension, a Manifest V3 side-panel extension built with wxt + React on top of mq-web (WASM). It converts the current page to Markdown, runs mq queries against it with copy support, and can toggle a sandboxed on-page preview of the filtered result via chrome.scripting, without ever touching the host page's live DOM. Also wires up justfile recipes (chrome-extension, build-chrome-extension) and documents installation in install.md and the root README.
…edesign
- Add an HTML tab alongside Markdown in the source pane; queries can run
directly against the extracted raw HTML via mq's html input format,
using the same selectors as Markdown.
- Restyle the side panel (header, tabs, buttons, panes) to feel closer to
the mq-playground look.
- Fix activeTab re-grant reliability: open the side panel from
action.onClicked instead of setPanelBehavior({ openPanelOnActionClick }),
since that suppresses onClicked and made re-clicking the icon to
re-grant access on a new tab unreliable.
- Surface the underlying error when tab access fails, instead of only the
generic permission message.
…yntax highlighting Restyle the side panel with the playground's color palette, header logo, and Montserrat/JetBrains Mono fonts, and let the Source/Result panes fill the available height instead of leaving dead space below. Replace the plain textareas with CodeMirror 6 editors: Markdown/HTML highlighting via @codemirror/lang-markdown and @codemirror/lang-html, and a custom StreamLanguage for mq queries ported from the playground's Monarch tokenizer, sharing one light/dark highlight style across all three editors.
harehare
force-pushed
the
feat/chrome-extension
branch
from
August 8, 2026 13:56
04fb605 to
26d7fb2
Compare
Extract the active tab's HTML/Markdown when the panel mounts instead of requiring a manual button press, reducing the extension's baseline interaction cost. The "Extract page" button remains for re-extracting after navigating or reloading.
Reduce header padding/logo/title size and drop the subtitle line so the source, query, and result panes get more vertical room. Also fix the CodeMirror editors shrinking to fit their pre-wrapped content width instead of filling the pane, most visible as a narrow box that grew with the query text.
drawSelection() hides the native caret and draws its own .cm-cursor overlay, which defaults to a hardcoded black border since the editor was never marked as a dark theme. Override its color to follow the app's --fg variable so it stays visible against the dark panel background.
Chrome's side panel chrome already shows the extension icon and name, so the logo/title header duplicated that and ate vertical space. Drop it and its now-unused CSS variables so the source, query, and result panes get the room.
…smatching its background The active-line highlight tints the current line with a faint blue mix, which is unnoticeable across many lines but colors almost the entire box for the mostly single-line query editor, making it look like a different background than the panel around it. Add a highlightActiveLine prop to CodeEditor and disable it for the query editor, where highlighting "the current line" isn't useful anyway.
Placeholder text at full --muted color reads too close to real content, making it hard to tell apart. Dial it down with opacity so it reads clearly as a hint.
…eedback The Copy button gave no indication a click did anything. Flip its label to "Copied!" and highlight it green for 1.5s after a successful clipboard write, reverting automatically, instead of a blocking alert.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds packages/mq-chrome-extension, a Manifest V3 side-panel extension built with wxt + React on top of mq-web (WASM). It converts the current page to Markdown, runs mq queries against it with copy support, and can toggle a sandboxed on-page preview of the filtered result via chrome.scripting, without ever touching the host page's live DOM.
Also wires up justfile recipes (chrome-extension, build-chrome-extension) and documents installation in install.md and the root README.
Type of Change
Checklist
cargo fmtandcargo clippyand addressed any warningsjust test-alland all tests pass/docs, crateREADME.md) if neededAdditional Context