简书功能基本完成

README.md

@@ -19,7 +19,7 @@ https://github.com/027xiguapi/code-box
    - [Edge网上应用商店](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home?hl=zh-CN)
 2. 搜索：`codebox`
 
-   ![img](https://raw.githubusercontent.com/027xiguapi/code-box/main/public/img.png)
+![img](https://raw.githubusercontent.com/027xiguapi/code-box/main/public/img.png)
 
 
 ### 安装方式二：源码安装
@@ -38,6 +38,9 @@ https://github.com/027xiguapi/code-box
 4. 勾选开发者模式，即可以文件夹的形式直接加载插件
 
 ## 完成
+
+![img-1](https://raw.githubusercontent.com/027xiguapi/code-box/main/public/img_1.png)
+
 ### CSDN
 
 1. 打开任意一个`CSDN`博客即可开始复制代码
@@ -48,6 +51,18 @@ https://github.com/027xiguapi/code-box
 6. 自动展开代码块
 7. 移动端屏蔽跳转APP
 
+### 知乎
+
+1. 一键复制代码
+2. 未登录`知乎`状态下，不再提示展开阅读全文，且完整展示文章
+3. 未登录`知乎`状态下，不会再出现强制登录弹窗
+
+### 简书
+
+1. 一键复制代码
+2. 不再提示展开阅读全文，且完整展示文章
+3. 不会再出现强制登录弹窗
+
 ### 脚本之家
 
 1. 打开任意一个`脚本之家`博客即可开始复制代码
@@ -59,11 +74,6 @@ https://github.com/027xiguapi/code-box
 
 1. 一键复制代码
 
-### 知乎
-
-1. 一键复制代码
-2. 未登录`知乎`状态下，不再提示展开阅读全文，且完整展示文章
-3. 未登录`知乎`状态下，不会再出现强制登陆弹窗
 
 ## 计划
 

component/jianshu.tsx

@@ -0,0 +1,61 @@
+import { useStorage } from "@plasmohq/storage/hook"
+
+export default function Jianshu() {
+  const [copyCode, setCopyCode] = useStorage("jianshu-copyCode", (v) =>
+    v === undefined ? true : v
+  )
+  const [closeLoginModal, setCloseLoginModal] = useStorage(
+    "jianshu-closeLoginModal",
+    (v) => (v === undefined ? true : v)
+  )
+  const [autoOpenCode, setAutoOpenCode] = useStorage(
+    "jianshu-autoOpenCode",
+    (v) => (v === undefined ? true : v)
+  )
+
+  return (
+    <fieldset>
+      <legend>简书设置</legend>
+      <div className="item">
+        <span>一键复制代码</span>
+        <input
+          type="checkbox"
+          id="jianshu-copyCode"
+          name="jianshu-copyCode"
+          className="codebox-offscreen"
+          checked={copyCode}
+          onChange={(e) => setCopyCode(e.target.checked)}
+        />
+        <label className="codebox-switch" htmlFor="jianshu-copyCode"></label>
+      </div>
+      <div className="item">
+        <span>关闭登录弹窗</span>
+        <input
+          type="checkbox"
+          id="jianshu-closeLoginModal"
+          name="jianshu-closeLoginModal"
+          className="codebox-offscreen"
+          checked={closeLoginModal}
+          onChange={(e) => setCloseLoginModal(e.target.checked)}
+        />
+        <label
+          className="codebox-switch"
+          htmlFor="jianshu-closeLoginModal"></label>
+      </div>
+      <div className="item">
+        <span>自动展开全文</span>
+        <input
+          type="checkbox"
+          id="jianshu-autoOpenCode"
+          name="jianshu-autoOpenCode"
+          className="codebox-offscreen"
+          checked={autoOpenCode}
+          onChange={(e) => setAutoOpenCode(e.target.checked)}
+        />
+        <label
+          className="codebox-switch"
+          htmlFor="jianshu-autoOpenCode"></label>
+      </div>
+    </fieldset>
+  )
+}

component/zhihu.tsx

@@ -26,10 +26,10 @@ export default function Zhihu() {
           checked={copyCode}
           onChange={(e) => setCopyCode(e.target.checked)}
         />
-        <label htmlFor="zhihu-copyCode"></label>
+        <label className="codebox-switch" htmlFor="zhihu-copyCode"></label>
       </div>
       <div className="item">
-        <span>关闭登陆弹窗</span>
+        <span>关闭登录弹窗</span>
         <input
           type="checkbox"
           id="zhihu-closeLoginModal"

contents/jianshu.tsx

@@ -0,0 +1,87 @@
+import type { PlasmoCSConfig } from "plasmo"
+import { useEffect, useRef } from "react"
+
+import { useStorage } from "@plasmohq/storage/hook"
+
+import { addCss } from "~tools"
+
+export const config: PlasmoCSConfig = {
+  matches: ["https://*.jianshu.com/*"]
+}
+
+window.addEventListener("load", () => {
+  console.log("简书加载完成，执行代码")
+})
+
+export default function Jianshu() {
+  const [closeLoginModal] = useStorage<boolean>("jianshu-closeLoginModal")
+  const [copyCode] = useStorage<boolean>("jianshu-copyCode")
+  const [autoOpenCode] = useStorage<boolean>("jianshu-autoOpenCode")
+
+  useEffect(() => {
+    console.log("jianshu status", { copyCode, closeLoginModal, autoOpenCode })
+    copyCode && copyCodeFunc()
+    closeLoginModal && closeLoginModalFunc()
+    autoOpenCode && autoOpenCodeFunc()
+  }, [copyCode, closeLoginModal, autoOpenCode])
+
+  // 一键复制
+  function copyCodeFunc() {
+    const codes = document.querySelectorAll<HTMLElement>(".hljs")
+
+    codes.forEach((code) => {
+      const button = document.createElement("button")
+      button.innerText = "复制"
+      button.style.position = "absolute"
+      button.style.top = "0"
+      button.style.right = "0"
+      button.style.background = "#fff"
+      button.title = "一键复制代码"
+      button.classList.add("Button")
+      button.classList.add("VoteButton")
+
+      code.appendChild(button)
+      code.style.position = "relative"
+
+      button.addEventListener("click", (e) => {
+        const target = e.target as HTMLElement
+        const parentPreBlock = target.closest(".hljs")
+        const codeBlock = parentPreBlock.querySelector<HTMLElement>("code")
+
+        navigator.clipboard.writeText(codeBlock.innerText)
+
+        target.innerText = "复制成功"
+        setTimeout(() => {
+          target.innerText = "复制"
+        }, 1000)
+        e.stopPropagation()
+        e.preventDefault()
+      })
+    })
+  }
+
+  // 隐藏登录弹窗
+  function closeLoginModalFunc() {
+    const modal = document.querySelector(".open-app-modal")
+    const dialog = modal.closest("div[class^='dialog-']") as HTMLElement
+    const className = dialog.className
+    addCss(`.${className} { display:none !important; }`)
+  }
+
+  // 自动展开全文
+  function autoOpenCodeFunc() {
+    const tips = document.querySelector(".collapse-tips")
+    if (tips) {
+      const css = `
+        .collapse-free-content{
+          height: auto !important;
+        }
+        .collapse-tips {
+          display: none !important;
+        }`
+      addCss(css)
+    }
+  }
+
+  return <div style={{ display: "none" }}></div>
+}

index.css

@@ -3,22 +3,27 @@
 }
 
 .App-header .title {
-    margin-bottom: 0
+    margin-bottom: 0;
+    font-size: 18px;
 }
 
 .App-header .desc {
     margin: 5px 0;
+    font-size: 12px;
 }
 
 .App-link {
     margin-top: 10px;
+    margin-left: 5px;
+    font-size: 14px;
 }
 
 .App-body fieldset .item {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 5px;
+    font-size: 12px;
 }
 
 /*开关*/

options.tsx

@@ -1,6 +1,7 @@
 import Cnblogs from "./component/cnblogs"
 import Csdn from "./component/csdn"
 import Jb51 from "./component/jb51"
+import Jianshu from "./component/jianshu"
 import Zhihu from "./component/zhihu"
 
 import "./index.css"
@@ -15,6 +16,7 @@ function IndexOptions() {
       <div className="App-body">
         <Csdn />
         <Zhihu />
+        <Jianshu />
         <Jb51 />
         <Cnblogs />
       </div>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "code-box",
   "displayName": "codebox-免登录复制代码(CSDN/知乎/脚本之家/博客园)",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "本插件可以用于CSDN/知乎/脚本之家/博客园等网站,实现无需登录一键复制代码;支持选中代码;或者代码右上角按钮的一键复制;解除关注博主即可阅读全文提示;去除登录弹窗;去除跳转APP弹窗.",
   "author": "027xiguapi. <458813868@qq.com>",
   "scripts": {

popup.tsx

@@ -1,6 +1,7 @@
 import Cnblogs from "./component/cnblogs"
 import Csdn from "./component/csdn"
 import Jb51 from "./component/jb51"
+import Jianshu from "./component/jianshu"
 import Zhihu from "./component/zhihu"
 
 import "./index.css"
@@ -15,6 +16,7 @@ function IndexPopup() {
       <div className="App-body">
         <Csdn />
         <Zhihu />
+        <Jianshu />
         <Jb51 />
         <Cnblogs />
       </div>