自定义设置

README.md

@@ -26,8 +26,8 @@ https://github.com/027xiguapi/code-box
 
 1. 安装地址： 
    - [前往 火狐 扩展商店](https://addons.mozilla.org/zh-CN/firefox/addon/code-box/)
-   - [前往 Edge扩展商店](#)
-   - [前往 Chrome扩展商店](#)
+   - [前往 Edge 扩展商店](https://microsoftedge.microsoft.com/addons/detail/code-box/cfpdbfmncaampihkmejogihjkenkonbn)
+   - [前往 Chrome 扩展商店](#)
 
 
 ### 安装方式三：源码安装
@@ -96,4 +96,8 @@ https://github.com/027xiguapi/code-box
 ## 参考
 
 1. [copy-csdn](https://github.com/openHacking/copy-csdn)
-2. [plasmo](https://github.com/PlasmoHQ/plasmo)
+2. [plasmo](https://github.com/PlasmoHQ/plasmo)
+
+## 隐私政策
+
+[网面](https://027xiguapi.github.io/code-box/privacy-policy.html)

component/content.tsx

@@ -1,19 +1,67 @@
+import { useStorage } from "@plasmohq/storage/dist/hook"
+
 import Cnblogs from "./cnblogs"
 import Csdn from "./csdn"
 import Custom from "./custom"
 import Jb51 from "./jb51"
 import Jianshu from "./jianshu"
 import Zhihu from "./zhihu"
+import React from "react"
+
+const itemMap = {
+  csdn: <Csdn />,
+  zhihu: <Zhihu />,
+  jianshu: <Jianshu />,
+  jb51: <Jb51 />,
+  cnblogs: <Cnblogs />,
+  custom: <Custom />,
+}
 
 export default function Content() {
+  const [items] = useStorage("app-items", [
+    {
+      id: "1",
+      value: "csdn",
+      label: "csdn",
+      isShow: true,
+    },
+    {
+      id: "2",
+      value: "zhihu",
+      label: "知乎",
+      isShow: true,
+    },
+    {
+      id: "3",
+      value: "jianshu",
+      label: "简书",
+      isShow: true,
+    },
+    {
+      id: "4",
+      value: "jb51",
+      label: "脚本之家",
+      isShow: true,
+    },
+    {
+      id: "5",
+      value: "cnblogs",
+      label: "博客园",
+      isShow: true,
+    },
+    {
+      id: "6",
+      value: "custom",
+      label: "自定义",
+      isShow: true,
+    }
+  ])
+
   return (
     <>
-      <Csdn />
-      <Zhihu />
-      <Jianshu />
-      <Jb51 />
-      <Cnblogs />
-      <Custom />
+      {items.map((item, index) => (
+        item.isShow ? itemMap[item.value] : <></>
+      ))}
     </>
   )
 }

component/sortableItem.css

@@ -0,0 +1,50 @@
+.sortableItem {
+    display: flex;
+    justify-content: space-between;
+    box-shadow: 0 0 0 calc(1px / 1) rgba(63, 63, 68, 0.05), 0 1px calc(3px / 1) 0 rgba(34, 33, 81, 0.15);
+    width: 280px;
+    margin-bottom: 10px;
+    padding: 5px 8px;
+    border-radius: 4px;
+}
+
+.sortableItem fieldset {
+    width: 180px;
+}
+
+.sortableItem .isShow-toggle {
+    display: flex;
+    width: 24px;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+}
+
+.sortableItem .draggable-handle {
+    display: flex;
+    width: 12px;
+    padding: 15px;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    touch-action: none;
+    cursor: pointer;
+    border-radius: 5px;
+    border: none;
+    outline: none;
+    appearance: none;
+    background-color: transparent;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.sortableItem .draggable-handle svg {
+    fill: #6f7b88;
+    flex: 0 0 auto;
+    margin: auto;
+    height: 100%;
+    overflow: visible;
+}
+
+.sortableItem .draggable-handle:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+}

component/sortableItem.tsx

@@ -0,0 +1,70 @@
+import { useSortable } from "@dnd-kit/sortable"
+import { CSS } from "@dnd-kit/utilities"
+import React from "react"
+
+import Csdn from "~component/csdn"
+import Zhihu from "~component/zhihu"
+import Jianshu from "~component/jianshu"
+import Jb51 from "~component/jb51"
+import Cnblogs from "~component/cnblogs"
+import Custom from "~component/custom"
+
+import "./sortableItem.css"
+
+const itemMap = {
+  csdn: <Csdn />,
+  zhihu: <Zhihu />,
+  jianshu: <Jianshu />,
+  jb51: <Jb51 />,
+  cnblogs: <Cnblogs />,
+  custom: <Custom />
+}
+
+export default function SortableItem(props) {
+  const { item, index, onToggleShow } = props
+  const { attributes, listeners, setNodeRef, transform, transition } =
+    useSortable({ id: item.id })
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition
+  }
+
+
+  function handleToggleShow() {
+    onToggleShow({ isShow: item.isShow, index: index })
+  }
+
+  return (
+    <div ref={setNodeRef} style={style} className="sortableItem">
+      {itemMap[item.value]}
+      <span className="isShow-toggle" onClick={handleToggleShow}>
+      {item.isShow ?
+        <svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M24 36C35.0457 36 44 24 44 24C44 24 35.0457 12 24 12C12.9543 12 4 24 4 24C4 24 12.9543 36 24 36Z"
+                fill="none" stroke="#333" strokeWidth="4" strokeLinejoin="round" />
+          <path
+            d="M24 29C26.7614 29 29 26.7614 29 24C29 21.2386 26.7614 19 24 19C21.2386 19 19 21.2386 19 24C19 26.7614 21.2386 29 24 29Z"
+            fill="none" stroke="#333" strokeWidth="4" strokeLinejoin="round" />
+        </svg>
+
+        : <svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M9.85786 18C6.23858 21 4 24 4 24C4 24 12.9543 36 24 36C25.3699 36 26.7076 35.8154 28 35.4921M20.0318 12.5C21.3144 12.1816 22.6414 12 24 12C35.0457 12 44 24 44 24C44 24 41.7614 27 38.1421 30"
+            stroke="#333" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" />
+          <path
+            d="M20.3142 20.6211C19.4981 21.5109 19 22.6972 19 23.9998C19 26.7612 21.2386 28.9998 24 28.9998C25.3627 28.9998 26.5981 28.4546 27.5 27.5705"
+            stroke="#333" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" />
+          <path d="M42 42L6 6" stroke="#333" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+      }
+      </span>
+      <button {...listeners} className="draggable-handle button">
+        <svg viewBox="0 0 20 20" width="12">
+          <path
+            d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"></path>
+        </svg>
+      </button>
+    </div>
+  )
+}

options.tsx

@@ -1,25 +1,128 @@
-import Content from "./component/content"
+import {
+  closestCenter,
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core"
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy
+} from "@dnd-kit/sortable"
+import { useStorage } from "@plasmohq/storage/dist/hook"
+import React, { useState } from "react"
+
+import SortableItem from "~component/sortableItem"
 
 import "./index.css"
 
 export default function IndexOptions() {
+  const [items, setItems] = useStorage("app-items", [
+    {
+      id: "1",
+      value: "csdn",
+      label: "csdn",
+      isShow: true,
+    },
+    {
+      id: "2",
+      value: "zhihu",
+      label: "知乎",
+      isShow: true,
+    },
+    {
+      id: "3",
+      value: "jianshu",
+      label: "简书",
+      isShow: true,
+    },
+    {
+      id: "4",
+      value: "jb51",
+      label: "脚本之家",
+      isShow: true,
+    },
+    {
+      id: "5",
+      value: "cnblogs",
+      label: "博客园",
+      isShow: true,
+    },
+    {
+      id: "6",
+      value: "custom",
+      label: "自定义",
+      isShow: true,
+    }
+  ])
+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  )
+
+  function handleDragEnd(event) {
+    const { active, over } = event
+
+    if (active.id !== over.id) {
+      setItems((data) => {
+        const oldIndex = data.findIndex((item) => item.id === active.id)
+        const newIndex = data.findIndex((item) => item.id === over.id)
+
+        return arrayMove(data, oldIndex, newIndex)
+      })
+    }
+  }
+
+  function handleToggleShow(event) {
+    const { isShow, index } = event
+
+    items[index].isShow = !isShow
+    setItems([...items])
+  }
+
   return (
     <div className="App options">
       <div className="App-header">
         <h2 className="title">CodeBox 🎉</h2>
         <p className="desc">更方便操作网页代码</p>
       </div>
       <div className="App-body">
-        <Content />
+        <DndContext
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          onDragEnd={handleDragEnd}>
+          <SortableContext items={items} strategy={verticalListSortingStrategy}>
+            {items.map((item, index) => (
+              <SortableItem key={item.id} index={index} item={item} onToggleShow={handleToggleShow} />
+            ))}
+          </SortableContext>
+        </DndContext>
       </div>
       <div className="App-link">
-        <a
-          className="btn"
-          href="https://github.com/027xiguapi/code-box"
-          target="_blank"
-          rel="noreferrer">
-          支持作者更新👍
-        </a>
+        <div className="item">
+          <a
+            className="btn"
+            href="https://027xiguapi.github.io/code-box/privacy-policy.html"
+            target="_blank"
+            rel="noreferrer">
+            隐私政策📄
+          </a>
+        </div>
+        <div>
+          <a
+            className="btn"
+            href="https://github.com/027xiguapi/code-box"
+            target="_blank"
+            rel="noreferrer">
+            支持作者更新👍
+          </a>
+        </div>
       </div>
     </div>
   )

package.json

@@ -1,7 +1,7 @@
 {
   "name": "code-box",
   "displayName": "codebox-免登录一键复制代码(CSDN/知乎/脚本之家/博客园)",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "本浏览器插件可以用于CSDN/知乎/脚本之家/博客园等网站,实现无需登录一键复制代码;支持选中代码;或者代码右上角按钮的一键复制;解除关注博主即可阅读全文提示;去除登录弹窗;去除跳转APP弹窗;页面自定义样式.",
   "author": "027xiguapi. <458813868@qq.com>",
   "scripts": {
@@ -13,6 +13,9 @@
     "clean": "rimraf build"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@plasmohq/storage": "^1.11.0",
     "plasmo": "0.88.0",
     "react": "18.2.0",
@@ -36,6 +39,8 @@
     "host_permissions": [
       "https://*/*"
     ],
-    "omnibox": { "keyword": "copy" }
+    "omnibox": {
+      "keyword": "copy"
+    }
   }
 }