feat(medium-push): implement Medium Push extension for Markdown to Medium editor

- Add a Chrome extension that allows users to push local Markdown files to Medium's editor as rich text.
- Implement a bridge server for handling content transfer and communication between the extension and local files.
- Include a user-friendly popup for content input and file selection.
- Support for Markdown features such as headings, lists, images, and code blocks with zero-width space handling to prevent formatting issues in Medium.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: childrentime

.claude/skills/medium-push/SKILL.md

@@ -0,0 +1,124 @@
+---
+name: medium-push
+category: publishing
+description: 将 Markdown 文件推送到浏览器中打开的 Medium 编辑器。当用户说"发布到 medium"、"推送到 medium"、"paste to medium"、"push to medium"或在完成文章生成后要求发送到 Medium 时触发。
+---
+
+# medium-push - 推送 Markdown 到 Medium 编辑器
+
+通过 Chrome 扩展 + Bridge 服务（HTTP + SSE），将本地 Markdown 文件转换为富文本并推送到浏览器中打开的 Medium 编辑器。
+
+## 架构
+
+```
+Claude Code (读取 Markdown 文件)
+  → curl POST http://localhost:18766/paste
+    → Bridge Server (SSE 推送)
+      → Chrome Extension (content script)
+        → Markdown → HTML 转换
+          → Medium 编辑器 (模拟粘贴富文本)
+```
+
+## 工作流程
+
+### 步骤 1：检查 Bridge 服务
+
+```bash
+curl -s http://localhost:18766/health 2>/dev/null || echo "NOT_RUNNING"
+```
+
+| 结果 | 操作 |
+|------|------|
+| `{"status":"ok",...}` | Bridge 已运行，跳到步骤 2 |
+| `NOT_RUNNING` | 启动 Bridge 服务 |
+
+**启动 Bridge：**
+
+```bash
+nohup node <skill-path>/scripts/bridge.mjs > /tmp/medium-push-bridge.log 2>&1 &
+echo $!
+```
+
+等待 1 秒后再次检查 `/health` 确认启动成功。
+
+### 步骤 2：确认 Medium 编辑器已打开
+
+提示用户在 Chrome 中打开 Medium 新文章页面：
+
+```
+https://medium.com/new-story
+```
+
+### 步骤 3：读取 Markdown 文件
+
+读取用户指定的 Markdown 文件路径。如果用户没有指定，查找 `blog-external/` 目录下的 `medium.md` 文件。
+
+### 步骤 4：发送到 Medium 编辑器
+
+**方式 A：通过文件路径（推荐）**
+
+```bash
+curl -s -X POST http://localhost:18766/paste \
+  -H "Content-Type: application/json" \
+  -d '{"filePath": "<absolute-path-to-markdown-file>"}'
+```
+
+**方式 B：直接发送内容**
+
+```bash
+curl -s -X POST http://localhost:18766/paste \
+  -H "Content-Type: application/json" \
+  -d @- <<'PAYLOAD'
+{"content": "<markdown-content-here>"}
+PAYLOAD
+```
+
+### 步骤 5：确认结果
+
+检查响应中的字段：
+
+| 字段 | 含义 |
+|------|------|
+| `success: true` | 请求成功 |
+| `clientsSent > 0` | 内容已推送到浏览器扩展 |
+| `clientsSent = 0` | 没有连接的扩展客户端 |
+
+如果 `clientsSent = 0`，提示用户：
+1. 确认 Chrome 扩展已安装
+2. 确认已打开 `https://medium.com/new-story` 页面
+3. 刷新页面后重试
+
+**输出格式：**
+```
+文章已推送到 Medium 编辑器！
+
+文件：{file_path}
+内容长度：{contentLength} 字符
+浏览器客户端：{clientsSent} 个
+
+请在浏览器中查看 Medium 编辑器并检查内容格式。
+```
+
+## 首次安装
+
+### 1. 安装 Chrome 扩展
+
+1. 打开 Chrome，访问 `chrome://extensions/`
+2. 开启右上角 **开发者模式**
+3. 点击 **加载已解压的扩展程序**
+4. 选择 `<skill-path>/extension/` 目录
+5. 安装完成
+
+### 2. Bridge 服务
+
+Bridge 为纯 Node.js 实现，零外部依赖，无需 npm install。
+默认端口 18766（避免与 md-push 的 18765 冲突），可通过 `BRIDGE_PORT` 环境变量修改。
+
+## 注意事项
+
+- Bridge 使用 SSE（Server-Sent Events）推送，扩展会自动重连
+- 扩展会自动剥离 Markdown 的 YAML frontmatter
+- Markdown 在扩展端转换为 HTML 后通过模拟粘贴注入 Medium 编辑器
+- 第一个 `#` 标题会自动填入 Medium 的标题字段
+- 支持：标题、段落、粗体、斜体、代码块、行内代码、链接、图片、列表、引用
+- 扩展 popup 支持手动粘贴（无需 Bridge）

.claude/skills/medium-push/extension/content.js

@@ -0,0 +1,119 @@
+/**
+ * Medium Push Content Script (ISOLATED world)
+ *
+ * Connects to the bridge server via SSE and forwards
+ * converted HTML content to main-world.js via window.postMessage.
+ */
+
+const BRIDGE_URL = 'http://localhost:18766';
+let eventSource = null;
+let reconnectTimer = null;
+let reconnectDelay = 1000;
+
+function connectBridge() {
+  if (eventSource) {
+    eventSource.close();
+    eventSource = null;
+  }
+
+  try {
+    eventSource = new EventSource(`${BRIDGE_URL}/events`);
+
+    eventSource.onopen = () => {
+      console.log('[MediumPush] Connected to bridge server');
+      reconnectDelay = 1000;
+    };
+
+    eventSource.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        if (data.type === 'SET_MARKDOWN' && data.content) {
+          processAndSend(data.content);
+        } else if (data.type === 'INSPECT_DOM') {
+          window.postMessage({ type: 'MEDIUM_PUSH_INSPECT' }, '*');
+        }
+      } catch (e) {
+        console.error('[MediumPush] Failed to parse SSE message:', e);
+      }
+    };
+
+    eventSource.onerror = () => {
+      eventSource.close();
+      eventSource = null;
+      scheduleReconnect();
+    };
+  } catch (e) {
+    console.error('[MediumPush] EventSource error:', e);
+    scheduleReconnect();
+  }
+}
+
+function scheduleReconnect() {
+  if (reconnectTimer) clearTimeout(reconnectTimer);
+  reconnectTimer = setTimeout(() => {
+    connectBridge();
+    reconnectDelay = Math.min(reconnectDelay * 1.5, 10000);
+  }, reconnectDelay);
+}
+
+/**
+ * Process markdown: strip frontmatter, extract title, convert to HTML
+ * (with zero-width spaces in code block empty lines), then forward.
+ */
+function processAndSend(markdown) {
+  const { stripFrontmatter, extractTitle, markdownToHtml } = window.__mdToHtml;
+
+  const cleaned = stripFrontmatter(markdown);
+  const { title, body } = extractTitle(cleaned);
+  const html = markdownToHtml(body);
+
+  console.log('[MediumPush] Converted markdown to HTML', {
+    titleLength: title.length,
+    htmlLength: html.length,
+  });
+
+  window.postMessage({
+    type: 'MEDIUM_PUSH_SET_CONTENT',
+    title,
+    html,
+  }, '*');
+}
+
+// Listen for messages from popup
+chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
+  if (msg.type === 'SET_MARKDOWN' && msg.content) {
+    processAndSend(msg.content);
+    sendResponse({ success: true });
+  } else if (msg.type === 'GET_STATUS') {
+    sendResponse({
+      bridgeConnected: eventSource !== null && eventSource.readyState === EventSource.OPEN,
+      onMedium: window.location.hostname === 'medium.com',
+    });
+  }
+  return true;
+});
+
+// Listen for results from main-world.js
+window.addEventListener('message', (event) => {
+  if (event.source !== window) return;
+  if (event.data && event.data.type === 'MEDIUM_PUSH_RESULT') {
+    if (event.data.success) {
+      console.log('[MediumPush] Content set successfully via', event.data.method);
+    } else {
+      console.error('[MediumPush] Failed to set content:', event.data.error);
+    }
+  }
+  if (event.data && event.data.type === 'MEDIUM_PUSH_INSPECT_RESULT') {
+    fetch(`${BRIDGE_URL}/inspect-result`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(event.data.result),
+    }).catch(e => console.error('[MediumPush] Failed to send inspect result:', e));
+  }
+});
+
+// Only connect on Medium
+if (window.location.hostname === 'medium.com') {
+  connectBridge();
+  console.log('[MediumPush] Content script loaded on', window.location.href);
+}

.claude/skills/medium-push/extension/main-world.js

@@ -0,0 +1,150 @@
+/**
+ * Medium Push Main World Script
+ *
+ * Injects HTML content into Medium's editor via paste simulation.
+ * Code blocks use zero-width spaces on empty lines to prevent
+ * Medium from splitting them at blank lines.
+ */
+
+window.addEventListener('message', async (event) => {
+  if (event.source !== window) return;
+  if (!event.data) return;
+
+  if (event.data.type === 'MEDIUM_PUSH_INSPECT') {
+    window.postMessage({ type: 'MEDIUM_PUSH_INSPECT_RESULT', result: inspectDOM() }, '*');
+    return;
+  }
+
+  if (event.data.type !== 'MEDIUM_PUSH_SET_CONTENT') return;
+
+  const { title, html } = event.data;
+  console.log('[MediumPush] Received content, title:', title?.slice(0, 50), 'html length:', html?.length);
+
+  try {
+    const editor = findEditor();
+    if (!editor) {
+      reportResult(false, 'none', 'Could not find Medium editor');
+      return;
+    }
+
+    editor.focus();
+    await sleep(200);
+
+    const fullHtml = title ? `<h3>${escapeHtml(title)}</h3>${html}` : html;
+
+    // Try paste with proper clipboardData
+    const success = await tryPaste(editor, fullHtml);
+    if (success) {
+      reportResult(true, 'paste', null);
+      return;
+    }
+
+    // Fallback: insertHTML
+    const insertOk = tryInsertHtml(editor, fullHtml);
+    if (insertOk) {
+      reportResult(true, 'insertHTML', null);
+      return;
+    }
+
+    // Last resort: direct DOM
+    editor.innerHTML = fullHtml;
+    triggerInput(editor);
+    reportResult(true, 'innerHTML', null);
+  } catch (e) {
+    reportResult(false, 'none', e.message);
+  }
+});
+
+async function tryPaste(editor, html) {
+  editor.focus();
+  const sel = window.getSelection();
+  const range = document.createRange();
+  range.selectNodeContents(editor);
+  sel.removeAllRanges();
+  sel.addRange(range);
+  await sleep(100);
+
+  const plainText = htmlToPlainText(html);
+  const dt = new DataTransfer();
+  dt.setData('text/html', html);
+  dt.setData('text/plain', plainText);
+
+  const evt = new ClipboardEvent('paste', { bubbles: true, cancelable: true });
+  Object.defineProperty(evt, 'clipboardData', { value: dt, writable: false });
+
+  editor.dispatchEvent(evt);
+  await sleep(500);
+
+  const newText = editor.textContent || '';
+  return newText.length > 30 && !newText.includes('Tell your story');
+}
+
+function tryInsertHtml(editor, html) {
+  editor.focus();
+  const sel = window.getSelection();
+  const range = document.createRange();
+  range.selectNodeContents(editor);
+  sel.removeAllRanges();
+  sel.addRange(range);
+
+  document.execCommand('delete', false);
+  const ok = document.execCommand('insertHTML', false, html);
+  if (ok) triggerInput(editor);
+  return ok;
+}
+
+function findEditor() {
+  return (
+    document.querySelector('.postArticle-content[role="textbox"][contenteditable="true"]') ||
+    document.querySelector('[role="textbox"][contenteditable="true"]') ||
+    document.querySelector('.editable[contenteditable="true"]') ||
+    document.querySelector('article [contenteditable="true"]')
+  );
+}
+
+function htmlToPlainText(html) {
+  const div = document.createElement('div');
+  div.innerHTML = html;
+  return div.textContent || div.innerText || '';
+}
+
+function escapeHtml(text) {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+function triggerInput(el) {
+  el.dispatchEvent(new Event('input', { bubbles: true }));
+}
+
+function reportResult(success, method, error) {
+  console.log('[MediumPush] Result:', { success, method, error });
+  window.postMessage({ type: 'MEDIUM_PUSH_RESULT', success, method, error }, '*');
+}
+
+function sleep(ms) {
+  return new Promise(r => setTimeout(r, ms));
+}
+
+function inspectDOM() {
+  function desc(el) {
+    const r = el.getBoundingClientRect();
+    return {
+      tag: el.tagName.toLowerCase(), id: el.id || null,
+      className: (el.className || '').toString().slice(0, 120),
+      role: el.getAttribute('role'), contentEditable: el.getAttribute('contenteditable'),
+      dataTestId: el.getAttribute('data-testid'), dataPlaceholder: el.getAttribute('data-placeholder'),
+      textContent: (el.textContent || '').slice(0, 60), childCount: el.children.length,
+      rect: { w: Math.round(r.width), h: Math.round(r.height), t: Math.round(r.top), l: Math.round(r.left) },
+      parentTag: el.parentElement?.tagName.toLowerCase(), parentClass: (el.parentElement?.className || '').toString().slice(0, 80),
+    };
+  }
+  return {
+    url: window.location.href,
+    editables: [...document.querySelectorAll('[contenteditable]')].map(desc),
+    roles: [...document.querySelectorAll('[role="textbox"]')].map(desc),
+  };
+}
+
+console.log('[MediumPush] Main world script loaded (paste + zero-width-space mode)');