所有模块增加AI解析选项

README.md

@@ -1,4 +1,6 @@
-## codebox-一键复制代码/下载文章
+# codebox-一键复制代码/下载文章
+
+[中文](README.md) | [English](README_EN.md)
 
 ## 代码
 

README_EN.md

@@ -0,0 +1,181 @@
+# Codebox - One-click Code Copying/Downloading Articles
+
+[中文](README.md) | [English](README_EN.md)
+## Code
+
+https://github.com/027xiguapi/code-box
+
+## Introduction
+
+This browser plugin can be used on websites like CSDN/Zhihu/Script Home/Blog Garden/51CTO Blog/PHP Chinese Network/Juejin/WeChat, etc., to download articles as HTML or Markdown files with one click; to copy code without logging in; to support selected code; or to copy code with one click from the button in the upper right corner of the code; to remove the prompt to follow the blogger to read the full text; to remove the login pop-up window; to remove the pop-up window to jump to the APP.
+
+## Installation
+
+### Installation Method 1: Plugin Store (Recommended)
+
+Directly download and install:
+1. Enter the app store
+    - [Chrome Web Store](https://chrome.google.com/webstore/category/extensions?hl=zh-CN)
+    - [Edge Web Store](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home?hl=zh-CN)
+    - [360 Browser App Store](https://ext.se.360.cn/#/extension-detail?id=acnnhjllgegbndgknlliobjlekgilbdf)
+    - [Firefox Web Store](https://addons.mozilla.org/zh-CN/firefox/)
+
+2. Search: `codebox`
+
+![0f8137ce6861f2a387095aef446fe60](https://raw.githubusercontent.com/027xiguapi/code-box/main/public/webstore/0f8137ce6861f2a387095aef446fe60.png)
+![img](https://raw.githubusercontent.com/027xiguapi/code-box/main/public/webstore/img.png)
+![1724640161752](https://raw.githubusercontent.com/027xiguapi/code-box/main/public/webstore/1724640161752.jpg)
+
+### Installation Method 2: Direct Installation
+
+1. Installation address:
+    - [Go to Chrome Extension Store](https://chrome.google.com/webstore/detail/acnnhjllgegbndgknlliobjlekgilbdf)
+    - [Go to 360 Browser Extension Store](https://ext.se.360.cn/#/extension-detail?id=acnnhjllgegbndgknlliobjlekgilbdf)
+    - [Go to Firefox Extension Store](https://addons.mozilla.org/zh-CN/firefox/addon/code-box/)
+    - [Go to Edge Extension Store](https://microsoftedge.microsoft.com/addons/detail/code-box/cfpdbfmncaampihkmejogihjkenkonbn)
+
+### Installation Method 3: Download from WeChat Official Account
+
+1. Follow the WeChat official account
+
+![img](https://raw.githubusercontent.com/027xiguapi/code-box/main/public/wx/qrcode_wx.jpg)
+
+2. Click `Software Download`
+
+![img](https://raw.githubusercontent.com/027xiguapi/code-box/main/public/wx/download.jpg)
+
+### Installation Method 4: Source Code Installation
+
+1. Clone the source code
+   ```sh
+   git clone https://github.com/027xiguapi/code-box.git
+   ```
+2. Install and package
+   ```sh
+   pnpm install
+   pnpm dev
+   pnpm build
+   ```
+3. For Google Chrome, you can enter the plugin management page from the upper right menu -> More tools -> Extensions, or you can directly enter chrome://extensions in the address bar to access it.
+4. Check the developer mode, and you can directly load the plugin in the form of a folder.
+
+## Function
+
+![img-1](https://raw.githubusercontent.com/027xiguapi/code-box/main/public/config.jpg)
+
+### Customization
+
+- Insert custom styles (CSS code)
+- Download all images
+- Customize the selection to download HTML
+- Customize the selection to download Markdown
+- Customize the selection to download PDF
+
+### WeChat
+
+- Insert custom styles (CSS code)
+- One-click download of article HTML
+- One-click download of article Markdown
+- One-click download of article PDF
+- One-click download of all images
+
+### Nuggets
+
+- Insert custom styles (CSS code)
+- One-click download of article HTML
+- One-click download of article Markdown
+- One-click download of article PDF
+
+### CSDN
+
+- One-click download of article HTML, PDF, or Markdown files
+- Open any `CSDN` blog to start copying code
+- Support for selected code when not logged in to `CSDN`
+- One-click copy of code from the button in the upper right corner of the code when not logged in to `CSDN`
+- No more forced login pop-ups when not logged in to `CSDN`
+- No more prompts to follow the blogger to read the full text when not following the blogger, and the full text is displayed
+- Automatically expand code blocks
+- Block APP redirection on mobile
+- For non-VIP users, no more prompts for VIP viewing, and the full text is displayed
+- Insert custom styles (CSS code)
+
+### Zhihu
+
+- One-click download of article HTML, PDF, or Markdown files
+- One-click copy of code
+- No more prompts to expand and read the full text when not logged in to `Zhihu`, and the full text is displayed
+- No more forced login pop-ups when not logged in to `Zhihu`
+- Insert custom styles (CSS code)
+
+### Baidu
+
+- One-click download of dialog box HTML, PDF, or Markdown files
+- Close AI dialog box
+
+### Jian Shu
+
+- One-click download of article HTML, PDF, or Markdown files
+- One-click copy of code on mobile
+- No more prompts to expand and read the full text, and the full text is displayed
+- No more forced login pop-ups
+- Insert custom styles (CSS code)
+
+### Script Home
+
+- One-click download of article HTML, PDF, or Markdown files
+- Open any `Script Home` blog to start copying code
+- Support for selected code when not logged in to `Script Home`
+- Block ads
+- One-click copy of code from the button in the upper right corner of the code on mobile when not logged in to `Script Home`
+- Insert custom styles (CSS code)
+
+### Blog Garden
+
+- One-click download of article HTML, PDF, or Markdown files
+- One-click copy of code
+- Insert custom styles (CSS code)
+
+### 51CTO Blog
+
+- One-click download of article HTML, PDF, or Markdown files
+- Support for selected code when not logged in to `51CTO Blog`
+- One-click copy of code from the button in the upper right corner of the code when not logged in to `51CTO Blog`
+- No more forced login pop-ups when not logged in to `51CTO Blog`
+- One-click copy of code from the button in the upper right corner of the code on mobile when not logged in to `51CTO Blog`
+- Insert custom styles (CSS code)
+
+### PHP Chinese Network
+
+- One-click download of article HTML, PDF, or Markdown files
+- Support for selected code when not logged in to `PHP Chinese Network`
+- One-click copy of code from the button in the upper right corner of the code when not logged in to `PHP Chinese Network`
+- No more forced login pop-ups when not logged in to `PHP Chinese Network`
+- One-click copy of code from the button in the upper right corner of the code on mobile when not logged in to `PHP Chinese Network`
+- Insert custom styles (CSS code)
+
+![img](https://raw.githubusercontent.com/027xiguapi/code-box/main/public/8.png)
+![img](https://raw.githubusercontent.com/027xiguapi/code-box/main/public/1.jpg)
+![img](https://raw.githubusercontent.com/027xiguapi/code-box/main/public/2.png)
+![img](https://raw.githubusercontent.com/027xiguapi/code-box/main/public/3.jpg)
+![img](https://raw.githubusercontent.com/027xiguapi/code-box/main/public/4.jpg)
+![img](https://raw.githubusercontent.com/027xiguapi/code-box/main/public/5.jpg)
+![img](https://raw.githubusercontent.com/027xiguapi/code-box/main/public/6.jpg)
+![img](https://raw.githubusercontent.com/027xiguapi/code-box/main/public/7.jpg)
+![img](https://raw.githubusercontent.com/027xiguapi/code-box/main/public/1723096379951.jpg)
+
+## Reference
+
+1. [copy-csdn](https://github.com/openHacking/copy-csdn)
+2. [plasmo](https://github.com/PlasmoHQ/plasmo)
+3. [Chrome App Store One-stop Support](https://support.google.com/chrome_webstore/contact/one_stop_support)
+4. [Out-of-the-box web printing and downloading](https://juejin.cn/post/7412672713376497727)
+5. [Export WeChat Official Account Articles to PDF](https://greasyfork.org/en/scripts/510683-%E5%AF%BC%E5%87%BA%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7%E6%96%87%E7%AB%A0%E4%B8%BApdf/code)
+6. [One-click Download of WeChat Official Account Article Images](https://greasyfork.org/zh-CN/scripts/40583-%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7%E6%8E%A8%E6%96%87%E5%9B%BE%E7%89%87%E4%B8%80%E9%94%AE%E4%B8%8B%E8%BD%BD/code)
+
+## Privacy Policy
+
+[Webpage](https://027xiguapi.github.io/code-box/privacy-policy.html)
+
+## Support
+
+![img](https://raw.githubusercontent.com/027xiguapi/code-box/main/public/wx/qrcode_wx.jpg)

component/ui/tags.tsx

@@ -11,7 +11,7 @@ const tagsStyles = {
     alignItems: "center",
     color: "#1e80ff",
     width: "160px",
-    background: "#fff",
+    backgroundColor: "rgb(255, 255, 255, .3)",
     borderRadius: "5px",
     justifyContent: "space-between",
     padding: "0 8px",
@@ -21,6 +21,7 @@ const tagsStyles = {
 }
 
 export default function Tags(props: any) {
+  const [isShowTag, setIsShowTag] = useState(true)
   const handleEdit = () => {
     props.onEdit()
   }
@@ -38,10 +39,10 @@ export default function Tags(props: any) {
   }
 
   const handleClose = () => {
-    props.setIsShowTag(false)
+    setIsShowTag(false)
   }
 
-  return (
+  return isShowTag ? (
     <div className="codebox-tagBtn" style={tagsStyles.tags}>
       <div onClick={handleEdit} className="btn">
         {i18n("edit")}
@@ -59,5 +60,7 @@ export default function Tags(props: any) {
         <CloseOutlined />
       </div>
     </div>
+  ) : (
+    <></>
   )
 }

contents/51cto.tsx

@@ -12,9 +12,11 @@ import { useMessage } from "@plasmohq/messaging/hook"
 import { useStorage } from "@plasmohq/storage/hook"
 
 import TagBtnStyle from "~component/tagBtn/style"
+import Tags from "~component/ui/tags"
 import { addCss, i18n, saveHtml, saveMarkdown } from "~tools"
 import useCssCodeHook from "~utils/cssCodeHook"
 import { useEditMarkdown } from "~utils/editMarkdownHook"
+import { useParseMarkdown } from "~utils/parseMarkdownHook"
 import { Print } from "~utils/print"
 import Turndown from "~utils/turndown"
 
@@ -36,6 +38,7 @@ export const getOverlayAnchor: PlasmoGetOverlayAnchor = async () =>
 export const getStyle: PlasmoGetStyle = () => TagBtnStyle()
 
 const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
+  const [parseContent, setParseContent] = useParseMarkdown()
   const [showTag, setShowTag] = useStorage<boolean>("51cto-showTag", true)
   const [cssCode, runCss] = useCssCodeHook("51cto")
   const [copyCode] = useStorage<boolean>("51cto-copyCode")
@@ -242,34 +245,18 @@ const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
     setContent(dom)
   }
 
-  function handleEdit() {
-    editMarkdown()
-  }
-
-  function handleDownload() {
-    downloadMarkdown()
-  }
-
-  function handlePrint() {
-    downloadPdf()
-  }
-
-  function closeTag() {
-    setShowTag(false)
+  function parseMarkdown() {
+    const dom = document.querySelector<HTMLElement>("article .article-detail")
+    setParseContent(dom)
   }
 
   return showTag ? (
-    <div className="codebox-tagBtn">
-      <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>
+    <Tags
+      onEdit={editMarkdown}
+      onDownload={downloadMarkdown}
+      onPrint={downloadPdf}
+      onParse={parseMarkdown}
+    />
   ) : (
     <></>
   )

contents/cnblogs.tsx

@@ -12,9 +12,11 @@ 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 Tags from "~component/ui/tags"
+import { saveHtml, saveMarkdown } from "~tools"
 import useCssCodeHook from "~utils/cssCodeHook"
 import { useEditMarkdown } from "~utils/editMarkdownHook"
+import { useParseMarkdown } from "~utils/parseMarkdownHook"
 import { Print } from "~utils/print"
 import Turndown from "~utils/turndown"
 
@@ -37,6 +39,7 @@ export const getOverlayAnchor: PlasmoGetOverlayAnchor = async () =>
 export const getStyle: PlasmoGetStyle = () => TagBtnStyle()
 
 const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
+  const [parseContent, setParseContent] = useParseMarkdown()
   const [showTag, setShowTag] = useStorage<boolean>("cnblogs-showTag", true)
   const [cssCode, runCss] = useCssCodeHook("cnblogs")
   const [copyCode] = useStorage<boolean>("cnblogs-copyCode")
@@ -166,28 +169,18 @@ const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
     saveHtml(dom, articleTitle)
   }
 
-  function handleEdit() {
-    editMarkdown()
-  }
-
-  function handleDownload() {
-    downloadMarkdown()
-  }
-
-  function handlePrint() {
-    downloadPdf()
-  }
-
-  function closeTag() {
-    setShowTag(false)
+  function parseMarkdown() {
+    const dom = document.querySelector<HTMLElement>("#post_detail")
+    setParseContent(dom)
   }
 
   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>
+    <Tags
+      onEdit={editMarkdown}
+      onDownload={downloadMarkdown}
+      onPrint={downloadPdf}
+      onParse={parseMarkdown}
+    />
   ) : (
     <></>
   )

contents/csdn.tsx

@@ -12,9 +12,11 @@ import { useMessage } from "@plasmohq/messaging/hook"
 import { useStorage } from "@plasmohq/storage/hook"
 
 import TagBtnStyle from "~component/tagBtn/style"
+import Tags from "~component/ui/tags"
 import { addCss, i18n, saveHtml, saveMarkdown } from "~tools"
 import useCssCodeHook from "~utils/cssCodeHook"
 import { useEditMarkdown } from "~utils/editMarkdownHook"
+import { useParseMarkdown } from "~utils/parseMarkdownHook"
 import { Print } from "~utils/print"
 import Turndown from "~utils/turndown"
 
@@ -35,6 +37,7 @@ export const getOverlayAnchor: PlasmoGetOverlayAnchor = async () =>
 export const getStyle: PlasmoGetStyle = () => TagBtnStyle()
 
 const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
+  const [parseContent, setParseContent] = useParseMarkdown()
   const [showTag, setShowTag] = useStorage<boolean>("csdn-showTag", true)
   const [cssCode, runCss] = useCssCodeHook("csdn")
   const [closeAds] = useStorage<boolean>("csdn-closeAds")
@@ -291,28 +294,18 @@ const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
     saveHtml(dom, articleTitle)
   }
 
-  function handleEdit() {
-    editMarkdown()
-  }
-
-  function handleDownload() {
-    downloadMarkdown()
-  }
-
-  function handlePrint() {
-    downloadPdf()
-  }
-
-  function closeTag() {
-    setShowTag(false)
+  function parseMarkdown() {
+    const dom = document.querySelector(".blog-content-box")
+    setParseContent(dom)
   }
 
   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>
+    <Tags
+      onEdit={editMarkdown}
+      onDownload={downloadMarkdown}
+      onPrint={downloadPdf}
+      onParse={parseMarkdown}
+    />
   ) : (
     <></>
   )

contents/jb51.tsx

@@ -12,9 +12,11 @@ import { useMessage } from "@plasmohq/messaging/hook"
 import { useStorage } from "@plasmohq/storage/hook"
 
 import TagBtnStyle from "~component/tagBtn/style"
+import Tags from "~component/ui/tags"
 import { addCss, i18n, saveHtml, saveMarkdown } from "~tools"
 import useCssCodeHook from "~utils/cssCodeHook"
 import { useEditMarkdown } from "~utils/editMarkdownHook"
+import { useParseMarkdown } from "~utils/parseMarkdownHook"
 import { Print } from "~utils/print"
 import Turndown from "~utils/turndown"
 
@@ -36,6 +38,7 @@ export const getOverlayAnchor: PlasmoGetOverlayAnchor = async () =>
 export const getStyle: PlasmoGetStyle = () => TagBtnStyle()
 
 const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
+  const [parseContent, setParseContent] = useParseMarkdown()
   const [showTag, setShowTag] = useStorage<boolean>("jb51-showTag", true)
   const [cssCode, runCss] = useCssCodeHook("jb51")
   const [closeAds] = useStorage<boolean>("jb51-closeAds")
@@ -246,28 +249,18 @@ const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
     saveHtml(dom, articleTitle)
   }
 
-  function handleEdit() {
-    editMarkdown()
-  }
-
-  function handleDownload() {
-    downloadMarkdown()
-  }
-
-  function handlePrint() {
-    downloadPdf()
-  }
-
-  function closeTag() {
-    setShowTag(false)
+  function parseMarkdown() {
+    const dom = document.querySelector<HTMLElement>("#article")
+    setParseContent(dom)
   }
 
   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>
+    <Tags
+      onEdit={editMarkdown}
+      onDownload={downloadMarkdown}
+      onPrint={downloadPdf}
+      onParse={parseMarkdown}
+    />
   ) : (
     <></>
   )

contents/jianshu.tsx

@@ -12,9 +12,11 @@ import { useMessage } from "@plasmohq/messaging/hook"
 import { useStorage } from "@plasmohq/storage/hook"
 
 import TagBtnStyle from "~component/tagBtn/style"
+import Tags from "~component/ui/tags"
 import { addCss, i18n, saveHtml, saveMarkdown } from "~tools"
 import useCssCodeHook from "~utils/cssCodeHook"
 import { useEditMarkdown } from "~utils/editMarkdownHook"
+import { useParseMarkdown } from "~utils/parseMarkdownHook"
 import { Print } from "~utils/print"
 import Turndown from "~utils/turndown"
 
@@ -36,6 +38,7 @@ export const getOverlayAnchor: PlasmoGetOverlayAnchor = async () =>
 export const getStyle: PlasmoGetStyle = () => TagBtnStyle()
 
 const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
+  const [parseContent, setParseContent] = useParseMarkdown()
   const [showTag, setShowTag] = useStorage<boolean>("jianshu-showTag", true)
   const [cssCode, runCss] = useCssCodeHook("jianshu")
   const [closeLoginModal] = useStorage<boolean>("jianshu-closeLoginModal")
@@ -196,28 +199,18 @@ const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
     saveHtml(dom, articleTitle)
   }
 
-  function handleEdit() {
-    editMarkdown()
-  }
-
-  function handleDownload() {
-    downloadMarkdown()
-  }
-
-  function handlePrint() {
-    downloadPdf()
-  }
-
-  function closeTag() {
-    setShowTag(false)
+  function parseMarkdown() {
+    const dom = document.querySelector("section.ouvJEz")
+    setParseContent(dom)
   }
 
   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>
+    <Tags
+      onEdit={editMarkdown}
+      onDownload={downloadMarkdown}
+      onPrint={downloadPdf}
+      onParse={parseMarkdown}
+    />
   ) : (
     <></>
   )

contents/juejin.tsx

@@ -11,9 +11,11 @@ import { useMessage } from "@plasmohq/messaging/hook"
 import { useStorage } from "@plasmohq/storage/dist/hook"
 
 import TagBtnStyle from "~component/tagBtn/style"
+import Tags from "~component/ui/tags"
 import { i18n, saveHtml, saveMarkdown } from "~tools"
 import useCssCodeHook from "~utils/cssCodeHook"
 import { useEditMarkdown } from "~utils/editMarkdownHook"
+import { useParseMarkdown } from "~utils/parseMarkdownHook"
 import { Print } from "~utils/print"
 import Turndown from "~utils/turndown"
 
@@ -64,6 +66,7 @@ export const getOverlayAnchor: PlasmoGetOverlayAnchor = async () =>
 export const getStyle: PlasmoGetStyle = () => TagBtnStyle()
 
 const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
+  const [parseContent, setParseContent] = useParseMarkdown()
   const [showTag, setShowTag] = useStorage<boolean>("juejin-showTag", true)
   const [cssCode, runCss] = useCssCodeHook("juejin")
   const [content, setContent] = useEditMarkdown()
@@ -111,28 +114,18 @@ const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
     saveHtml(dom, articleTitle)
   }
 
-  function handleEdit() {
-    editMarkdown()
-  }
-
-  function handleDownload() {
-    downloadMarkdown()
-  }
-
-  function handlePrint() {
-    downloadPdf()
-  }
-
-  function closeTag() {
-    setShowTag(false)
+  function parseMarkdown() {
+    const dom = document.querySelector("article.article")
+    setParseContent(dom)
   }
 
   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>
+    <Tags
+      onEdit={editMarkdown}
+      onDownload={downloadMarkdown}
+      onPrint={downloadPdf}
+      onParse={parseMarkdown}
+    />
   ) : (
     <></>
   )

contents/medium.tsx

@@ -168,8 +168,6 @@ const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
       onDownload={downloadMarkdown}
       onPrint={downloadPdf}
       onParse={parseMarkdown}
-      isShowTag={showTag}
-      setIsShowTag={setShowTag}
     />
   ) : (
     <></>

contents/oschina.tsx

@@ -11,9 +11,11 @@ import { useMessage } from "@plasmohq/messaging/hook"
 import { useStorage } from "@plasmohq/storage/dist/hook"
 
 import TagBtnStyle from "~component/tagBtn/style"
+import Tags from "~component/ui/tags"
 import { i18n, saveHtml, saveMarkdown } from "~tools"
 import useCssCodeHook from "~utils/cssCodeHook"
 import { useEditMarkdown } from "~utils/editMarkdownHook"
+import { useParseMarkdown } from "~utils/parseMarkdownHook"
 import { Print } from "~utils/print"
 import Turndown from "~utils/turndown"
 
@@ -35,6 +37,7 @@ export const getOverlayAnchor: PlasmoGetOverlayAnchor = async () =>
 export const getStyle: PlasmoGetStyle = () => TagBtnStyle()
 
 const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
+  const [parseContent, setParseContent] = useParseMarkdown()
   const [showTag, setShowTag] = useStorage<boolean>("oschina-showTag", true)
   const [cssCode, runCss] = useCssCodeHook("oschina")
   const [content, setContent] = useEditMarkdown()
@@ -82,28 +85,18 @@ const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
     saveHtml(dom, articleTitle)
   }
 
-  function handleEdit() {
-    editMarkdown()
-  }
-
-  function handleDownload() {
-    downloadMarkdown()
-  }
-
-  function handlePrint() {
-    downloadPdf()
-  }
-
-  function closeTag() {
-    setShowTag(false)
+  function parseMarkdown() {
+    const dom = document.querySelector(".article-box")
+    setParseContent(dom)
   }
 
   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>
+    <Tags
+      onEdit={editMarkdown}
+      onDownload={downloadMarkdown}
+      onPrint={downloadPdf}
+      onParse={parseMarkdown}
+    />
   ) : (
     <></>
   )

contents/php.tsx

@@ -11,9 +11,11 @@ import { useMessage } from "@plasmohq/messaging/hook"
 import { useStorage } from "@plasmohq/storage/hook"
 
 import TagBtnStyle from "~component/tagBtn/style"
+import Tags from "~component/ui/tags"
 import { addCss, i18n, removeCss, saveHtml, saveMarkdown } from "~tools"
 import useCssCodeHook from "~utils/cssCodeHook"
 import { useEditMarkdown } from "~utils/editMarkdownHook"
+import { useParseMarkdown } from "~utils/parseMarkdownHook"
 import { Print } from "~utils/print"
 import Turndown from "~utils/turndown"
 
@@ -35,6 +37,7 @@ export const getOverlayAnchor: PlasmoGetOverlayAnchor = async () =>
 export const getStyle: PlasmoGetStyle = () => TagBtnStyle()
 
 const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
+  const [parseContent, setParseContent] = useParseMarkdown()
   const [showTag, setShowTag] = useStorage<boolean>("php-showTag", true)
   const [cssCode, runCss] = useCssCodeHook("php")
   const [copyCode] = useStorage("php-copyCode", true)
@@ -133,28 +136,18 @@ const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
     saveHtml(dom, articleTitle)
   }
 
-  function handleEdit() {
-    editMarkdown()
-  }
-
-  function handleDownload() {
-    downloadMarkdown()
-  }
-
-  function handlePrint() {
-    downloadPdf()
-  }
-
-  function closeTag() {
-    setShowTag(false)
+  function parseMarkdown() {
+    const dom = document.querySelector(".phpscMain .php-article")
+    setParseContent(dom)
   }
 
   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>
+    <Tags
+      onEdit={editMarkdown}
+      onDownload={downloadMarkdown}
+      onPrint={downloadPdf}
+      onParse={parseMarkdown}
+    />
   ) : (
     <></>
   )

contents/segmentfault.tsx

@@ -11,9 +11,11 @@ import { useMessage } from "@plasmohq/messaging/hook"
 import { useStorage } from "@plasmohq/storage/dist/hook"
 
 import TagBtnStyle from "~component/tagBtn/style"
+import Tags from "~component/ui/tags"
 import { i18n, saveHtml, saveMarkdown } from "~tools"
 import useCssCodeHook from "~utils/cssCodeHook"
 import { useEditMarkdown } from "~utils/editMarkdownHook"
+import { useParseMarkdown } from "~utils/parseMarkdownHook"
 import { Print } from "~utils/print"
 import Turndown from "~utils/turndown"
 
@@ -35,6 +37,7 @@ export const getOverlayAnchor: PlasmoGetOverlayAnchor = async () =>
 export const getStyle: PlasmoGetStyle = () => TagBtnStyle()
 
 const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
+  const [parseContent, setParseContent] = useParseMarkdown()
   const [showTag, setShowTag] = useStorage<boolean>(
     "segmentfault-showTag",
     true
@@ -85,28 +88,18 @@ const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
     saveHtml(dom, articleTitle)
   }
 
-  function handleEdit() {
-    editMarkdown()
-  }
-
-  function handleDownload() {
-    downloadMarkdown()
-  }
-
-  function handlePrint() {
-    downloadPdf()
-  }
-
-  function closeTag() {
-    setShowTag(false)
+  function parseMarkdown() {
+    const dom = document.querySelector(".container")
+    setParseContent(dom)
   }
 
   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>
+    <Tags
+      onEdit={editMarkdown}
+      onDownload={downloadMarkdown}
+      onPrint={downloadPdf}
+      onParse={parseMarkdown}
+    />
   ) : (
     <></>
   )

contents/weixin.tsx

@@ -13,9 +13,11 @@ import { useMessage } from "@plasmohq/messaging/hook"
 import { useStorage } from "@plasmohq/storage/dist/hook"
 
 import TagBtnStyle from "~component/tagBtn/style"
+import Tags from "~component/ui/tags"
 import { i18n, saveHtml, saveMarkdown } from "~tools"
 import useCssCodeHook from "~utils/cssCodeHook"
 import { useEditMarkdown } from "~utils/editMarkdownHook"
+import { useParseMarkdown } from "~utils/parseMarkdownHook"
 import { Print } from "~utils/print"
 import Turndown from "~utils/turndown"
 
@@ -37,6 +39,7 @@ export const getOverlayAnchor: PlasmoGetOverlayAnchor = async () =>
 export const getStyle: PlasmoGetStyle = () => TagBtnStyle()
 
 const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
+  const [parseContent, setParseContent] = useParseMarkdown()
   const [showTag, setShowTag] = useStorage<boolean>("weixin-showTag", true)
   const [cssCode, runCss] = useCssCodeHook("weixin")
   const [history, setHistory] = useStorage<any[]>("codebox-history")
@@ -146,28 +149,18 @@ const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
     saveHtml(dom, articleTitle)
   }
 
-  function handleEdit() {
-    editMarkdown()
-  }
-
-  function handleDownload() {
-    downloadMarkdown()
-  }
-
-  function handlePrint() {
-    downloadPdf()
-  }
-
-  function closeTag() {
-    setShowTag(false)
+  function parseMarkdown() {
+    const dom = document.querySelector("#img-content")
+    setParseContent(dom)
   }
 
   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>
+    <Tags
+      onEdit={editMarkdown}
+      onDownload={downloadMarkdown}
+      onPrint={downloadPdf}
+      onParse={parseMarkdown}
+    />
   ) : (
     <></>
   )

contents/zhihu.tsx

@@ -12,9 +12,11 @@ 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 Tags from "~component/ui/tags"
+import { addCss, saveHtml, saveMarkdown } from "~tools"
 import useCssCodeHook from "~utils/cssCodeHook"
 import { useEditMarkdown } from "~utils/editMarkdownHook"
+import { useParseMarkdown } from "~utils/parseMarkdownHook"
 import { Print } from "~utils/print"
 import Turndown from "~utils/turndown"
 
@@ -36,6 +38,7 @@ export const getOverlayAnchor: PlasmoGetOverlayAnchor = async () =>
 export const getStyle: PlasmoGetStyle = () => TagBtnStyle()
 
 const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
+  const [parseContent, setParseContent] = useParseMarkdown()
   const [showTag, setShowTag] = useStorage<boolean>("zhihu-showTag", true)
   const [cssCode, runCss] = useCssCodeHook("zhihu")
   const [closeLoginModal] = useStorage<boolean>("zhihu-closeLoginModal")
@@ -216,28 +219,18 @@ const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
     saveHtml(dom, articleTitle)
   }
 
-  function handleEdit() {
-    editMarkdown()
-  }
-
-  function handleDownload() {
-    downloadMarkdown()
-  }
-
-  function handlePrint() {
-    downloadPdf()
-  }
-
-  function closeTag() {
-    setShowTag(false)
+  function parseMarkdown() {
+    const dom = document.querySelector("article.Post-Main")
+    setParseContent(dom)
   }
 
   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>
+    <Tags
+      onEdit={editMarkdown}
+      onDownload={downloadMarkdown}
+      onPrint={downloadPdf}
+      onParse={parseMarkdown}
+    />
   ) : (
     <></>
   )

package.json

@@ -1,7 +1,7 @@
 {
   "name": "code-box",
   "displayName": "__MSG_extensionName__",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "__MSG_extensionDescription__",
   "author": "027xiguapi. <458813868@qq.com>",
   "scripts": {