feat: baijiahao platform sync

[timerring]

Summary

Add support for Baijiahao (百家号) platform in the COSE browser extension, enabling users to sync articles directly to Baijiahao. This update includes a new modular platform configuration, API-based login detection with real user profile retrieval, and clipboard-based content filling that preserves original styling (same approach as WeChat Official Account).

Changes

Browser Extension (cose/)

Platform Configuration:

• Added Baijiahao to the platform registry with official favicon (https://pic.rmb.bdstatic.com/10e1e2b43c35577e1315f0f6aad6ba24.vnd.microsoft.icon).
• Created new src/platforms/baijiahao.js to encapsulate all Baijiahao-specific logic (platform config, login detection).
• Integrated Baijiahao into src/platforms/index.js for centralized platform management.
• Added Baijiahao domain permissions (https://*.baijiahao.baidu.com/*, https://baijiahao.baidu.com/*) to manifest.json.

Login Detection:

• Implemented cookie + API-based authentication using BDUSS cookie and GET https://baijiahao.baidu.com/builder/app/appinfo.
• Retrieves real user profile data including:
  • username: Actual username (e.g., "timerring")
  • avatar: User avatar URL from Baidu CDN
• Returns { loggedIn: true, username, avatar } when authenticated.
• Gracefully handles unauthenticated state by returning { loggedIn: false }.

Content Sync Workflow:

• Clipboard-Based Approach: Uses the same sync method as WeChat Official Account to preserve original styling with CSS.
• Implemented proper workflow in syncToPlatform():
  1. Click copy button in editor to copy styled HTML to clipboard
  2. Read clipboard HTML content via navigator.clipboard.read()
  3. Navigate to Baijiahao editor: https://baijiahao.baidu.com/builder/rc/edit?type=news
  4. Fill title using contenteditable div + execCommand
  5. Paste content via ClipboardEvent into UEditor iframe

Content Filler:

• Created dedicated Baijiahao sync handler in background.js.
• Technical Challenge Solved: Baijiahao uses UEditor rich text editor with content inside an iframe, requiring cross-frame content injection.
• Title Filling Method:
  • Locate contenteditable div in .client_components_titleInput
  • Use document.execCommand('insertText') for reliable text insertion
  • Fallback to direct innerHTML manipulation if execCommand fails
• Content Filling Method:
  • Access iframe's contentDocument body
  • Create ClipboardEvent with DataTransfer containing HTML content
  • Dispatch paste event to trigger UEditor's native paste handler
• Why Clipboard Method: Direct innerHTML manipulation loses styling. Clipboard paste preserves the original CSS formatting from the Markdown editor.

Web Application (apps/web/)

Platform Integration:

• Added Baijiahao platform entry to inject.js for frontend display.

Technical Details

UEditor Integration:

• Baijiahao's editor uses UEditor (百度编辑器) wrapped in an iframe.
• The iframe's body element is contenteditable and handles paste events.
• UEditor instance is accessible via window.UE_V2.instants.ueditorInstant0 but clipboard paste is more reliable for styled content.

Cross-Frame Content Injection:

• Chrome extension scripts can access iframe contentDocument when same-origin.
• Baijiahao's editor iframe uses javascript:void() src with dynamically written content.
• Content injection requires waiting for iframe initialization (~1.5s delay).

Clipboard HTML Preservation:

• The Markdown editor's copy button generates styled HTML with inline CSS.
• Using ClipboardEvent with DataTransfer.setData('text/html', content) preserves all styling.
• This matches the WeChat Official Account sync approach for consistency.

API Authentication:

• Baijiahao uses BDUSS cookie for Baidu account authentication.
• The /builder/app/appinfo endpoint returns user info without requiring additional token headers.
• Response structure: { errno: 0, data: { user: { username, avatar, ... } } }

Modular Architecture:

• Following the pattern established for other platforms, all Baijiahao logic is self-contained in baijiahao.js.
• Separates concerns: platform config and login detection.
• Content sync handled in background.js alongside WeChat for shared clipboard logic.

Testing

Installation

1. Install/Reload the COSE extension.

Logged-Out Test:

1. Ensure you are logged out of Baijiahao (https://baijiahao.baidu.com/).
2. Open the Markdown editor publish dialog.
3. Verify Baijiahao shows "登录" (Login) status.
4. Click the login link and confirm it navigates to the Baijiahao login page.

Logged-In Test:

1. Log in to Baijiahao in the browser.
2. Reopen the publish dialog.
3. Verify Baijiahao shows the correct username (e.g., "timerring") and avatar image.
4. Confirm logged-in status is displayed.

Sync Test:

1. Select Baijiahao and click "确定" (Confirm) to sync.
2. Confirm the extension opens https://baijiahao.baidu.com/builder/rc/edit?type=news.
3. Wait for editor initialization (should complete within 3-4 seconds).
4. Confirm the Title is correctly populated in the title input field.
5. Confirm the Content is correctly rendered in the editor with proper formatting:
   • Headings rendered with correct styles
   • Code blocks with syntax highlighting preserved
   • Lists, links, and other elements properly formatted
   • Original CSS styling maintained

Files Changed

• src/platforms/baijiahao.js (new)
• src/platforms/index.js
• src/inject.js
• src/background.js
• manifest.json

[github-actions]

🚀 Surge Preview has been successfully deployed!

Preview URL: https://doocs-md-preview-pr-1221.surge.sh

_{Built with commit eb09a3b}