Skip to content

feat(extension): migrate to rspack, upgrade ai SDK v6, refactor popup and export utilities#122

Merged
lcomplete merged 8 commits intomainfrom
dev
Mar 16, 2026
Merged

feat(extension): migrate to rspack, upgrade ai SDK v6, refactor popup and export utilities#122
lcomplete merged 8 commits intomainfrom
dev

Conversation

@lcomplete
Copy link
Copy Markdown
Owner

Summary

  • Build tooling: Replaced webpack with rspack (@rspack/cli, @rspack/core ^1.7.8) for faster builds; added rspack.config.js and removed webpack dependencies
  • AI SDK upgrade: Bumped ai package from ^4.3.16 to ^6.0.127
  • Popup refactor: Lazy load AIToolbar, RssSubscription, and SaveDetailPanel; extracted getActiveTab/sendMessageToActiveTab/postMessageToActiveTab helpers; converted callbacks to useCallback; simplified message listener cleanup
  • AIToolbar UI: Redesigned model selector with unified gradient border container; replaced PsychologyOutlinedIcon with CheckRoundedIcon for selected model indicator; improved thinking toggle placement
  • ExportButton UI: Changed icon from FileDownloadIcon to IosShareIcon; reduced menu min-width and tightened item padding
  • Export utilities: Added cross-origin canvas safety checks, media sanitization, font inlining, adaptive scale calculation, taint error retry logic, and improved PDF/PNG/clipboard export
  • Background: Removed externalShortcuts/externalModels from context menu payloads
  • Manifests: Updated content script references from vendor.js to web_clipper_vendor.js
  • tsconfig: Added skipLibCheck: true
  • Tests: Added exportUtils.test.ts

wdonsong and others added 7 commits March 14, 2026 00:27
fix: handle XHR responseType='json' when accessing response data
- Introduced initialThinkingModeEnabled prop in ShadowDomPreview component.
- Implemented thinking mode state management in Popup component.
- Enhanced ShadowDom styles for the thinking panel with a minimalist design.
- Added export functionality with ExportButton component for exporting content as PDF, image, or markdown.
- Created utility functions for exporting and copying content.
- Added tests for provider compatibility and thinking mode options.
- Documented the Huntly knowledge base skill for user queries related to saved content.
… and export utilities

- Replace webpack build system with rspack (@rspack/cli, @rspack/core ^1.7.8)
- Upgrade ai package from ^4.3.16 to ^6.0.127
- Refactor popup.tsx: lazy load AIToolbar/RssSubscription/SaveDetailPanel, extract tab messaging helpers, clean up listeners
- Redesign AIToolbar model selector with unified gradient border, CheckRounded icon for selected model
- Change ExportButton icon to IosShare, tighten menu item layout
- Harden exportUtils: cross-origin canvas safety, media sanitization, font inlining, adaptive scale calculation, taint retry
- Remove externalShortcuts/externalModels from background context menu payloads
- Add skipLibCheck to tsconfig.json
- Add rspack.config.js and exportUtils.test.ts
- Update manifests to reference web_clipper_vendor.js instead of vendor.js
@augmentcode
Copy link
Copy Markdown

augmentcode bot commented Mar 16, 2026

🤖 Augment PR Summary

Summary: This PR modernizes the browser extension build/tooling and expands AI + export capabilities.

Changes:

  • Migrates the extension build from webpack to Rspack (new rspack.config.js, updated scripts, dist vs dist_firefox outputs, and vendor chunk naming for manifests).
  • Upgrades the Vercel AI SDK to ai@6 and refactors background streaming to support reasoning/thinking deltas.
  • Adds OpenAI-compatible provider helpers + raw streaming for providers that require it (e.g. DashScope/Qwen, Zhipu, MiniMax).
  • Introduces a “Thinking mode” toggle in the toolbar/popup and a streaming preview model that can show reasoning before final text.
  • Refactors the popup to lazy-load heavier UI pieces and centralizes active-tab messaging helpers.
  • Adds an Export UI (Original vs AI) plus robust export utilities for PDF/PNG/clipboard/markdown with cross-origin/taint safety handling.
  • Updates provider registry metadata (new Qwen provider, refreshed model lists/descriptions).
  • Adds Jest tests covering export scaling/media sanitization and the new streaming/provider/thinking helpers.
  • Documents an English-only UI text guideline in repo docs.

Technical Notes: Export uses an isolated iframe + html2canvas with stylesheet/font carry-over, adaptive scaling, and taint-detection retry for safer capture.

🤖 Was this summary useful? React with 👍 or 👎

Copy link
Copy Markdown

@augmentcode augmentcode bot left a comment

Choose a reason for hiding this comment

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

Review completed. 4 suggestions posted.

Fix All in Augment

Comment augment review to trigger a new review at any time.

<title>${title}</title>
<style>${styles}</style>
</head>
<body>${element.innerHTML}</body>
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

exportAsPdf builds a srcdoc document with ${title} and ${element.innerHTML}; if the captured page content contains markup (especially <script>), it can execute or break the print document under the extension origin. Also, the print document hard-codes lang="zh", which is likely incorrect for non-Chinese content and can affect rendering/accessibility.

Severity: high

Fix This in Augment

🤖 Was this useful? React with 👍 or 👎, or 🚀 if it prevented an incident/outage.

link.click();

// Clean up the URL object
URL.revokeObjectURL(url);
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

exportAsMarkdown revokes the object URL immediately after link.click(), which can intermittently cancel the download in some browsers (unlike exportAsImage, which defers revocation). Consider deferring URL revocation to avoid flaky downloads.

Severity: medium

Fix This in Augment

🤖 Was this useful? React with 👍 or 👎, or 🚀 if it prevented an incident/outage.

};
}

const parsed = JSON.parse(data);
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

extractOpenAICompatibleStreamDelta calls JSON.parse(data) without handling parse failures; some OpenAI-compatible providers can emit non-JSON data: payloads (or partial frames), which would crash streaming. Consider guarding the parse and surfacing a controlled error instead of throwing from the stream loop.

Severity: medium

Fix This in Augment

🤖 Was this useful? React with 👍 or 👎, or 🚀 if it prevented an incident/outage.

},
qwen: {
type: 'qwen',
displayName: 'Qwen (通义千问)',
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

The new qwen provider displayName includes Chinese text (Qwen (通义千问)), but this PR also adds an English-only UI text guideline; this string is user-facing in the provider picker/settings. Consider keeping provider display names English-only for consistency with that guideline.

Severity: low

Fix This in Augment

🤖 Was this useful? React with 👍 or 👎, or 🚀 if it prevented an incident/outage.

@lcomplete lcomplete merged commit c0e3e48 into main Mar 16, 2026
1 check passed
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