在擴充功能中使用 shadcn/ui 元件

​

什麼情況下適合使用 shadcn/ui

• 你需要在 sidebar、popup 與 options 介面之間共用 UI 原語。
• 你在產品端的程式碼已經使用 React + Tailwind。
• 你希望採用「以原始碼為主」的元件，讓團隊可以完全自訂。

​

shadcn/ui 能做到的事

​

範本範例

​

Sidebar + shadcn/ui 範本

npx extension@latest create my-extension --template=sidebar-shadcn

​

技術棧假設

• React + TypeScript
• Tailwind CSS
• PostCSS（@tailwindcss/postcss）
• 本機的 components/ui/* 元件檔（shadcn 風格的結構）

​

在既有專案中手動設定

1. 設定 Tailwind 與 PostCSS（請參考 Tailwind CSS）。
2. 在專案中初始化 shadcn，並產生元件。
3. 將產生的 UI 元件放在擴充功能原始碼中（例如 src/components/ui/）。
4. 在 UI 渲染的擴充功能入口檔匯入你的 Tailwind 樣式表。

​

PostCSS 範例（Tailwind v4）

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

​

components.json 範例

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "tsx": true,
  "tailwind": {
    "css": "sidebar/styles.css",
    "cssVariables": true
  }
}

​

使用方式

import { Button } from "@/components/ui/button";
import "./styles.css";

export default function MyComponent() {
  return <Button className="text-lg font-semibold">Click Me</Button>;
}

​

Content script 注意事項

• 擴充功能頁面（popup、options、sidebar、new tab）是 shadcn/ui 最容易上手的場景。
• 對於 content script，請在 content script 入口檔中匯入你的樣式入口。
• Extension.js 會透過自身的 CSS pipeline 輸出 content script 樣式，這些樣式仍可能與宿主頁面樣式衝突。

​

最佳實務

• 把 shadcn/ui 當作以原始碼為主的元件，而不是執行期匯入的 UI 套件。
• 讓 Tailwind 的 config/content 路徑與你的擴充功能資料夾（pages、scripts、src）對齊。
• 先從單一介面（例如 sidebar 或 popup）開始，再處理 content script 的渲染複雜度。
• 將共用 token 與 utility helper 放在專屬檔案中（lib/utils、設計 token、主題變數）。

​

下一步

• 若尚未設定，請先設定 Tailwind CSS。
• 透過 ESLint 與 Prettier 加入檢查與格式化。