博客园功能基本完成

README.md

@@ -44,13 +44,15 @@ CSDN博客在未登录状态下无法复制代码，使用这个插件，无需
 5. 未关注博主状态下，不再提示关注博主即可阅读全文，且完整展示文章
 6. 自动展开代码块，如果不需要自动展开，可以在扩展的`popup`界面中关闭自动展开代码块功能。
 
-## 脚本之家
+### 脚本之家
 
 1. 打开任意一个`脚本之家`博客即可开始复制代码
 2. 未登录`脚本之家`状态下，支持选中代码
 3. 屏蔽广告
 
-## 博客园
+### 博客园
+
+1. 一键复制代码
 
 ## 参考
 

component/cnblogs.tsx

@@ -0,0 +1,23 @@
+import { useStorage } from "@plasmohq/storage/hook"
+
+export default function Cnblogs() {
+  const [copyCode, setCopyCode] = useStorage("cnblogs-copyCode", (v) =>
+    v === undefined ? true : v
+  )
+
+  return (
+    <fieldset>
+      <legend>博客园设置</legend>
+      <div>
+        <input
+          type="checkbox"
+          id="cnblogs-copyCode"
+          name="cnblogs-copyCode"
+          checked={copyCode}
+          onChange={(e) => setCopyCode(e.target.checked)}
+        />
+        <label htmlFor="cnblogs-copyCode">一键复制代码</label>
+      </div>
+    </fieldset>
+  )
+}

component/csdn.tsx

@@ -1,6 +1,6 @@
 import { useStorage } from "@plasmohq/storage/hook"
 
-function Csdn() {
+export default function Csdn() {
   const [closeAds, setCloseAds] = useStorage("csdn-closeAds", (v) =>
     v === undefined ? true : v
   )
@@ -75,5 +75,3 @@ function Csdn() {
     </fieldset>
   )
 }
-
-export default Csdn

component/jb51.tsx

@@ -1,6 +1,6 @@
 import { useStorage } from "@plasmohq/storage/hook"
 
-function Jb51() {
+export default function Jb51() {
   const [closeAds, setCloseAds] = useStorage("jb51-closeAds", (v) =>
     v === undefined ? true : v
   )
@@ -34,5 +34,3 @@ function Jb51() {
     </fieldset>
   )
 }
-
-export default Jb51

contents/cnblogs.tsx

@@ -0,0 +1,73 @@
+import type { PlasmoCSConfig } from "plasmo"
+import { useEffect, useRef } from "react"
+
+import { useStorage } from "@plasmohq/storage/hook"
+
+export const config: PlasmoCSConfig = {
+  matches: ["https://*.cnblogs.com/*"],
+  all_frames: true
+}
+
+window.addEventListener("load", () => {
+  console.log("博客园加载完成，执行代码")
+})
+
+export default function cnblogs() {
+  const [copyCode] = useStorage<boolean>("cnblogs-copyCode")
+
+  useEffect(() => {
+    console.log("cnblogs copyCode", copyCode)
+    copyCode && copyCodeFunc()
+  }, [copyCode])
+
+  function copyCodeFunc() {
+    // 功能一： 修改复制按钮，支持一键复制
+    const toolbars = document.querySelectorAll<HTMLElement>(
+      ".cnblogs_code_toolbar"
+    )
+
+    toolbars.forEach((toolbar) => {
+      const button = document.createElement("button")
+      button.innerHTML = "复制"
+      button.style.float = "right"
+      button.title = "一键复制代码"
+      button.classList.add("copy-btn")
+
+      toolbar.appendChild(button)
+    })
+
+    const buttons = document.querySelectorAll<HTMLElement>(
+      ".cnblogs_code_toolbar .copy-btn"
+    )
+
+    buttons.forEach((btn) => {
+      // 移除点击事件
+      btn.setAttribute("onclick", "")
+
+      // 克隆按钮
+      var elClone = btn.cloneNode(true)
+
+      // 替回按钮
+      btn.parentNode.replaceChild(elClone, btn)
+
+      // 重新添加点击事件
+      elClone.addEventListener("click", (e) => {
+        // 实现复制
+        const target = e.target as HTMLElement
+        const parentPreBlock = target.closest(".cnblogs_code")
+        const codeBlock = parentPreBlock.querySelector<HTMLElement>("pre")
+
+        navigator.clipboard.writeText(codeBlock.innerText)
+
+        target.innerText = "复制成功"
+        setTimeout(() => {
+          target.innerText = "复制"
+        }, 1000)
+        e.stopPropagation()
+        e.preventDefault()
+      })
+    })
+  }
+
+  return <div style={{ display: "none" }}></div>
+}

options.tsx

@@ -1,16 +1,28 @@
+import Cnblogs from "./component/cnblogs"
 import Csdn from "./component/csdn"
 import Jb51 from "./component/jb51"
 
 function IndexOptions() {
   return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        padding: 16
-      }}>
-      <Csdn />
-      <Jb51 />
+    <div className="App" style={{ width: "160px" }}>
+      <div className="App-header">
+        <h2 style={{ marginBottom: "0" }}>CodeBox 🎉</h2>
+        <p style={{ margin: "5px 0" }}>更方便操作网页代码</p>
+      </div>
+      <div className="App-body">
+        <Csdn />
+        <Jb51 />
+        <Cnblogs />
+      </div>
+      <div className="App-link" style={{ marginTop: "10px" }}>
+        <a
+          className="btn"
+          href="https://github.com/027xiguapi/code-box"
+          target="_blank"
+          rel="noreferrer">
+          支持作者更新👍
+        </a>
+      </div>
     </div>
   )
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "code-box",
   "displayName": "Code box",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "无需登录一键复制CSDN代码;支持选中代码，或者代码右上角按钮的一键复制；解除关注博主即可阅读全文提示；去除登陆弹窗。",
   "author": "027xiguapi. <458813868@qq.com>",
   "scripts": {

popup.tsx

@@ -1,3 +1,4 @@
+import Cnblogs from "./component/cnblogs"
 import Csdn from "./component/csdn"
 import Jb51 from "./component/jb51"
 
@@ -11,6 +12,7 @@ function IndexPopup() {
       <div className="App-body">
         <Csdn />
         <Jb51 />
+        <Cnblogs />
       </div>
       <div className="App-link" style={{ marginTop: "10px" }}>
         <a