feat: Nice 插件首个版本发布！！！

- 一键启用复制: 一键启用复制，无限制地复制网页上任何内容，并可复制带有原文的 HTML 格式的文本
- 无破坏植入: 植入的代码不会影响原网站的功能，开关式操作满足你复杂的需求
- 精美的UI: 精心设计的亮色/暗色主题，精美的动画效果和现代化的界面设计
- 自动化打包: 创建 Github workflow 来自动化打包流程，并将打包产物上传到 Github Release

.browserslistrc

@@ -0,0 +1,7 @@
+> 1%
+last 3 versions
+ie >= 11
+chrome >= 49
+firefox >= 52
+edge >= 79
+not dead 

.editorconfig

@@ -0,0 +1,4 @@
+[*]
+indent_style = space
+indent_size = 2
+

.github/workflows/publish.yml

@@ -0,0 +1,59 @@
+name: "Create Release"
+on:
+  workflow_dispatch:
+  push:
+    tags:
+      - "v*"
+
+jobs:
+  build-and-release:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      id-token: write
+    environment: Release
+    steps:
+      - uses: actions/checkout@v3
+
+      # 设置 Node.js 和 pnpm
+      - uses: actions/setup-node@v3.4.1
+        with:
+          node-version: 20.16.0
+
+      - name: Install pnpm
+        run: npm install -g pnpm@8.15.2
+
+      # 安装依赖
+      - name: Install dependencies
+        run: pnpm i
+
+      # 构建和打包
+      - name: Build the extension
+        run: pnpm build
+
+      - name: Package the extension
+        run: pnpm package
+
+      # 检查打包文件是否存在
+      - name: Check package file
+        run: |
+          if [ ! -f "./build/chrome-mv3-prod.zip" ]; then
+            echo "Error: Package file not found at ./build/chrome-mv3-prod.zip"
+            exit 1
+          fi
+          echo "Package file exists and ready for upload"
+
+      # 创建 Release
+      - name: Create Release
+        id: create_release
+        uses: softprops/action-gh-release@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          tag_name: ${{ github.ref_name }}
+          release_name: Release ${{ github.ref_name }}
+          body: |
+            新版本 Nice ${{ github.ref_name }} 发布🎉✨，点击下面的 chrome-extension.zip 进行下载，source-code.zip 是源码，请不要下载。
+          draft: false
+          prerelease: false
+          files: ./build/chrome-mv3-prod.zip

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "bracketSpacing": true,
+  "arrowParens": "avoid"
+}

.prettierrc.mjs → .prettierrc.cjs

@@ -1,7 +1,4 @@
-/**
- * @type {import('prettier').Options}
- */
-export default {
+module.exports = {
   printWidth: 80,
   tabWidth: 2,
   useTabs: false,
@@ -12,15 +9,15 @@ export default {
   bracketSameLine: true,
   plugins: ["@ianvs/prettier-plugin-sort-imports"],
   importOrder: [
-    "<BUILTIN_MODULES>", // Node.js built-in modules
-    "<THIRD_PARTY_MODULES>", // Imports not matched by other special words or groups.
-    "", // Empty line
+    "<BUILTIN_MODULES>",
+    "<THIRD_PARTY_MODULES>",
+    "",
     "^@plasmo/(.*)$",
     "",
     "^@plasmohq/(.*)$",
     "",
     "^~(.*)$",
     "",
-    "^[./]"
-  ]
-}
+    "^[./]",
+  ],
+};

.vscode/settings.json

@@ -0,0 +1,16 @@
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "css.validate": false,
+  "less.validate": false,
+  "scss.validate": false,
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+} 

README.md

@@ -1,33 +1,62 @@
-This is a [Plasmo extension](https://docs.plasmo.com/) project bootstrapped with [`plasmo init`](https://www.npmjs.com/package/plasmo).
+<div align="center">
+  <img src="assets/icon.png" alt="Nice Extension Logo" width="128" height="128" />
+  <h1>✨ Nice Extension ✨</h1>
+  <p>一个优雅的浏览器扩展，让您在任何网页都能自由复制文本 🚀</p>
+</div>
 
-## Getting Started
+## 🌟 功能特色
 
-First, run the development server:
+- 🎯 **一键启用复制**: 一键启用复制，无限制地复制网页上任何内容，并可复制带有原文的 HTML 格式的文本
+- 🛡️ **无破坏植入**: 植入的代码不会影响原网站的功能，开关式操作满足你复杂的需求，植入的代码不影响网站原有功能，温和且有效
+- ✨ **精美的UI**: 精心设计的亮色/暗色主题，精美的的动画效果和现代化的界面设计
 
-```bash
-pnpm dev
-# or
-npm run dev
-```
+## 💡 使用指南
+
+1. 点击浏览器工具栏中的 Nice 图标
+2. 在弹出窗口中开启所需功能：
+   - 🔓 **启用文本复制**: 移除复制限制，保留原文格式，启用后自动开启 `禁用网站自带的复制事件监听` 和 `保留复制文本的 HTML 格式` 两个选项。
+   - 🎯 **禁用网站的复制监听事件**: 有些网站在复制时会弹窗，十分影响体验，还有些网站会在复制的文本中添加一些无关的信息，开启这个选项能避免这些问题。
+   - 🎨 **保留复制文本的 HTML 格式**: 当你复制一些带有样式的文本时，开启这个选项能保留文本的样式。但是并不保证一定生效，比如复制的文字颜色并不能保留。
+
+## 插件截图
+
+<div align="center">
+  <img src="docs/images/dark.png" alt="暗色主题" style="width: 40%;" />
+  <img src="docs/images/light.png" alt="亮色主题" style="width: 40%;" />
+</div>
 
-Open your browser and load the appropriate development build. For example, if you are developing for the chrome browser, using manifest v3, use: `build/chrome-mv3-dev`.
+## 🔧 兼容性
 
-You can start editing the popup by modifying `popup.tsx`. It should auto-update as you make changes. To add an options page, simply add a `options.tsx` file to the root of the project, with a react component default exported. Likewise to add a content page, add a `content.ts` file to the root of the project, importing some module and do some logic, then reload the extension on your browser.
+| 浏览器  | 最低版本 | 推荐版本 |
+| ------- | -------- | -------- |
+| Chrome  | 88+      | 最新版   |
+| Edge    | 88+      | 最新版   |
+| Firefox | 78+      | 最新版   |
+| Opera   | 74+      | 最新版   |
 
-For further guidance, [visit our Documentation](https://docs.plasmo.com/)
+> 💡 提示：为获得最佳体验，建议使用各浏览器的最新版本。
 
-## Making production build
+## 🚀 开发指南
 
-Run the following:
+本项目使用 [Plasmo](https://docs.plasmo.com/) 框架开发，采用 pnpm 作为包管理器。
+
+### 开发环境设置
 
 ```bash
+# 安装依赖
+pnpm install
+
+# 启动开发服务器
+pnpm dev
+
+# 构建生产版本
 pnpm build
-# or
-npm run build
 ```
 
-This should create a production bundle for your extension, ready to be zipped and published to the stores.
+## 🤝 贡献指南
+
+欢迎提交 Issue 和 Pull Request！
 
-## Submit to the webstores
+## 📝 开源协议
 
-The easiest way to deploy your Plasmo extension is to use the built-in [bpp](https://bpp.browser.market) GitHub action. Prior to using this action however, make sure to build your extension and upload the first version to the store to establish the basic credentials. Then, simply follow [this setup instruction](https://docs.plasmo.com/framework/workflows/submit) and you should be on your way for automated submission!
+[MIT License](LICENSE)

components/CopyButton.tsx

@@ -0,0 +1,45 @@
+import { motion } from "framer-motion";
+import { IconCopy, IconCheck } from "@tabler/icons-react";
+import "~/styles/components/CopyButton.scss";
+
+interface CopyButtonProps {
+  enabled: boolean;
+  onClick: () => void;
+  disabled?: boolean;
+}
+
+export function CopyButton({ enabled, onClick, disabled }: CopyButtonProps) {
+  return (
+    <button
+      className={`copy-button ${enabled ? "enabled" : ""}`}
+      onClick={onClick}
+      disabled={disabled}
+    >
+      <div className="button-background" />
+      <motion.div className="button-content" layout>
+        <motion.div className="icon-wrapper" layout>
+          {enabled ? (
+            <motion.div
+              initial={{ scale: 0 }}
+              animate={{ scale: 1 }}
+              transition={{ type: "spring", stiffness: 400, damping: 10 }}
+            >
+              <IconCheck size={24} />
+            </motion.div>
+          ) : (
+            <motion.div
+              initial={{ scale: 0 }}
+              animate={{ scale: 1 }}
+              transition={{ type: "spring", stiffness: 400, damping: 10 }}
+            >
+              <IconCopy size={24} />
+            </motion.div>
+          )}
+        </motion.div>
+        <motion.span className="button-text" layout>
+          {enabled ? "已启用复制" : "启用复制"}
+        </motion.span>
+      </motion.div>
+    </button>
+  );
+}

components/FeatureWarning.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import type { FeatureSupport } from "../utils/featureDetect";
+import { motion } from "framer-motion";
+
+interface Props {
+  feature: FeatureSupport;
+  onClose?: () => void;
+}
+
+export const FeatureWarning: React.FC<Props> = ({ feature, onClose }) => {
+  const getBrowser = () => {
+    const ua = navigator.userAgent;
+    if (ua.includes("Chrome")) return "Chrome";
+    if (ua.includes("Firefox")) return "Firefox";
+    if (ua.includes("Edge")) return "Edge";
+    return "浏览器";
+  };
+
+  const browser = getBrowser();
+  const minVersion = feature.minVersion[browser.toLowerCase()];
+
+  return (
+    <div className="warning-container">
+      <div className="feature-warning">
+        <div className="feature-warning-content">
+          <div className="warning-icon">⚠️</div>
+          <div className="warning-message">
+            <h3>需要更新浏览器</h3>
+            <p>
+              {`${feature.name}功能需要 ${browser} ${minVersion || "最新版本"}或更高版本才能使用。`}
+            </p>
+            <p>请更新您的浏览器以使用此功能。</p>
+          </div>
+          {onClose && (
+            <button className="close-button" onClick={onClose}>
+              ×
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

components/PopupFooter.tsx

@@ -0,0 +1,44 @@
+import { motion } from "framer-motion";
+import { IconBrandGithub, IconHeart, IconVersions } from "@tabler/icons-react";
+import { fadeAnimation } from "~/utils/animations";
+import "~/styles/components/PopupFooter.scss";
+import { version } from "~/package.json";
+
+export function PopupFooter() {
+  return (
+    <footer className="popup-footer">
+      <motion.div className="footer-content" variants={fadeAnimation}>
+        <div className="footer-left">
+          <IconVersions size={16} />
+          <span className="version-info">v{version}</span>
+        </div>
+
+        <div className="footer-center">
+          <span className="made-with">
+            Made with <IconHeart size={14} className="heart-icon" /> by
+            <a href="https://github.com/flower0wine" target="_blank" rel="noopener noreferrer">
+              flowerwine
+            </a>
+          </span>
+        </div>
+
+        <motion.div
+          className="footer-right"
+          whileHover={{ scale: 1.05 }}
+          whileTap={{ scale: 0.95 }}
+        >
+          <a
+            href="https://github.com/flower0wine/nice"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="github-link"
+            aria-label="访问 GitHub 仓库"
+          >
+            <IconBrandGithub size={18} />
+            <span>GitHub</span>
+          </a>
+        </motion.div>
+      </motion.div>
+    </footer>
+  );
+}