将当前网页的标题、链接与正文内容提取并转换为 Markdown，在弹窗中预览并一键复制。
- 抓取：标题、Source URL、正文（Readability 提取主体 + Turndown 转 Markdown）
- UI 约束：最大
400x600；Title/Meta 单行省略号；正文区域撑满剩余空间且可滚动 - 复制：按钮复制完整 Markdown（
# title+ content +Source: url）
wxt（扩展框架）React 19、Tailwind CSS v4、shadcn ui@mozilla/readability、turndown
entrypoints/extract.content.ts：内容脚本，负责抽取并转换为 Markdownentrypoints/popup/：弹窗入口与 UI（App.tsx、index.html、main.tsx）assets/tailwind.css：全局样式入口wxt.config.ts：WXT 配置，挂载@tailwindcss/vite插件
pnpm install
pnpm dev- 打开
chrome://extensions，开启“开发者模式” - 点击“加载已解压的扩展程序”，选择目录：
react-shadcn/.output/chrome-mv3-dev - 在任意文章页点击扩展图标即可使用
常见问题：
- 看到“内容脚本未响应”：该页面可能是受限协议（如
chrome://、file://、PDF 预览等），或扩展需重新加载；请在普通http/https页面重试并在扩展管理页点击“重新加载”。
pnpm build- 产物目录：
react-shadcn/.output/chrome-mv3/ - 将该目录压缩为 zip（根目录需包含
manifest.json）
Chrome Web Store：
- 注册开发者账号；在开发者后台创建扩展，上传
.output/chrome-mv3的 zip - 填写权限说明（本项目仅用
tabs与scripting），隐私声明与截图 - 审核通过后即可公开或设为非公开（Unlisted）分享链接
Edge Add-ons：
- 使用同一 zip 包直接提交，流程与 Chrome 类似
不经商店：
- 发送 zip 给朋友，让其解压后在
chrome://extensions→ “开发者模式” → “加载已解压的扩展程序”选择该目录
- 打开任意文章页 → 点击扩展图标
- 弹窗顶部显示单行省略的标题；Properties 中显示 Title/Source/Published/Description（均单行省略）
- 正文 Markdown 区域可滚动；底部按钮可复制完整 Markdown
- 修改功能或修复问题后，更新
package.json的version，重新运行pnpm build并上传新版本
下方保留原始示例文档，介绍如何在 WXT 中集成 Tailwind 与 shadcn ui 的基础流程，作为参考。
-
Initialize a new WXT project:
Open your terminal and run the following command to create a new WXT project with the React template:
pnpm dlx wxt@latest init
The CLI will guide you through the project setup. Choose the
reacttemplate and your preferred package manager. For this example, I use pnpm.WXT 0.20.6 ℹ Initializing new project ✔ Project Directory … react-shadcn ✔ Choose a template › react ✔ Package Manager › pnpm ✔ Downloading template ✨ WXT project created with the react template. Next steps: 1. cd react-shadcn 2. pnpm install -
Navigate to the project directory and install dependencies:
cd react-shadcn pnpm install -
Install Tailwind CSS and
@tailwindcss/vite:You should follow the official Tailwind Vite installation guide. As the time of creating this example, it asked to run the following command:
pnpm install tailwindcss @tailwindcss/vite
-
Configure Tailwind CSS in
wxt.config.ts:To configure Tailwind CSS, modify
wxt.config.ts. While official documentation says to changevite.config.ts, WXT configures Vite internally, so you need to updatewxt.config.tsinstead. This file manages the build process. To integrate Tailwind, add it as a Vite plugin within the wxt.config.ts file, as shown here:import { defineConfig } from "wxt"; import tailwindcss from "@tailwindcss/vite"; // See https://wxt.dev/api/config.html export default defineConfig({ modules: ["@wxt-dev/module-react"], vite: () => ({ plugins: [tailwindcss()], }), });
-
Create a
tailwind.cssfile:Create a
tailwind.cssfile in yourassetsdirectory (or the root directory of your project if you don't have an assets dir) with the following content:@import "tailwindcss";
-
Import
tailwind.css:You can now easily import the
tailwind.cssfile in your React components:import "@/assets/tailwind.css"; // Adjust the path if necessary
or you can include it directly in your
index.htmlfile:<!doctype html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="@/assets/tailwind.css" rel="stylesheet" /> </head> <body></body> </html>
Now you can start styling your components with Tailwind CSS classes.
-
Install and Configure Shadcn UI:
Integrating Shadcn UI requires a few extra steps. You can choose either the manual installation or the Vite installation method. Both of them have workarounds we need to do, however this guide will use the Vite installation method.
You also need to decide whether to stick with WXT's default project structure or introduce a
src/directory to separate source code from configuration files. WXT provides documentation on adding asrc/directory here. This guide will continue without asrc/directory for simplicity. -
Configure
tsconfig.json:Before installing Shadcn UI components, you need to configure your
tsconfig.jsonfile. Add the following within thecompilerOptionssection:"compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./*"] // or "./src/*" if using src directory } }
-
Configure
wxt.config.tsfor Alias Resolution:Update your
wxt.config.tsto include an alias for resolving paths. Make sure to install@types/nodefor thepathmodule:pnpm add -D @types/nodeimport { defineConfig } from "wxt"; import tailwindcss from "@tailwindcss/vite"; import path from "path"; // See https://wxt.dev/api/config.html export default defineConfig({ modules: ["@wxt-dev/module-react"], vite: () => ({ plugins: [tailwindcss()], resolve: { alias: { "@": path.resolve(__dirname, "./"), // or "./src" if using src directory }, }, }), });
-
Temporarily Add
vite.config.ts(Workaround for Shadcn CLI):The Shadcn CLI relies on detecting a
vite.config.tsfile to identify which framework to use. So before initializing the tool, we have to temporarily create avite.config.tsfile with the following content:import path from "path"; import react from "@vitejs/plugin-react"; import { defineConfig } from "vite"; import tailwindcss from "@tailwindcss/vite"; export default defineConfig({ plugins: [react(), tailwindcss()], resolve: { alias: { "@": path.resolve(__dirname, "./"), // or "./src" if using src directory }, }, });
This file ensures that the Shadcn CLI correctly identifies your project as a Vite project and configures the alias. This file should be deleted after the initialization.
-
Initialize Shadcn UI:
Run the Shadcn UI initialization command:
pnpm dlx shadcn-ui@latest init
Answer the prompts in the CLI to configure Shadcn UI according to your preferences (color scheme, etc.).
-
Delete Temporary
vite.config.ts:After Shadcn UI is initialized, you can safely delete the temporary
vite.config.tsfile you created in step 10. -
Add Shadcn UI Components:
You can now add Shadcn UI components using the CLI:
pnpm dlx shadcn-ui@latest add button
This will install the button component and its dependencies. Repeat this command for any other components you wish to use.
There are some potential conflicts with WXT's recommended configuration and best practices in this setup, particularly in wxt.config.ts and tsconfig.json.
WXT advises against directly adding paths to tsconfig.json and prefers using the alias option in wxt.config.ts (see WXT documentation). However, Shadcn currently fails to resolve paths correctly if they are only defined in wxt.config.ts. There is an open issue about this in the Shadcn UI repository.
Therefore, the current approach of modifying both tsconfig.json and wxt.config.ts is a temporary workaround.
Ideally, the configuration should look like this:
// tsconfig.ts
{
"extends": "./.wxt/tsconfig.json",
"compilerOptions": {
"allowImportingTsExtensions": true,
"jsx": "react-jsx",
- "baseUrl": ".",
- "paths": {
- "@/*": ["./*"]
- }
}
}// wxt.config.ts
export default defineConfig({
modules: ["@wxt-dev/module-react"],
+ alias: {
+ "@": path.resolve(__dirname, "./"),
+ },
vite: () => ({
plugins: [tailwindcss()],
- resolve: {
- alias: {
- "@": path.resolve(__dirname, "./"),
- },
- },
}),
});However, this will not work correctly with Shadcn UI until the linked issue is resolved. Remember to monitor the linked issue in the Shadcn UI repository and update your configuration when a fix is available.
For a more in-depth guide that goes through the manual installation process, please check this detailed guide.