增加微信一键复制代码

ghostchan · Sep 4, 2024 · 81bce11 · 81bce11
1 parent 8635835
commit 81bce11
Show file tree

Hide file tree

Showing 16 changed files with 125 additions and 27 deletions.
diff --git a/README.md b/README.md
@@ -1,12 +1,12 @@
-## code-box
+## codebox-一键复制代码/下载文章
 
 ## 代码
 
 https://github.com/027xiguapi/code-box
 
 ## 介绍
 
-本浏览器插件可以用于CSDN/知乎/脚本之家/博客园/博客园/51CTO博客/php中文网/掘金等网站,一键下载文章成html或markdown文件;实现无需登录一键复制代码;支持选中代码;或者代码右上角按钮的一键复制;解除关注博主即可阅读全文提示;去除登录弹窗;去除跳转APP弹窗.
+本浏览器插件可以用于CSDN/知乎/脚本之家/博客园/博客园/51CTO博客/php中文网/掘金/微信等网站,一键下载文章成html或markdown文件;实现无需登录一键复制代码;支持选中代码;或者代码右上角按钮的一键复制;解除关注博主即可阅读全文提示;去除登录弹窗;去除跳转APP弹窗.
 
 ## 安装
 
@@ -59,11 +59,11 @@ https://github.com/027xiguapi/code-box
 
 ## 功能
 
-![img-1](https://raw.githubusercontent.com/027xiguapi/code-box/main/public/option.jpg)
+![img-1](https://raw.githubusercontent.com/027xiguapi/code-box/main/public/config.jpg)
 
 ### 自定义
 
-1. 插入自定义样式(css代码)
+- 插入自定义样式(css代码)
 
 ### CSDN
 

diff --git a/component/weixin.tsx b/component/weixin.tsx
@@ -1,10 +1,15 @@
 import { DownloadOutlined } from "@ant-design/icons"
 
 import { sendToContentScript } from "@plasmohq/messaging"
+import { useStorage } from "@plasmohq/storage/dist/hook"
 
 import { i18n } from "~tools"
 
 export default function Weixin() {
+  const [copyCode, setCopyCode] = useStorage("weixin-copyCode", (v) =>
+    v === undefined ? true : v
+  )
+
   function downloadMarkdown() {
     sendToContentScript({
       name: "weixin-downloadMarkdown"
@@ -19,7 +24,19 @@ export default function Weixin() {
 
   return (
     <fieldset>
-      <legend>{i18n("oschinaConfig")}</legend>
+      <legend>{i18n("weixinConfig")}</legend>
+      <div className="item">
+        <span>{i18n("copyCode")}</span>
+        <input
+          type="checkbox"
+          id="weixin-copyCode"
+          name="weixin-copyCode"
+          className="codebox-offscreen"
+          checked={copyCode}
+          onChange={(e) => setCopyCode(e.target.checked)}
+        />
+        <label className="codebox-switch" htmlFor="weixin-copyCode"></label>
+      </div>
       <div className="item download" onClick={downloadMarkdown}>
         {i18n("downloadMarkdown")}
         <DownloadOutlined style={{ color: "#52c41a", fontSize: "16px" }} />

diff --git a/contents/51cto.tsx b/contents/51cto.tsx
@@ -102,7 +102,7 @@ export default function Cto51() {
                     id: uuidv4(),
                     value: codeBlock.innerText,
                     createdAt: new Date(),
-                    from: "CSDN",
+                    from: "51CTO",
                     link: location.href,
                     tags: [],
                     remark: ""
@@ -114,7 +114,7 @@ export default function Cto51() {
                     id: uuidv4(),
                     value: codeBlock.innerText,
                     createdAt: new Date(),
-                    from: "CSDN",
+                    from: "51CTO",
                     link: location.href,
                     tags: [],
                     remark: ""

diff --git a/contents/weixin.tsx b/contents/weixin.tsx
@@ -1,7 +1,9 @@
 import type { PlasmoCSConfig } from "plasmo"
 import { useEffect } from "react"
+import { v4 as uuidv4 } from "uuid"
 
 import { useMessage } from "@plasmohq/messaging/hook"
+import { useStorage } from "@plasmohq/storage/dist/hook"
 
 import { Readability } from "~node_modules/@mozilla/readability"
 import {
@@ -25,9 +27,15 @@ const authorLink = getMetaContentByProperty("article:author")
 const domain = window.location.hostname
 
 export default function Weixin() {
+  const [copyCode] = useStorage<boolean>("51cto-copyCode")
+  const [history, setHistory] = useStorage<any[]>("codebox-history")
+  const [closeLog] = useStorage("config-closeLog", true)
+
   useEffect(() => {
-    setIcon(true)
-  }, [])
+    closeLog || console.log("weixin status", { copyCode })
+    copyCode && copyCodeFunc()
+    setIcon(copyCode)
+  }, [copyCode])
 
   useMessage(async (req, res) => {
     if (req.name == "weixin-isShow") {
@@ -41,6 +49,73 @@ export default function Weixin() {
     }
   })
 
+  function copyCodeFunc() {
+    const content_views = document.querySelector("#js_content")
+
+    // 功能一： 修改复制按钮，支持一键复制
+    const codes = content_views.querySelectorAll<HTMLElement>("code")
+
+    if (codes.length > 0) {
+      codes.forEach((code) => {
+        const pre = code.closest("pre")
+        if (pre) {
+          const button = document.createElement("button")
+          button.innerText = "复制"
+          button.style.position = "absolute"
+          button.style.top = "0"
+          button.style.right = "0"
+          button.title = "一键复制代码"
+          button.classList.add("Button")
+          button.classList.add("VoteButton")
+
+          pre.appendChild(button)
+          pre.style.position = "relative"
+
+          button.addEventListener("click", (e) => {
+            const target = e.target as HTMLElement
+            const parentPreBlock = target.closest("pre")
+            const codeBlock = parentPreBlock.querySelector<HTMLElement>("code")
+
+            navigator.clipboard.writeText(codeBlock.innerText)
+            setHistory((prevData) =>
+              prevData
+                ? [
+                    {
+                      id: uuidv4(),
+                      value: codeBlock.innerText,
+                      createdAt: new Date(),
+                      from: "微信",
+                      link: location.href,
+                      tags: [],
+                      remark: ""
+                    },
+                    ...prevData
+                  ]
+                : [
+                    {
+                      id: uuidv4(),
+                      value: codeBlock.innerText,
+                      createdAt: new Date(),
+                      from: "微信",
+                      link: location.href,
+                      tags: [],
+                      remark: ""
+                    }
+                  ]
+            )
+
+            target.innerText = "复制成功"
+            setTimeout(() => {
+              target.innerText = "复制"
+            }, 1000)
+            e.stopPropagation()
+            e.preventDefault()
+          })
+        }
+      })
+    }
+  }
+
   function downloadMarkdown() {
     const html = document.querySelector("#img-content")
     const markdown = turndownService.turndown(html)

diff --git a/locales/en/messages.json b/locales/en/messages.json
@@ -131,6 +131,9 @@
   "downloadHtml": {
     "message": "Download HTML"
   },
+  "copyCode": {
+    "message": "Copy Code"
+  },
   "juejinConfig": {
     "message": "Juejin Config"
   },

diff --git a/locales/zh_CN/messages.json b/locales/zh_CN/messages.json
@@ -3,7 +3,7 @@
     "message": "codebox-一键复制代码/下载文章"
   },
   "extensionDescription": {
-    "message": "实现一键下载文章成html或markdown文件;实现无需登录一键复制代码;支持选中代码;或者代码右上角按钮的一键复制;解除关注博主即可阅读全文提示;去除登录弹窗;去除跳转APP弹窗;页面自定义样式."
+    "message": "实现一键下载文章成html或markdown文件;无需登录一键复制代码;支持选中代码;或者代码右上角按钮的一键复制;解除关注博主即可阅读全文提示;去除登录弹窗;去除跳转APP弹窗;页面自定义样式."
   },
   "popupDescription": {
     "message": "免登录一键复制代码"
@@ -131,6 +131,9 @@
   "downloadHtml": {
     "message": "下载 HTML"
   },
+  "copyCode": {
+    "message": "一键复制代码"
+  },
   "juejinConfig": {
     "message": "掘金设置"
   },

diff --git a/options/index.tsx b/options/index.tsx
@@ -36,46 +36,46 @@ export default function IndexOptions() {
     },
     {
       id: "5",
+      value: "weixin",
+      label: "微信",
+      isShow: true
+    },
+    {
+      id: "6",
       value: "jb51",
       label: "脚本之家",
       isShow: true
     },
     {
-      id: "6",
+      id: "7",
       value: "cnblogs",
       label: "博客园",
       isShow: true
     },
     {
-      id: "7",
+      id: "8",
       value: "51cto",
       label: "51CTO",
       isShow: true
     },
     {
-      id: "8",
+      id: "9",
       value: "juejin",
       label: "掘金",
       isShow: true
     },
     {
-      id: "9",
+      id: "10",
       value: "oschina",
       label: "oschina",
       isShow: true
     },
     {
-      id: "10",
+      id: "11",
       value: "segmentfault",
       label: "思否",
       isShow: true
     },
-    {
-      id: "11",
-      value: "weixin",
-      label: "微信",
-      isShow: true
-    },
     {
       id: "12",
       value: "custom",

diff --git a/package.json b/package.json
@@ -1,17 +1,17 @@
 {
   "name": "code-box",
   "displayName": "__MSG_extensionName__",
-  "version": "0.5.10",
+  "version": "0.5.11",
   "description": "__MSG_extensionDescription__",
   "author": "027xiguapi. <458813868@qq.com>",
   "scripts": {
     "dev": "plasmo dev",
-    "build": "rimraf build && plasmo build",
-    "build:firefox": "rimraf build && plasmo build --target=firefox-mv2",
+    "build": "plasmo build",
+    "build:firefox": "plasmo build --target=firefox-mv2",
     "build:all": "rimraf build && plasmo build && plasmo build --target=firefox-mv2",
     "package": "plasmo package",
     "package:firefox": "plasmo package --target=firefox-mv2",
-    "package:all": "plasmo package && plasmo package --target=firefox-mv2",
+    "package:all": "npm run build:all && plasmo package && plasmo package --target=firefox-mv2",
     "clean": "rimraf build"
   },
   "repository": {

diff --git a/public/128x128.png b/public/128x128.png
diff --git a/public/1400x560.jpg b/public/1400x560.jpg
diff --git a/public/1400x560.png b/public/1400x560.png
diff --git a/public/440x280.png b/public/440x280.png
diff --git a/public/app.md b/public/app.md
@@ -6,7 +6,7 @@ https://github.com/027xiguapi/code-box
 
 ## 描述
 
-一键下载文章html或markdown文件;实现无需登录一键复制代码;支持选中代码;或者代码右上角按钮的一键复制;解除关注博主即可阅读全文提示;去除登录弹窗;去除跳转APP弹窗;页面自定义样式.
+本浏览器插件可以用于CSDN/知乎/脚本之家/博客园/博客园/51CTO博客/php中文网/掘金/微信等网站,一键下载文章成html或markdown文件;实现无需登录一键复制代码;支持选中代码;或者代码右上角按钮的一键复制;解除关注博主即可阅读全文提示;去除登录弹窗;去除跳转APP弹窗;页面自定义样式.
 
 ### CSDN
 1. 一键下载文章html或markdown文件

diff --git a/public/app.txt b/public/app.txt
@@ -1,6 +1,6 @@
 描述
 
-实现无需登录一键复制代码;支持选中代码;或者代码右上角按钮的一键复制;解除关注博主即可阅读全文提示;去除登录弹窗;去除跳转APP弹窗;页面自定义样式.
+本浏览器插件可以用于CSDN/知乎/脚本之家/博客园/博客园/51CTO博客/php中文网/掘金/微信等网站,一键下载文章成html或markdown文件;实现无需登录一键复制代码;支持选中代码;或者代码右上角按钮的一键复制;解除关注博主即可阅读全文提示;去除登录弹窗;去除跳转APP弹窗;页面自定义样式.
 
 注意：由于审核原因，新版一般会晚几天上架，请耐心等候。
 

diff --git a/public/config.jpg b/public/config.jpg
diff --git a/public/option.jpg b/public/option.jpg