X Cards

English | 中文

easy to use x-cards in x.com

⚡ X Cards Share Tweet anywhere ,any format,

Project Background

X is a source of information for many platforms，So this project came into being

Changelog

v0.0.3

• Performance Optimization: Utilized web workers for image generation, addressing issues with blank spaces on X.com after scrolling down.
• Enhanced Padding Settings: Added the ability to adjust padding within the card for better layout control.
• Image Quality Settings: Introduced options to set the quality of generated images for export.
• Markdown Export: Now supports exporting content in Markdown format for easy integration into documentation or blogs.
• Font Size Adjustment: Added support for modifying font sizes to improve readability and customization.
• Interaction Optimization: After installing the plugin or clicking the icon, redirect to the welcome page.

v0.0.2

• Added real-time preview feature, now a toast in the upper right corner allows you to observe the generated card.

• Introduced customization for card background color.

• Customizable card width.

• Improved: Now clicking defaults to copying the image, rather than downloading the image.

• Fixed the issue of unable to fetch cover image for videos.

• Added support for fetching continuous posts.

• Enabled dynamic addition, deletion, dragging, and management of posts.

v0.0.1

• Easy to access, just a simple click away.
• Obtain videos, images, text, likes。
• Export in multiple formats, including JSON, Markdown, PNG, JPEG, and SVG.

features

• Added real-time preview feature, now a toast in the upper right corner allows you to observe the generated card.

• Introduced customization for card background color.

• Customizable card width.

• Improved: Now clicking defaults to copying the image, rather than downloading the image.

• Fixed the issue of unable to fetch cover image for videos.

• Added support for fetching continuous posts.

• Enabled dynamic addition, deletion, dragging, and management of posts.

How to Use

chrome web Store

or

1. Download Extension

2. url input:chrome://extensions/ in your chrome browser, and open the developer mode

3. unzip and Drag the extension file to the page

4. open x.com and browse the post, you will find your card button in the bottom right corner

Development Guide

1. The project uses the Plasmo framework for rapid Chrome extension development.
2. Uses Next.js for frontend development.
3. Tailwind CSS and Shadcn as CSS frameworks.
4. Langchain for developing agents.
5. Deployed on Vercel.

Local development:

pnpm install

# Run frontend
npm run dev:next
# Run plugin
npm run dev:plasmo

Starchart