From 751ed9c1e9be6da100ceb6fe7f7f4ba6316c0e76 Mon Sep 17 00:00:00 2001
From: fzk <458813868@qq.com>
Date: Tue, 7 Jan 2025 11:30:41 +0800
Subject: [PATCH] =?UTF-8?q?=E6=89=80=E6=9C=89=E6=A8=A1=E5=9D=97=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E6=89=93=E5=8D=B0=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 component/options/cnblogs.tsx      |   2 +
 component/options/csdn.tsx         |   1 +
 component/options/jb51.tsx         |   2 +
 component/options/jianshu.tsx      |   2 +
 component/options/oschina.tsx      |   2 +
 component/options/php.tsx          |  12 +--
 component/options/segmentfault.tsx |  12 +--
 component/options/weixin.tsx       |  14 ++--
 component/options/zhihu.tsx        |  12 +--
 component/tagBtn/style.ts          |  25 ++++++
 contents/51cto.tsx                 |  34 +++------
 contents/cnblogs.tsx               |  24 +-----
 contents/csdn.tsx                  |  45 +++++------
 contents/jb51.tsx                  |  65 ++++++++++++++--
 contents/jianshu.tsx               |  65 ++++++++++++++--
 contents/juejin.tsx                |  49 +++++-------
 contents/medium.tsx                |  48 +++++-------
 contents/oschina.tsx               |  65 ++++++++++++++--
 contents/php.tsx                   | 119 ++++++++++++-----------------
 contents/segmentfault.tsx          |  77 ++++++++++++++++---
 contents/weixin.tsx                |  30 ++------
 contents/zhihu.tsx                 |  68 ++++++++++++++---
 package.json                       |   2 +-
 23 files changed, 494 insertions(+), 281 deletions(-)
 create mode 100644 component/tagBtn/style.ts

diff --git a/component/options/cnblogs.tsx b/component/options/cnblogs.tsx
index ad02cd5..5388b2a 100644
--- a/component/options/cnblogs.tsx
+++ b/component/options/cnblogs.tsx
@@ -7,6 +7,7 @@ import DownloadHtml from "~component/items/downloadHtml"
 import DownloadMarkdown from "~component/items/downloadMarkdown"
 import DownloadPdf from "~component/items/downloadPdf"
 import EditMarkdown from "~component/items/editMarkdown"
+import ShowTag from "~component/items/showTag"
 import { i18n } from "~tools"
 
 export default function Cnblogs({ forwardRef }) {
@@ -38,6 +39,7 @@ export default function Cnblogs({ forwardRef }) {
         <label className="codebox-switch" htmlFor="cnblogs-copyCode"></label>
       </div>
       <CssCode name="cnblogs"></CssCode>
+      <ShowTag name="cnblogs"></ShowTag>
       <EditMarkdown name="cnblogs"></EditMarkdown>
       <DownloadMarkdown name="cnblogs"></DownloadMarkdown>
       <DownloadHtml name="cnblogs"></DownloadHtml>
diff --git a/component/options/csdn.tsx b/component/options/csdn.tsx
index b36cf76..7feb92f 100644
--- a/component/options/csdn.tsx
+++ b/component/options/csdn.tsx
@@ -142,6 +142,7 @@ export default function Csdn({ forwardRef }) {
           htmlFor="csdn-closeRedirectModal"
           className="codebox-switch"></label>
       </div>
+      <ShowTag name="csdn"></ShowTag>
       <CssCode name="csdn"></CssCode>
       <ShowTag name="csdn"></ShowTag>
       <EditMarkdown name="csdn"></EditMarkdown>
diff --git a/component/options/jb51.tsx b/component/options/jb51.tsx
index 1113020..ba71d41 100644
--- a/component/options/jb51.tsx
+++ b/component/options/jb51.tsx
@@ -7,6 +7,7 @@ import DownloadHtml from "~component/items/downloadHtml"
 import DownloadMarkdown from "~component/items/downloadMarkdown"
 import DownloadPdf from "~component/items/downloadPdf"
 import EditMarkdown from "~component/items/editMarkdown"
+import ShowTag from "~component/items/showTag"
 import { i18n } from "~tools"
 
 export default function Jb51({ forwardRef }) {
@@ -53,6 +54,7 @@ export default function Jb51({ forwardRef }) {
         />
         <label className="codebox-switch" htmlFor="jb51-copyCode"></label>
       </div>
+      <ShowTag name="jb51"></ShowTag>
       <CssCode name="jb51"></CssCode>
       <EditMarkdown name="jb51"></EditMarkdown>
       <DownloadMarkdown name="jb51"></DownloadMarkdown>
diff --git a/component/options/jianshu.tsx b/component/options/jianshu.tsx
index a0359a5..9d05bf9 100644
--- a/component/options/jianshu.tsx
+++ b/component/options/jianshu.tsx
@@ -7,6 +7,7 @@ import DownloadHtml from "~component/items/downloadHtml"
 import DownloadMarkdown from "~component/items/downloadMarkdown"
 import DownloadPdf from "~component/items/downloadPdf"
 import EditMarkdown from "~component/items/editMarkdown"
+import ShowTag from "~component/items/showTag"
 import { i18n } from "~tools"
 
 export default function Jianshu({ forwardRef }) {
@@ -75,6 +76,7 @@ export default function Jianshu({ forwardRef }) {
           className="codebox-switch"
           htmlFor="jianshu-autoOpenCode"></label>
       </div>
+      <ShowTag name="jianshu"></ShowTag>
       <CssCode name="jianshu"></CssCode>
       <EditMarkdown name="jianshu"></EditMarkdown>
       <DownloadMarkdown name="jianshu"></DownloadMarkdown>
diff --git a/component/options/oschina.tsx b/component/options/oschina.tsx
index 2c292d3..e9a40fb 100644
--- a/component/options/oschina.tsx
+++ b/component/options/oschina.tsx
@@ -3,6 +3,7 @@ import DownloadHtml from "~component/items/downloadHtml"
 import DownloadMarkdown from "~component/items/downloadMarkdown"
 import DownloadPdf from "~component/items/downloadPdf"
 import EditMarkdown from "~component/items/editMarkdown"
+import ShowTag from "~component/items/showTag"
 import { i18n } from "~tools"
 
 export default function Oschina() {
@@ -10,6 +11,7 @@ export default function Oschina() {
     <fieldset>
       <legend>{i18n("oschinaConfig")}</legend>
       <CssCode name="oschina"></CssCode>
+      <ShowTag name="oschina"></ShowTag>
       <EditMarkdown name="oschina"></EditMarkdown>
       <DownloadMarkdown name="oschina"></DownloadMarkdown>
       <DownloadHtml name="oschina"></DownloadHtml>
diff --git a/component/options/php.tsx b/component/options/php.tsx
index fcc6626..f7f840c 100644
--- a/component/options/php.tsx
+++ b/component/options/php.tsx
@@ -7,6 +7,7 @@ import DownloadHtml from "~component/items/downloadHtml"
 import DownloadMarkdown from "~component/items/downloadMarkdown"
 import DownloadPdf from "~component/items/downloadPdf"
 import EditMarkdown from "~component/items/editMarkdown"
+import ShowTag from "~component/items/showTag"
 import { i18n } from "~tools"
 
 export default function Php({ forwardRef }) {
@@ -54,11 +55,12 @@ export default function Php({ forwardRef }) {
         />
         <label htmlFor="php-closeLoginModal" className="codebox-switch"></label>
       </div>
-      <CssCode name="php"></CssCode>
-      <EditMarkdown name="php"></EditMarkdown>
-      <DownloadMarkdown name="php"></DownloadMarkdown>
-      <DownloadHtml name="php"></DownloadHtml>
-      <DownloadPdf name="php"></DownloadPdf>
+      <CssCode name="php" />
+      <ShowTag name="php" />
+      <EditMarkdown name="php" />
+      <DownloadMarkdown name="php" />
+      <DownloadHtml name="php" />
+      <DownloadPdf name="php" />
     </fieldset>
   )
 }
diff --git a/component/options/segmentfault.tsx b/component/options/segmentfault.tsx
index 13324a0..14404f0 100644
--- a/component/options/segmentfault.tsx
+++ b/component/options/segmentfault.tsx
@@ -3,17 +3,19 @@ import DownloadHtml from "~component/items/downloadHtml"
 import DownloadMarkdown from "~component/items/downloadMarkdown"
 import DownloadPdf from "~component/items/downloadPdf"
 import EditMarkdown from "~component/items/editMarkdown"
+import ShowTag from "~component/items/showTag"
 import { i18n } from "~tools"
 
 export default function Segmentfault() {
   return (
     <fieldset>
       <legend>{i18n("segmentfaultConfig")}</legend>
-      <CssCode name="segmentfault"></CssCode>
-      <EditMarkdown name="segmentfault"></EditMarkdown>
-      <DownloadMarkdown name="segmentfault"></DownloadMarkdown>
-      <DownloadHtml name="segmentfault"></DownloadHtml>
-      <DownloadPdf name="segmentfault"></DownloadPdf>
+      <CssCode name="segmentfault" />
+      <ShowTag name="segmentfault" />
+      <EditMarkdown name="segmentfault" />
+      <DownloadMarkdown name="segmentfault" />
+      <DownloadHtml name="segmentfault" />
+      <DownloadPdf name="segmentfault" />
     </fieldset>
   )
 }
diff --git a/component/options/weixin.tsx b/component/options/weixin.tsx
index ef47418..2258001 100644
--- a/component/options/weixin.tsx
+++ b/component/options/weixin.tsx
@@ -11,13 +11,13 @@ export default function Weixin() {
   return (
     <fieldset>
       <legend>{i18n("weixinConfig")}</legend>
-      <CssCode name="weixin"></CssCode>
-      <ShowTag name="weixin"></ShowTag>
-      <EditMarkdown name="weixin"></EditMarkdown>
-      <DownloadMarkdown name="weixin"></DownloadMarkdown>
-      <DownloadHtml name="weixin"></DownloadHtml>
-      <DownloadPdf name="weixin"></DownloadPdf>
-      <DownloadImages name="weixin"></DownloadImages>
+      <CssCode name="weixin" />
+      <ShowTag name="weixin" />
+      <EditMarkdown name="weixin" />
+      <DownloadMarkdown name="weixin" />
+      <DownloadHtml name="weixin" />
+      <DownloadPdf name="weixin" />
+      <DownloadImages name="weixin" />
     </fieldset>
   )
 }
diff --git a/component/options/zhihu.tsx b/component/options/zhihu.tsx
index 653179d..c8ea914 100644
--- a/component/options/zhihu.tsx
+++ b/component/options/zhihu.tsx
@@ -7,6 +7,7 @@ import DownloadHtml from "~component/items/downloadHtml"
 import DownloadMarkdown from "~component/items/downloadMarkdown"
 import DownloadPdf from "~component/items/downloadPdf"
 import EditMarkdown from "~component/items/editMarkdown"
+import ShowTag from "~component/items/showTag"
 import { i18n } from "~tools"
 
 export default function Zhihu({ forwardRef }) {
@@ -73,11 +74,12 @@ export default function Zhihu({ forwardRef }) {
         />
         <label className="codebox-switch" htmlFor="zhihu-autoOpenCode"></label>
       </div>
-      <CssCode name="zhihu"></CssCode>
-      <EditMarkdown name="zhihu"></EditMarkdown>
-      <DownloadMarkdown name="zhihu"></DownloadMarkdown>
-      <DownloadHtml name="zhihu"></DownloadHtml>
-      <DownloadPdf name="zhihu"></DownloadPdf>
+      <CssCode name="zhihu" />
+      <ShowTag name="zhihu" />
+      <EditMarkdown name="zhihu" />
+      <DownloadMarkdown name="zhihu" />
+      <DownloadHtml name="zhihu" />
+      <DownloadPdf name="zhihu" />
     </fieldset>
   )
 }
diff --git a/component/tagBtn/style.ts b/component/tagBtn/style.ts
new file mode 100644
index 0000000..6c00020
--- /dev/null
+++ b/component/tagBtn/style.ts
@@ -0,0 +1,25 @@
+export default function TagBtnStyle() {
+  const style = document.createElement("style")
+  style.textContent = `
+  .codebox-tagBtn {
+    height: 28px;
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    color: #1e80ff;
+    width: 100px;
+    background: #fff;
+    border-radius: 5px;
+    justify-content: space-between;
+    padding: 0 8px;
+    margin-top: -20px;
+    font-size: 14px;
+  }
+  .codebox-tagBtn .btn:hover {
+    color: #fff;
+    background: #1e80ff;
+    border-radius: 3px;
+  }
+  `
+  return style
+}
diff --git a/contents/51cto.tsx b/contents/51cto.tsx
index d003f90..59f15fd 100644
--- a/contents/51cto.tsx
+++ b/contents/51cto.tsx
@@ -11,6 +11,7 @@ import { v4 as uuidv4 } from "uuid"
 import { useMessage } from "@plasmohq/messaging/hook"
 import { useStorage } from "@plasmohq/storage/hook"
 
+import TagBtnStyle from "~component/tagBtn/style"
 import { addCss, i18n, saveHtml, saveMarkdown } from "~tools"
 import useCssCodeHook from "~utils/cssCodeHook"
 import { useContent } from "~utils/editMarkdownHook"
@@ -32,26 +33,7 @@ export const getShadowHostId: PlasmoGetShadowHostId = () => HOST_ID
 export const getOverlayAnchor: PlasmoGetOverlayAnchor = async () =>
   document.querySelector("article .title")
 
-export const getStyle: PlasmoGetStyle = () => {
-  const style = document.createElement("style")
-  style.textContent = `
-  .codebox-tagBtn {
-    height: 28px;
-    display: flex;
-    cursor: pointer;
-    align-items: center;
-    color: #1e80ff;
-    width: 90px;
-    background: #fff;
-    border-radius: 5px;
-    justify-content: space-between;
-    padding: 0 8px;
-    margin-top: -20px;
-    font-size: 14px;
-  }
-  `
-  return style
-}
+export const getStyle: PlasmoGetStyle = () => TagBtnStyle()
 
 const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
   const [showTag, setShowTag] = useStorage<boolean>("51cto-showTag", true)
@@ -278,9 +260,15 @@ const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
 
   return showTag ? (
     <div className="codebox-tagBtn">
-      <div onClick={handleEdit}>{i18n("edit")}</div>
-      <div onClick={handleDownload}>{i18n("download")}</div>
-      <div onClick={handlePrint}>{i18n("print")}</div>
+      <div className="btn" onClick={handleEdit}>
+        {i18n("edit")}
+      </div>
+      <div className="btn" onClick={handleDownload}>
+        {i18n("download")}
+      </div>
+      <div className="btn" onClick={handlePrint}>
+        {i18n("print")}
+      </div>
     </div>
   ) : (
     <></>
diff --git a/contents/cnblogs.tsx b/contents/cnblogs.tsx
index f698d55..7f5e186 100644
--- a/contents/cnblogs.tsx
+++ b/contents/cnblogs.tsx
@@ -11,6 +11,7 @@ import { v4 as uuidv4 } from "uuid"
 import { useMessage } from "@plasmohq/messaging/hook"
 import { useStorage } from "@plasmohq/storage/hook"
 
+import TagBtnStyle from "~component/tagBtn/style"
 import { i18n, saveHtml, saveMarkdown } from "~tools"
 import useCssCodeHook from "~utils/cssCodeHook"
 import { useContent } from "~utils/editMarkdownHook"
@@ -33,26 +34,7 @@ export const getShadowHostId: PlasmoGetShadowHostId = () => HOST_ID
 export const getOverlayAnchor: PlasmoGetOverlayAnchor = async () =>
   document.querySelector("#post_detail .postTitle")
 
-export const getStyle: PlasmoGetStyle = () => {
-  const style = document.createElement("style")
-  style.textContent = `
-  .codebox-tagBtn {
-    height: 28px;
-    display: flex;
-    cursor: pointer;
-    align-items: center;
-    color: #1e80ff;
-    width: 90px;
-    background: #fff;
-    border-radius: 5px;
-    justify-content: space-between;
-    padding: 0 8px;
-    margin-top: -20px;
-    font-size: 14px;
-  }
-  `
-  return style
-}
+export const getStyle: PlasmoGetStyle = () => TagBtnStyle()
 
 const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
   const [showTag, setShowTag] = useStorage<boolean>("cnblogs-showTag", true)
@@ -160,7 +142,7 @@ const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
   }
 
   function downloadPdf() {
-    var article = document.querySelector<HTMLElement>("#post_detail .post")
+    const article = document.querySelector<HTMLElement>("#post_detail .post")
     if (article) {
       Print.print(article, { title: articleTitle })
         .then(() => console.log("Printing complete"))
diff --git a/contents/csdn.tsx b/contents/csdn.tsx
index 8d7721a..d46f29c 100644
--- a/contents/csdn.tsx
+++ b/contents/csdn.tsx
@@ -11,10 +11,12 @@ import { v4 as uuidv4 } from "uuid"
 import { useMessage } from "@plasmohq/messaging/hook"
 import { useStorage } from "@plasmohq/storage/hook"
 
+import TagBtnStyle from "~component/tagBtn/style"
 import { addCss, i18n, saveHtml, saveMarkdown } from "~tools"
 import useCssCodeHook from "~utils/cssCodeHook"
 import { savePdf } from "~utils/downloadPdf"
 import { useContent } from "~utils/editMarkdownHook"
+import { Print } from "~utils/print"
 import Turndown from "~utils/turndown"
 
 export const config: PlasmoCSConfig = {
@@ -31,29 +33,10 @@ export const getOverlayAnchor: PlasmoGetOverlayAnchor = async () =>
   document.querySelector(".blog-content-box .title-article") ||
   document.querySelector(".article-detail .title")
 
-export const getStyle: PlasmoGetStyle = () => {
-  const style = document.createElement("style")
-  style.textContent = `
-  .codebox-tagBtn {
-    height: 28px;
-    display: flex;
-    cursor: pointer;
-    align-items: center;
-    color: #1e80ff;
-    width: 60px;
-    background: #fff;
-    border-radius: 5px;
-    justify-content: space-between;
-    padding: 0 8px;
-    margin-top: -20px;
-    font-size: 14px;
-  }
-  `
-  return style
-}
+export const getStyle: PlasmoGetStyle = () => TagBtnStyle()
 
 const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
-  const [showTag, setShowTag] = useStorage<boolean>("csdn-showTag")
+  const [showTag, setShowTag] = useStorage<boolean>("csdn-showTag", true)
   const [cssCode, runCss] = useCssCodeHook("csdn")
   const [closeAds] = useStorage<boolean>("csdn-closeAds")
   const [copyCode] = useStorage<boolean>("csdn-copyCode")
@@ -285,6 +268,15 @@ const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
     })
   }
 
+  function downloadPdf() {
+    const article = document.querySelector<HTMLElement>(".blog-content-box")
+    if (article) {
+      Print.print(article, { title: articleTitle })
+        .then(() => console.log("Printing complete"))
+        .catch((error) => console.error("Printing failed:", error))
+    }
+  }
+
   function editMarkdown() {
     const dom = document.querySelector(".blog-content-box")
     setContent(dom)
@@ -302,13 +294,15 @@ const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
   }
 
   function handleEdit() {
-    setContent(".blog-content-box")
+    editMarkdown()
   }
 
   function handleDownload() {
-    const html = document.querySelector(".blog-content-box")
-    const markdown = turndownService.turndown(html)
-    saveMarkdown(markdown, articleTitle)
+    downloadMarkdown()
+  }
+
+  function handlePrint() {
+    downloadPdf()
   }
 
   function closeTag() {
@@ -319,6 +313,7 @@ const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
     <div className="codebox-tagBtn">
       <div onClick={handleEdit}>{i18n("edit")}</div>
       <div onClick={handleDownload}>{i18n("download")}</div>
+      <div onClick={handlePrint}>{i18n("print")}</div>
     </div>
   ) : (
     <></>
diff --git a/contents/jb51.tsx b/contents/jb51.tsx
index 99b677c..0faff91 100644
--- a/contents/jb51.tsx
+++ b/contents/jb51.tsx
@@ -1,14 +1,22 @@
-import type { PlasmoCSConfig } from "plasmo"
-import { useEffect } from "react"
+import type {
+  PlasmoCSConfig,
+  PlasmoCSUIProps,
+  PlasmoGetOverlayAnchor,
+  PlasmoGetShadowHostId,
+  PlasmoGetStyle
+} from "plasmo"
+import { useEffect, type FC } from "react"
 import { v4 as uuidv4 } from "uuid"
 
 import { useMessage } from "@plasmohq/messaging/hook"
 import { useStorage } from "@plasmohq/storage/hook"
 
-import { addCss, saveHtml, saveMarkdown } from "~tools"
+import TagBtnStyle from "~component/tagBtn/style"
+import { addCss, i18n, saveHtml, saveMarkdown } from "~tools"
 import useCssCodeHook from "~utils/cssCodeHook"
 import { savePdf } from "~utils/downloadPdf"
 import { useContent } from "~utils/editMarkdownHook"
+import { Print } from "~utils/print"
 import Turndown from "~utils/turndown"
 
 export const config: PlasmoCSConfig = {
@@ -20,7 +28,16 @@ const articleTitle = document
   .querySelector<HTMLElement>("head title")
   .innerText.trim()
 
-export default function jb51() {
+const HOST_ID = "codebox-jb51"
+export const getShadowHostId: PlasmoGetShadowHostId = () => HOST_ID
+
+export const getOverlayAnchor: PlasmoGetOverlayAnchor = async () =>
+  document.querySelector("#article .title")
+
+export const getStyle: PlasmoGetStyle = () => TagBtnStyle()
+
+const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
+  const [showTag, setShowTag] = useStorage<boolean>("jb51-showTag", true)
   const [cssCode, runCss] = useCssCodeHook("jb51")
   const [closeAds] = useStorage<boolean>("jb51-closeAds")
   const [copyCode] = useStorage<boolean>("jb51-copyCode")
@@ -48,8 +65,7 @@ export default function jb51() {
       downloadHtml()
     }
     if (req.name == "jb51-downloadPdf") {
-      var article = document.querySelector<HTMLElement>("#article")
-      savePdf(article, articleTitle)
+      downloadPdf()
     }
   })
 
@@ -206,6 +222,15 @@ export default function jb51() {
     }`)
   }
 
+  function downloadPdf() {
+    const article = document.querySelector<HTMLElement>("#article")
+    if (article) {
+      Print.print(article, { title: articleTitle })
+        .then(() => console.log("Printing complete"))
+        .catch((error) => console.error("Printing failed:", error))
+    }
+  }
+
   function editMarkdown() {
     const dom = document.querySelector("#article")
     setContent(dom)
@@ -222,5 +247,31 @@ export default function jb51() {
     saveHtml(dom, articleTitle)
   }
 
-  return <div style={{ display: "none" }}></div>
+  function handleEdit() {
+    editMarkdown()
+  }
+
+  function handleDownload() {
+    downloadMarkdown()
+  }
+
+  function handlePrint() {
+    downloadPdf()
+  }
+
+  function closeTag() {
+    setShowTag(false)
+  }
+
+  return showTag ? (
+    <div className="codebox-tagBtn">
+      <div onClick={handleEdit}>{i18n("edit")}</div>
+      <div onClick={handleDownload}>{i18n("download")}</div>
+      <div onClick={handlePrint}>{i18n("print")}</div>
+    </div>
+  ) : (
+    <></>
+  )
 }
+
+export default PlasmoOverlay
diff --git a/contents/jianshu.tsx b/contents/jianshu.tsx
index f08c874..94a3fff 100644
--- a/contents/jianshu.tsx
+++ b/contents/jianshu.tsx
@@ -1,14 +1,22 @@
-import type { PlasmoCSConfig } from "plasmo"
-import { useEffect, useRef } from "react"
+import type {
+  PlasmoCSConfig,
+  PlasmoCSUIProps,
+  PlasmoGetOverlayAnchor,
+  PlasmoGetShadowHostId,
+  PlasmoGetStyle
+} from "plasmo"
+import { useEffect, useRef, type FC } from "react"
 import { v4 as uuidv4 } from "uuid"
 
 import { useMessage } from "@plasmohq/messaging/hook"
 import { useStorage } from "@plasmohq/storage/hook"
 
-import { addCss, saveHtml, saveMarkdown } from "~tools"
+import TagBtnStyle from "~component/tagBtn/style"
+import { addCss, i18n, saveHtml, saveMarkdown } from "~tools"
 import useCssCodeHook from "~utils/cssCodeHook"
 import { savePdf } from "~utils/downloadPdf"
 import { useContent } from "~utils/editMarkdownHook"
+import { Print } from "~utils/print"
 import Turndown from "~utils/turndown"
 
 export const config: PlasmoCSConfig = {
@@ -20,7 +28,16 @@ const articleTitle = document
   .querySelector<HTMLElement>("head title")
   .innerText.trim()
 
-export default function Jianshu() {
+const HOST_ID = "codebox-jianshu"
+export const getShadowHostId: PlasmoGetShadowHostId = () => HOST_ID
+
+export const getOverlayAnchor: PlasmoGetOverlayAnchor = async () =>
+  document.querySelector("section.ouvJEz h1")
+
+export const getStyle: PlasmoGetStyle = () => TagBtnStyle()
+
+const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
+  const [showTag, setShowTag] = useStorage<boolean>("jianshu-showTag", true)
   const [cssCode, runCss] = useCssCodeHook("jianshu")
   const [closeLoginModal] = useStorage<boolean>("jianshu-closeLoginModal")
   const [copyCode] = useStorage<boolean>("jianshu-copyCode")
@@ -51,8 +68,7 @@ export default function Jianshu() {
       downloadHtml()
     }
     if (req.name == "jianshu-downloadPdf") {
-      var article = document.querySelector<HTMLElement>("section.ouvJEz")
-      savePdf(article, articleTitle)
+      downloadPdf()
     }
   })
 
@@ -156,6 +172,15 @@ export default function Jianshu() {
     }
   }
 
+  function downloadPdf() {
+    const article = document.querySelector<HTMLElement>("section.ouvJEz")
+    if (article) {
+      Print.print(article, { title: articleTitle })
+        .then(() => console.log("Printing complete"))
+        .catch((error) => console.error("Printing failed:", error))
+    }
+  }
+
   function editMarkdown() {
     const dom = document.querySelector("section.ouvJEz")
     setContent(dom)
@@ -172,5 +197,31 @@ export default function Jianshu() {
     saveHtml(dom, articleTitle)
   }
 
-  return <div style={{ display: "none" }}></div>
+  function handleEdit() {
+    editMarkdown()
+  }
+
+  function handleDownload() {
+    downloadMarkdown()
+  }
+
+  function handlePrint() {
+    downloadPdf()
+  }
+
+  function closeTag() {
+    setShowTag(false)
+  }
+
+  return showTag ? (
+    <div className="codebox-tagBtn">
+      <div onClick={handleEdit}>{i18n("edit")}</div>
+      <div onClick={handleDownload}>{i18n("download")}</div>
+      <div onClick={handlePrint}>{i18n("print")}</div>
+    </div>
+  ) : (
+    <></>
+  )
 }
+
+export default PlasmoOverlay
diff --git a/contents/juejin.tsx b/contents/juejin.tsx
index 229f1f0..992541b 100644
--- a/contents/juejin.tsx
+++ b/contents/juejin.tsx
@@ -10,10 +10,11 @@ import { useEffect, useRef, type FC } from "react"
 import { useMessage } from "@plasmohq/messaging/hook"
 import { useStorage } from "@plasmohq/storage/dist/hook"
 
+import TagBtnStyle from "~component/tagBtn/style"
 import { i18n, saveHtml, saveMarkdown } from "~tools"
 import useCssCodeHook from "~utils/cssCodeHook"
-import { savePdf } from "~utils/downloadPdf"
 import { useContent } from "~utils/editMarkdownHook"
+import { Print } from "~utils/print"
 import Turndown from "~utils/turndown"
 
 export const config: PlasmoCSConfig = {
@@ -60,29 +61,10 @@ export const getShadowHostId: PlasmoGetShadowHostId = () => HOST_ID
 export const getOverlayAnchor: PlasmoGetOverlayAnchor = async () =>
   document.querySelector("article.article .article-title")
 
-export const getStyle: PlasmoGetStyle = () => {
-  const style = document.createElement("style")
-  style.textContent = `
-  .codebox-tagBtn {
-    height: 28px;
-    display: flex;
-    cursor: pointer;
-    align-items: center;
-    color: #1e80ff;
-    width: 60px;
-    background: #fff;
-    border-radius: 5px;
-    justify-content: space-between;
-    padding: 0 8px;
-    margin-top: -30px;
-    font-size: 14px;
-  }
-  `
-  return style
-}
+export const getStyle: PlasmoGetStyle = () => TagBtnStyle()
 
 const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
-  const [showTag, setShowTag] = useStorage<boolean>("juejin-showTag")
+  const [showTag, setShowTag] = useStorage<boolean>("juejin-showTag", true)
   const [cssCode, runCss] = useCssCodeHook("juejin")
   const [content, setContent] = useContent()
 
@@ -100,11 +82,19 @@ const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
       downloadHtml()
     }
     if (req.name == "juejin-downloadPdf") {
-      var article = document.querySelector<HTMLElement>("article.article")
-      savePdf(article, articleTitle)
+      downloadPdf()
     }
   })
 
+  function downloadPdf() {
+    const article = document.querySelector<HTMLElement>("article.article")
+    if (article) {
+      Print.print(article, { title: articleTitle })
+        .then(() => console.log("Printing complete"))
+        .catch((error) => console.error("Printing failed:", error))
+    }
+  }
+
   function editMarkdown() {
     const dom = document.querySelector("article.article")
     setContent(dom)
@@ -122,13 +112,15 @@ const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
   }
 
   function handleEdit() {
-    setContent("article.article")
+    editMarkdown()
   }
 
   function handleDownload() {
-    const html = document.querySelector("article.article")
-    const markdown = turndownService.turndown(html)
-    saveMarkdown(markdown, articleTitle)
+    downloadMarkdown()
+  }
+
+  function handlePrint() {
+    downloadPdf()
   }
 
   function closeTag() {
@@ -139,6 +131,7 @@ const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
     <div className="codebox-tagBtn">
       <div onClick={handleEdit}>{i18n("edit")}</div>
       <div onClick={handleDownload}>{i18n("download")}</div>
+      <div onClick={handlePrint}>{i18n("print")}</div>
     </div>
   ) : (
     <></>
diff --git a/contents/medium.tsx b/contents/medium.tsx
index b9eeefb..2b07349 100644
--- a/contents/medium.tsx
+++ b/contents/medium.tsx
@@ -10,10 +10,12 @@ import { useEffect, useRef, type FC } from "react"
 import { useMessage } from "@plasmohq/messaging/hook"
 import { useStorage } from "@plasmohq/storage/dist/hook"
 
+import TagBtnStyle from "~component/tagBtn/style"
 import { i18n, saveHtml, saveMarkdown } from "~tools"
 import useCssCodeHook from "~utils/cssCodeHook"
 import { savePdf } from "~utils/downloadPdf"
 import { useContent } from "~utils/editMarkdownHook"
+import { Print } from "~utils/print"
 import Turndown from "~utils/turndown"
 
 export const config: PlasmoCSConfig = {
@@ -101,29 +103,10 @@ export const getShadowHostId: PlasmoGetShadowHostId = () => HOST_ID
 export const getOverlayAnchor: PlasmoGetOverlayAnchor = async () =>
   document.querySelector("article .pw-post-title")
 
-export const getStyle: PlasmoGetStyle = () => {
-  const style = document.createElement("style")
-  style.textContent = `
-  .codebox-tagBtn {
-    height: 28px;
-    display: flex;
-    cursor: pointer;
-    align-items: center;
-    color: #1e80ff;
-    width: 60px;
-    background: #fff;
-    border-radius: 5px;
-    justify-content: space-between;
-    padding: 0 8px;
-    margin-top: -30px;
-    font-size: 14px;
-  }
-  `
-  return style
-}
+export const getStyle: PlasmoGetStyle = () => TagBtnStyle()
 
 const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
-  const [showTag, setShowTag] = useStorage<boolean>("medium-showTag")
+  const [showTag, setShowTag] = useStorage<boolean>("medium-showTag", true)
   const [cssCode, runCss] = useCssCodeHook("medium")
   const [content, setContent] = useContent(turndownOption)
 
@@ -141,11 +124,19 @@ const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
       downloadHtml()
     }
     if (req.name == "medium-downloadPdf") {
-      var article = document.querySelector<HTMLElement>("article.article")
-      savePdf(article, articleTitle)
+      downloadPdf()
     }
   })
 
+  function downloadPdf() {
+    const article = document.querySelector<HTMLElement>("article")
+    if (article) {
+      Print.print(article, { title: articleTitle })
+        .then(() => console.log("Printing complete"))
+        .catch((error) => console.error("Printing failed:", error))
+    }
+  }
+
   function editMarkdown() {
     const dom = document.querySelector("article")
     setContent(dom)
@@ -163,13 +154,15 @@ const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
   }
 
   function handleEdit() {
-    setContent("article")
+    editMarkdown()
   }
 
   function handleDownload() {
-    const html = document.querySelector("article")
-    const markdown = turndownService.turndown(html)
-    saveMarkdown(markdown, articleTitle)
+    downloadMarkdown()
+  }
+
+  function handlePrint() {
+    downloadPdf()
   }
 
   function closeTag() {
@@ -180,6 +173,7 @@ const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
     <div className="codebox-tagBtn">
       <div onClick={handleEdit}>{i18n("edit")}</div>
       <div onClick={handleDownload}>{i18n("download")}</div>
+      <div onClick={handlePrint}>{i18n("print")}</div>
     </div>
   ) : (
     <></>
diff --git a/contents/oschina.tsx b/contents/oschina.tsx
index ea83f76..cd9170b 100644
--- a/contents/oschina.tsx
+++ b/contents/oschina.tsx
@@ -1,11 +1,21 @@
-import type { PlasmoCSConfig } from "plasmo"
+import type {
+  PlasmoCSConfig,
+  PlasmoCSUIProps,
+  PlasmoGetOverlayAnchor,
+  PlasmoGetShadowHostId,
+  PlasmoGetStyle
+} from "plasmo"
+import type { FC } from "react"
 
 import { useMessage } from "@plasmohq/messaging/hook"
+import { useStorage } from "@plasmohq/storage/dist/hook"
 
-import { saveHtml, saveMarkdown } from "~tools"
+import TagBtnStyle from "~component/tagBtn/style"
+import { i18n, saveHtml, saveMarkdown } from "~tools"
 import useCssCodeHook from "~utils/cssCodeHook"
 import { savePdf } from "~utils/downloadPdf"
 import { useContent } from "~utils/editMarkdownHook"
+import { Print } from "~utils/print"
 import Turndown from "~utils/turndown"
 
 export const config: PlasmoCSConfig = {
@@ -17,7 +27,16 @@ const articleTitle = document
   .querySelector<HTMLElement>("head title")
   .innerText.trim()
 
-export default function Oschina() {
+const HOST_ID = "codebox-oschina"
+export const getShadowHostId: PlasmoGetShadowHostId = () => HOST_ID
+
+export const getOverlayAnchor: PlasmoGetOverlayAnchor = async () =>
+  document.querySelector(".article-box .article-box__title")
+
+export const getStyle: PlasmoGetStyle = () => TagBtnStyle()
+
+const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
+  const [showTag, setShowTag] = useStorage<boolean>("oschina-showTag", true)
   const [cssCode, runCss] = useCssCodeHook("oschina")
   const [content, setContent] = useContent()
 
@@ -35,11 +54,19 @@ export default function Oschina() {
       downloadHtml()
     }
     if (req.name == "oschina-downloadPdf") {
-      var article = document.querySelector<HTMLElement>(".article-box")
-      savePdf(article, articleTitle)
+      downloadPdf()
     }
   })
 
+  function downloadPdf() {
+    const article = document.querySelector<HTMLElement>(".article-box")
+    if (article) {
+      Print.print(article, { title: articleTitle })
+        .then(() => console.log("Printing complete"))
+        .catch((error) => console.error("Printing failed:", error))
+    }
+  }
+
   function editMarkdown() {
     const dom = document.querySelector(".article-box")
     setContent(dom)
@@ -56,5 +83,31 @@ export default function Oschina() {
     saveHtml(dom, articleTitle)
   }
 
-  return <div style={{ display: "none" }}></div>
+  function handleEdit() {
+    editMarkdown()
+  }
+
+  function handleDownload() {
+    downloadMarkdown()
+  }
+
+  function handlePrint() {
+    downloadPdf()
+  }
+
+  function closeTag() {
+    setShowTag(false)
+  }
+
+  return showTag ? (
+    <div className="codebox-tagBtn">
+      <div onClick={handleEdit}>{i18n("edit")}</div>
+      <div onClick={handleDownload}>{i18n("download")}</div>
+      <div onClick={handlePrint}>{i18n("print")}</div>
+    </div>
+  ) : (
+    <></>
+  )
 }
+
+export default PlasmoOverlay
diff --git a/contents/php.tsx b/contents/php.tsx
index 829c1aa..779b365 100644
--- a/contents/php.tsx
+++ b/contents/php.tsx
@@ -2,7 +2,10 @@ import { Button } from "antd"
 import type {
   PlasmoCSConfig,
   PlasmoCSUIProps,
-  PlasmoGetInlineAnchorList
+  PlasmoGetInlineAnchorList,
+  PlasmoGetOverlayAnchor,
+  PlasmoGetShadowHostId,
+  PlasmoGetStyle
 } from "plasmo"
 import { useEffect, useState, type FC } from "react"
 import { v4 as uuidv4 } from "uuid"
@@ -10,10 +13,12 @@ import { v4 as uuidv4 } from "uuid"
 import { useMessage } from "@plasmohq/messaging/hook"
 import { useStorage } from "@plasmohq/storage/hook"
 
-import { addCss, removeCss, saveHtml, saveMarkdown } from "~tools"
+import TagBtnStyle from "~component/tagBtn/style"
+import { addCss, i18n, removeCss, saveHtml, saveMarkdown } from "~tools"
 import useCssCodeHook from "~utils/cssCodeHook"
 import { savePdf } from "~utils/downloadPdf"
 import { useContent } from "~utils/editMarkdownHook"
+import { Print } from "~utils/print"
 import Turndown from "~utils/turndown"
 
 export const config: PlasmoCSConfig = {
@@ -25,59 +30,22 @@ const articleTitle = document
   .querySelector<HTMLElement>("head title")
   .innerText.trim()
 
-export const getInlineAnchorList: PlasmoGetInlineAnchorList = async () => {
-  const preList = document.querySelectorAll("pre")
+const HOST_ID = "codebox-php"
+export const getShadowHostId: PlasmoGetShadowHostId = () => HOST_ID
 
-  const anchors = []
-  Array.from(preList).map((pre) => {
-    const classList = pre.classList
-    if (pre.textContent && !classList.contains("CodeMirror-line"))
-      anchors.push(pre)
-  })
+export const getOverlayAnchor: PlasmoGetOverlayAnchor = async () =>
+  document.querySelector(".wzContent .wzctTitle")
 
-  return anchors.map((element) => ({
-    element,
-    insertPosition: "afterbegin"
-    // insertPosition: "beforebegin"
-  }))
-}
+export const getStyle: PlasmoGetStyle = () => TagBtnStyle()
 
 const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
+  const [showTag, setShowTag] = useStorage<boolean>("php-showTag", true)
   const [cssCode, runCss] = useCssCodeHook("php")
   const [copyCode] = useStorage("php-copyCode", true)
   const [closeLoginModal] = useStorage<boolean>("php-closeLoginModal")
   const [history, setHistory] = useStorage<any[]>("codebox-history")
   const [closeLog] = useStorage("config-closeLog", true)
   const [content, setContent] = useContent()
-  const [isCopy, setIsCopy] = useState(false)
-
-  const element = anchor.element
-  const style = window.getComputedStyle(element)
-  const marginTop = style.getPropertyValue("margin-top")
-
-  const onCopy = async () => {
-    try {
-      const target = anchor.element as HTMLElement
-      const preBlock = target.closest("pre")
-      const codeBlock = target.querySelector("code")
-      let textContent = ""
-
-      if (codeBlock) {
-        textContent = codeBlock.textContent
-      } else {
-        textContent = preBlock && preBlock.textContent
-      }
-
-      navigator.clipboard.writeText(textContent)
-
-      setIsCopy(true)
-      setTimeout(() => {
-        setIsCopy(false)
-      }, 1000)
-    } catch (error) {
-      console.log(error)
-    }
-  }
 
   useEffect(() => {
     closeLog || console.log("PHP status", { closeLoginModal })
@@ -98,14 +66,22 @@ const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
     if (req.name == "php-downloadHtml") {
       downloadHtml()
     }
-    if (req.name == "php-downloadPdf") {
-      var article = document.querySelector<HTMLElement>(
-        ".phpscMain .php-article"
-      )
-      savePdf(article, articleTitle)
+    if (req.name == "oschina-downloadPdf") {
+      downloadPdf()
     }
   })
 
+  function downloadPdf() {
+    const article = document.querySelector<HTMLElement>(
+      ".phpscMain .php-article"
+    )
+    if (article) {
+      Print.print(article, { title: articleTitle })
+        .then(() => console.log("Printing complete"))
+        .catch((error) => console.error("Printing failed:", error))
+    }
+  }
+
   /* 未登录复制代码 */
   function copyCodeCssFunc(copyCode) {
     copyCode
@@ -161,25 +137,30 @@ const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
     saveHtml(dom, articleTitle)
   }
 
-  return (
-    <>
-      {copyCode ? (
-        <div
-          className="codebox-copyCodeHeader"
-          style={{ marginBottom: "-" + marginTop }}>
-          <span className="codebox-copyCodeLogo"></span>
-          <Button
-            color="primary"
-            variant="filled"
-            onClick={onCopy}
-            className="codebox-copyCodeBtn">
-            {isCopy ? "复制成功" : "复制"}
-          </Button>
-        </div>
-      ) : (
-        <></>
-      )}
-    </>
+  function handleEdit() {
+    editMarkdown()
+  }
+
+  function handleDownload() {
+    downloadMarkdown()
+  }
+
+  function handlePrint() {
+    downloadPdf()
+  }
+
+  function closeTag() {
+    setShowTag(false)
+  }
+
+  return showTag ? (
+    <div className="codebox-tagBtn">
+      <div onClick={handleEdit}>{i18n("edit")}</div>
+      <div onClick={handleDownload}>{i18n("download")}</div>
+      <div onClick={handlePrint}>{i18n("print")}</div>
+    </div>
+  ) : (
+    <></>
   )
 }
 
diff --git a/contents/segmentfault.tsx b/contents/segmentfault.tsx
index df70737..f24f44e 100644
--- a/contents/segmentfault.tsx
+++ b/contents/segmentfault.tsx
@@ -1,15 +1,24 @@
-import type { PlasmoCSConfig } from "plasmo"
+import type {
+  PlasmoCSConfig,
+  PlasmoCSUIProps,
+  PlasmoGetOverlayAnchor,
+  PlasmoGetShadowHostId,
+  PlasmoGetStyle
+} from "plasmo"
+import type { FC } from "react"
 
 import { useMessage } from "@plasmohq/messaging/hook"
+import { useStorage } from "@plasmohq/storage/dist/hook"
 
-import { saveHtml, saveMarkdown } from "~tools"
+import TagBtnStyle from "~component/tagBtn/style"
+import { i18n, saveHtml, saveMarkdown } from "~tools"
 import useCssCodeHook from "~utils/cssCodeHook"
-import { savePdf } from "~utils/downloadPdf"
 import { useContent } from "~utils/editMarkdownHook"
+import { Print } from "~utils/print"
 import Turndown from "~utils/turndown"
 
 export const config: PlasmoCSConfig = {
-  matches: ["https://*.segmentfault.com/*"]
+  matches: ["https://*.segmentfault.com/**"]
 }
 
 const turndownService = Turndown()
@@ -17,7 +26,19 @@ const articleTitle = document
   .querySelector<HTMLElement>("head title")
   .innerText.trim()
 
-export default function Segmentfault() {
+const HOST_ID = "codebox-segmentfault"
+export const getShadowHostId: PlasmoGetShadowHostId = () => HOST_ID
+
+export const getOverlayAnchor: PlasmoGetOverlayAnchor = async () =>
+  document.querySelector(".container .h2")
+
+export const getStyle: PlasmoGetStyle = () => TagBtnStyle()
+
+const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
+  const [showTag, setShowTag] = useStorage<boolean>(
+    "segmentfault-showTag",
+    true
+  )
   const [cssCode, runCss] = useCssCodeHook("segmentfault")
   const [content, setContent] = useContent()
 
@@ -35,26 +56,60 @@ export default function Segmentfault() {
       downloadHtml()
     }
     if (req.name == "segmentfault-downloadPdf") {
-      var article = document.querySelector<HTMLElement>("article.article")
-      savePdf(article, articleTitle)
+      downloadPdf()
     }
   })
 
+  function downloadPdf() {
+    const article = document.querySelector<HTMLElement>(".container")
+    if (article) {
+      Print.print(article, { title: articleTitle })
+        .then(() => console.log("Printing complete"))
+        .catch((error) => console.error("Printing failed:", error))
+    }
+  }
+
   function editMarkdown() {
-    const dom = document.querySelector("article.article")
+    const dom = document.querySelector(".container")
     setContent(dom)
   }
 
   function downloadMarkdown() {
-    const html = document.querySelector("article.article")
+    const html = document.querySelector(".container")
     const markdown = turndownService.turndown(html)
     saveMarkdown(markdown, articleTitle)
   }
 
   function downloadHtml() {
-    const dom = document.querySelector("article.article")
+    const dom = document.querySelector(".container")
     saveHtml(dom, articleTitle)
   }
 
-  return <div style={{ display: "none" }}></div>
+  function handleEdit() {
+    editMarkdown()
+  }
+
+  function handleDownload() {
+    downloadMarkdown()
+  }
+
+  function handlePrint() {
+    downloadPdf()
+  }
+
+  function closeTag() {
+    setShowTag(false)
+  }
+
+  return showTag ? (
+    <div className="codebox-tagBtn">
+      <div onClick={handleEdit}>{i18n("edit")}</div>
+      <div onClick={handleDownload}>{i18n("download")}</div>
+      <div onClick={handlePrint}>{i18n("print")}</div>
+    </div>
+  ) : (
+    <></>
+  )
 }
+
+export default PlasmoOverlay
diff --git a/contents/weixin.tsx b/contents/weixin.tsx
index 1989cce..bb0e168 100644
--- a/contents/weixin.tsx
+++ b/contents/weixin.tsx
@@ -12,6 +12,7 @@ import { useEffect, type FC } from "react"
 import { useMessage } from "@plasmohq/messaging/hook"
 import { useStorage } from "@plasmohq/storage/dist/hook"
 
+import TagBtnStyle from "~component/tagBtn/style"
 import { i18n, saveHtml, saveMarkdown } from "~tools"
 import useCssCodeHook from "~utils/cssCodeHook"
 import { useContent } from "~utils/editMarkdownHook"
@@ -33,26 +34,7 @@ export const getShadowHostId: PlasmoGetShadowHostId = () => HOST_ID
 export const getOverlayAnchor: PlasmoGetOverlayAnchor = async () =>
   document.querySelector("#img-content .rich_media_title")
 
-export const getStyle: PlasmoGetStyle = () => {
-  const style = document.createElement("style")
-  style.textContent = `
-  .codebox-tagBtn {
-    height: 28px;
-    display: flex;
-    cursor: pointer;
-    align-items: center;
-    color: #1e80ff;
-    width: 90px;
-    background: transparent;
-    border-radius: 5px;
-    justify-content: space-between;
-    padding: 0 8px;
-    margin-top: -20px;
-    font-size: 14px;
-  }
-  `
-  return style
-}
+export const getStyle: PlasmoGetStyle = () => TagBtnStyle()
 
 const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
   const [showTag, setShowTag] = useStorage<boolean>("weixin-showTag", true)
@@ -140,7 +122,7 @@ const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
   }
 
   function downloadPdf() {
-    var article = document.querySelector<HTMLElement>("#img-content")
+    const article = document.querySelector<HTMLElement>("#img-content")
     if (article) {
       Print.print(article, { title: articleTitle })
         .then(() => console.log("Printing complete"))
@@ -165,13 +147,11 @@ const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
   }
 
   function handleEdit() {
-    setContent("#img-content")
+    editMarkdown()
   }
 
   function handleDownload() {
-    const html = document.querySelector("#img-content")
-    const markdown = turndownService.turndown(html)
-    saveMarkdown(markdown, articleTitle)
+    downloadMarkdown()
   }
 
   function handlePrint() {
diff --git a/contents/zhihu.tsx b/contents/zhihu.tsx
index ef3662f..fdaf587 100644
--- a/contents/zhihu.tsx
+++ b/contents/zhihu.tsx
@@ -1,18 +1,25 @@
-import type { PlasmoCSConfig } from "plasmo"
-import { useEffect, useRef } from "react"
+import type {
+  PlasmoCSConfig,
+  PlasmoCSUIProps,
+  PlasmoGetOverlayAnchor,
+  PlasmoGetShadowHostId,
+  PlasmoGetStyle
+} from "plasmo"
+import { useEffect, useRef, type FC } from "react"
 import { v4 as uuidv4 } from "uuid"
 
 import { useMessage } from "@plasmohq/messaging/hook"
 import { useStorage } from "@plasmohq/storage/hook"
 
-import { addCss, saveHtml, saveMarkdown } from "~tools"
+import TagBtnStyle from "~component/tagBtn/style"
+import { addCss, i18n, saveHtml, saveMarkdown } from "~tools"
 import useCssCodeHook from "~utils/cssCodeHook"
-import { savePdf } from "~utils/downloadPdf"
 import { useContent } from "~utils/editMarkdownHook"
+import { Print } from "~utils/print"
 import Turndown from "~utils/turndown"
 
 export const config: PlasmoCSConfig = {
-  matches: ["https://*.zhihu.com/*"]
+  matches: ["https://*.zhihu.com/p/*"]
 }
 
 const turndownService = Turndown()
@@ -20,7 +27,16 @@ const articleTitle = document
   .querySelector<HTMLElement>("head title")
   .innerText.trim()
 
-export default function zhihu() {
+const HOST_ID = "codebox-zhihu"
+export const getShadowHostId: PlasmoGetShadowHostId = () => HOST_ID
+
+export const getOverlayAnchor: PlasmoGetOverlayAnchor = async () =>
+  document.querySelector("article.Post-Main .Post-Title")
+
+export const getStyle: PlasmoGetStyle = () => TagBtnStyle()
+
+const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
+  const [showTag, setShowTag] = useStorage<boolean>("zhihu-showTag", true)
   const [cssCode, runCss] = useCssCodeHook("zhihu")
   const [closeLoginModal] = useStorage<boolean>("zhihu-closeLoginModal")
   const [copyCode] = useStorage<boolean>("zhihu-copyCode")
@@ -51,8 +67,7 @@ export default function zhihu() {
       downloadHtml()
     }
     if (req.name == "zhihu-downloadPdf") {
-      var article = document.querySelector<HTMLElement>("article.Post-Main")
-      savePdf(article, articleTitle)
+      downloadPdf()
     }
   })
 
@@ -176,6 +191,15 @@ export default function zhihu() {
     }
   }
 
+  function downloadPdf() {
+    const article = document.querySelector<HTMLElement>("article.Post-Main")
+    if (article) {
+      Print.print(article, { title: articleTitle })
+        .then(() => console.log("Printing complete"))
+        .catch((error) => console.error("Printing failed:", error))
+    }
+  }
+
   function editMarkdown() {
     const dom = document.querySelector("article.Post-Main")
     setContent(dom)
@@ -192,5 +216,31 @@ export default function zhihu() {
     saveHtml(dom, articleTitle)
   }
 
-  return <div style={{ display: "none" }}></div>
+  function handleEdit() {
+    editMarkdown()
+  }
+
+  function handleDownload() {
+    downloadMarkdown()
+  }
+
+  function handlePrint() {
+    downloadPdf()
+  }
+
+  function closeTag() {
+    setShowTag(false)
+  }
+
+  return showTag ? (
+    <div className="codebox-tagBtn">
+      <div onClick={handleEdit}>{i18n("edit")}</div>
+      <div onClick={handleDownload}>{i18n("download")}</div>
+      <div onClick={handlePrint}>{i18n("print")}</div>
+    </div>
+  ) : (
+    <></>
+  )
 }
+
+export default PlasmoOverlay
diff --git a/package.json b/package.json
index 751ccab..9b0dbb0 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "code-box",
   "displayName": "__MSG_extensionName__",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "description": "__MSG_extensionDescription__",
   "author": "027xiguapi. <458813868@qq.com>",
   "scripts": {