X-Share (推文分享卡片)

一个简单的 Chrome 浏览器插件，可将 X.com (Twitter) 上的帖子一键生成为精美图片，方便保存和分享。

效果演示

在每条推文的下方，会多出一个【分享】按钮。

点击后，会生成一张精美的卡片，并弹出预览窗口。

🌟 主要功能

• 无缝集成: 在 X.com (Twitter) 帖子的操作栏中添加一个“分享”按钮。
• 内容抓取: 自动抓取帖子的公开信息（作者头像、昵称、正文内容、发布日期）。
• 精美卡片: 使用预设的 style.css 样式表，将内容渲染为一张设计精美的分享卡片。
• 即时预览: 在 html2canvas 渲染完成后，立即弹出浮层进行预览。
• 快捷操作: 支持“复制图片到剪贴板”和“下载图片”两种快捷操作。

🚀 安装

1. Chrome 网上应用商店

插件地址

2. 本地安装 (开发者模式)

1. 下载本项目代码（或 git clone）。
2. 打开 Chrome 浏览器，地址栏输入 chrome://extensions 并回车。
3. 在页面右上角，启用 “开发者模式”。
4. 点击左上角的 “加载已解压的扩展程序”。
5. 选择您刚刚下载并解压的项目文件夹 (包含 manifest.json 文件的文件夹)。
6. 安装完成！访问 x.com 即可看到效果。

🛠️ 工作原理

1. background.js: 作为一个 Service Worker，它会监听标签页的更新。当用户打开 x.com 或 twitter.com 网站时，它会动态地注入 content.js 和 style.css 脚本。
2. content.js: 这是插件的核心脚本。
   • 它使用 MutationObserver 来监听 X.com 页面的 DOM 变化（因为推文是动态加载的）。
   • 当检测到新的推文（<article> 元素）被添加到页面上时，它会找到该推文的操作栏 (div[role="group"])，并注入我们自定义的“分享”按钮 (.x-share-button)。
3. 生成图片:
   • 当用户点击“分享”按钮时，content.js 会在当前 article 元素内查找作者头像、昵称、正文和时间等 DOM 节点。
   • 它会动态创建一个隐藏的 iframe，并将抓取到的数据填充到一个带有 .x-share-card 样式的 HTML 结构中。
   • 接着，它调用 html2canvas 库，对这个 iframe 内的卡片进行截图，生成一个 <canvas> 元素。
   • 最后，它将 canvas 转换为 Data URL，并将其显示在一个模态框 (.x-share-modal-overlay) 中，提供复制和下载选项。

🔒 隐私安全

本插件完全在本地运行。

所有的数据抓取、图片生成和处理均在您的浏览器中完成。不会有任何数据被发送或上传到任何远程服务器。您的隐私是绝对安全的。

详情请参阅 隐私政策。

⚠️ 已知问题 / 待办清单

• 内容限制: 目前仅抓取帖子的纯文本内容。暂未支持推文中包含的图片、视频或引用推文的渲染。
• 选择器脆弱性: 本插件依赖 X.com 的前端 DOM 结构。如果 X.com 进行大规模改版，可能会导致抓取选择器失效。

External Libraries

• html2canvas.min.js - 用于将 DOM 元素渲染为 Canvas。

📄 许可证

MIT