增加paywallbuster网站

component/options/content.tsx

@@ -12,6 +12,7 @@ import Juejin from "~component/options/juejin"
 import Medium from "~component/options/medium"
 import Mp from "~component/options/mp"
 import Oschina from "~component/options/oschina"
+import Paywallbuster from "~component/options/paywallbuster"
 import Php from "~component/options/php"
 import Segmentfault from "~component/options/segmentfault"
 import Weixin from "~component/options/weixin"
@@ -32,6 +33,7 @@ export default function Content() {
   const [weixinIsShow, setWeixinIsShow] = useState<boolean>(false)
   const [mediumIsShow, setMediumIsShow] = useState<boolean>(false)
   const [mpIsShow, setMpIsShow] = useState<boolean>(false)
+  const [paywallbusterIsShow, setPaywallbusterIsShow] = useState<boolean>(false)
 
   const csdnRef = useRef<any>()
   const zhihuRef = useRef<any>()
@@ -67,6 +69,7 @@ export default function Content() {
         hostname.includes("oschina") && setOschinaIsShow(true)
         hostname.includes("segmentfault") && setSegmentfaultIsShow(true)
         hostname.includes("medium") && setMediumIsShow(true)
+        hostname.includes("paywallbuster") && setPaywallbusterIsShow(true)
         if (hostname.includes("weixin")) {
           if (pathname.includes("cgi-bin")) {
             setMpIsShow(true)
@@ -94,6 +97,7 @@ export default function Content() {
       {weixinIsShow ? <Weixin /> : <></>}
       {mediumIsShow ? <Medium /> : <></>}
       {mpIsShow ? <Mp /> : <></>}
+      {paywallbusterIsShow ? <Paywallbuster /> : <></>}
       <Custom />
       <Config forwardRef={customRef} />
     </div>

component/options/custom.tsx

@@ -16,6 +16,11 @@ export default function Custom() {
       name: "app-makerQRPost"
     })
   }
+  function getArticle() {
+    sendToContentScript({
+      name: "app-getArticle"
+    })
+  }
   return (
     <fieldset>
       <legend>{i18n("customConfig")}</legend>
@@ -32,6 +37,13 @@ export default function Custom() {
         </span>
         <DownloadOutlined style={{ color: "#52c41a", fontSize: "16px" }} />
       </div>
+      <div className="item download" onClick={getArticle}>
+        <span>
+          <StarTwoTone twoToneColor="#eb2f96" style={{ marginRight: "5px" }} />
+          {i18n("getArticle")}
+        </span>
+        <DownloadOutlined style={{ color: "#52c41a", fontSize: "16px" }} />
+      </div>
     </fieldset>
   )
 }

component/options/paywallbuster.tsx

@@ -0,0 +1,21 @@
+import CssCode from "~component/items/cssCode"
+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 Paywallbuster() {
+  return (
+    <fieldset>
+      <legend>{i18n("paywallbusterConfig")}</legend>
+      <CssCode name="paywallbuster"></CssCode>
+      <ShowTag name="paywallbuster"></ShowTag>
+      <EditMarkdown name="paywallbuster"></EditMarkdown>
+      <DownloadMarkdown name="paywallbuster"></DownloadMarkdown>
+      <DownloadHtml name="paywallbuster"></DownloadHtml>
+      <DownloadPdf name="paywallbuster"></DownloadPdf>
+    </fieldset>
+  )
+}

component/ui/QRCodeModal.tsx

@@ -35,7 +35,7 @@ const styles = {
     right: "10px",
     background: "none",
     border: "none",
-    fontSize: "1.5rem",
+    fontSize: "18px",
     cursor: "pointer",
     padding: "0.5rem"
   },
@@ -65,7 +65,7 @@ const styles = {
     marginBottom: "1rem"
   },
   captchaText: {
-    fontSize: "1.2rem",
+    fontSize: "16px",
     letterSpacing: "2px",
     color: "#333"
   },
@@ -78,7 +78,7 @@ const styles = {
     padding: "0.8rem",
     border: "1px solid #ddd",
     borderRadius: "4px",
-    fontSize: "1rem",
+    fontSize: "14px",
     outline: "none",
     "&:focus": {
       borderColor: "#007bff"
@@ -97,8 +97,8 @@ const styles = {
   },
   errorText: {
     color: "#ff4444",
-    fontSize: "0.9rem",
+    fontSize: "14px",
-    marginTop: "0.5rem"
+    marginTop: "6px"
   }
 }
 

component/ui/customDomSelector.tsx

@@ -100,7 +100,12 @@ export default function CustomDomSelector() {
 
   useMessage(async (req: any, res: any) => {
     const name = req.name
-    setCustom(name.split("-")[1])
+    const isApp = name.split("-")[0] == "app"
+    console.log(isApp)
+    if (name && !isApp) {
+      const type = name.split("-")[1]
+      setCustom(type)
+    }
   })
 
   const setCustom = (type: string) => {

component/ui/toolBox.tsx

@@ -20,7 +20,7 @@ const boxStyles = {
     right: "0px",
     background: "none",
     border: "none",
-    fontSize: "1.5rem",
+    fontSize: "18px",
     cursor: "pointer",
     padding: "0.5rem"
   },
@@ -29,7 +29,7 @@ const boxStyles = {
   },
   item: {
     color: "#000000",
-    fontSize: "1.2rem",
+    fontSize: "16px",
     marginBottom: "3px"
   }
 }
@@ -56,6 +56,11 @@ export default function ToolBox(props: any) {
     props.onPrint()
   }
 
+  const getArticle = () => {
+    const href = encodeURIComponent(location.href)
+    window.open(`https://paywallbuster.com/articles/?article=${href}`)
+  }
+
   const handleClose = () => {
     setIsShowTag(false)
   }
@@ -84,6 +89,9 @@ export default function ToolBox(props: any) {
       <div style={boxStyles.item}>
         <a onClick={() => editQRCodeImg()}>{i18n("makerQRPost")}</a>
       </div>
+      <div style={boxStyles.item}>
+        <a onClick={() => getArticle()}>{i18n("getArticle")}</a>
+      </div>
       <a style={boxStyles.item} href="https://www.code-box.fun" target="_blank">
         帮助
       </a>

component/ui/validModal.tsx

@@ -36,7 +36,7 @@ const styles = {
     right: "10px",
     background: "none",
     border: "none",
-    fontSize: "1.5rem",
+    fontSize: "18px",
     cursor: "pointer",
     padding: "0.5rem"
   },
@@ -76,7 +76,7 @@ const styles = {
     marginBottom: "1rem"
   },
   captchaText: {
-    fontSize: "1.2rem",
+    fontSize: "16px",
     letterSpacing: "2px",
     color: "#333"
   },
@@ -89,7 +89,7 @@ const styles = {
     padding: "0.8rem",
     border: "1px solid #ddd",
     borderRadius: "4px",
-    fontSize: "1rem",
+    fontSize: "16px",
     outline: "none",
     "&:focus": {
       borderColor: "#007bff"
@@ -108,7 +108,7 @@ const styles = {
   },
   errorText: {
     color: "#ff4444",
-    fontSize: "0.9rem",
+    fontSize: "16px",
     marginTop: "0.5rem"
   }
 }

contents/custom.tsx

@@ -45,6 +45,10 @@ export default function CustomOverlay() {
     if (req.name == "app-makerQRPost") {
       makerQRPost()
     }
+    if (req.name == "app-getArticle") {
+      const href = encodeURIComponent(location.href)
+      window.open(`https://paywallbuster.com/articles/?article=${href}`)
+    }
     if (req.name == "app-full-page-screenshot") {
       if (confirm("确认截图？")) {
         const { scrollHeight, clientHeight } = document.documentElement

contents/medium.tsx

@@ -1,16 +1,13 @@
 import type {
   PlasmoCSConfig,
   PlasmoCSUIProps,
-  PlasmoGetOverlayAnchor,
+  PlasmoGetShadowHostId
-  PlasmoGetShadowHostId,
-  PlasmoGetStyle
 } from "plasmo"
 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 ToolBox from "~component/ui/toolBox"
 import { i18n, saveHtml, saveMarkdown } from "~tools"
 import useCssCodeHook from "~utils/cssCodeHook"
@@ -98,15 +95,9 @@ const articleTitle = document
   .querySelector<HTMLElement>("head title")
   .innerText.trim()
 
-const HOST_ID = "codebox-medium1"
+export const getShadowHostId: PlasmoGetShadowHostId = () => "codebox-medium"
-export const getShadowHostId: PlasmoGetShadowHostId = () => HOST_ID
 
-export const getOverlayAnchor: PlasmoGetOverlayAnchor = async () =>
+const PlasmoOverlay: FC<PlasmoCSUIProps> = () => {
-  document.querySelector("article .pw-post-title")
-
-export const getStyle: PlasmoGetStyle = () => TagBtnStyle()
-
-const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
   const [parseContent, setParseContent] = useParseMarkdown()
   const [showTag, setShowTag] = useStorage<boolean>("medium-showTag", true)
   const [cssCode, runCss] = useCssCodeHook("medium")

contents/paywallbuster.tsx

@@ -0,0 +1,109 @@
+import type {
+  PlasmoCSConfig,
+  PlasmoCSUIProps,
+  PlasmoGetOverlayAnchorList,
+  PlasmoGetShadowHostId
+} from "plasmo"
+import React, { type FC } from "react"
+
+import { useMessage } from "@plasmohq/messaging/dist/hook"
+import { useStorage } from "@plasmohq/storage/dist/hook"
+
+import ToolBox from "~component/ui/toolBox"
+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"
+
+export const config: PlasmoCSConfig = {
+  matches: ["https://paywallbuster.com/articles/*"]
+}
+
+const turndownService = Turndown()
+const articleTitle = document
+  .querySelector<HTMLElement>("head title")
+  .innerText.trim()
+
+export const getShadowHostId: PlasmoGetShadowHostId = () =>
+  "codebox-paywallbuster"
+
+const PlasmoOverlay: FC<PlasmoCSUIProps> = () => {
+  const [parseContent, setParseContent] = useParseMarkdown()
+  const [showTag, setShowTag] = useStorage<boolean>(
+    "paywallbuster-showTag",
+    true
+  )
+  const [cssCode, runCss] = useCssCodeHook("paywallbuster")
+  const [content, setContent] = useEditMarkdown()
+
+  useMessage(async (req, res) => {
+    if (req.name == "paywallbuster-isShow") {
+      res.send({ isShow: true })
+    }
+    if (req.name == "paywallbuster-editMarkdown") {
+      editMarkdown()
+    }
+    if (req.name == "paywallbuster-downloadMarkdown") {
+      downloadMarkdown()
+    }
+    if (req.name == "paywallbuster-downloadHtml") {
+      downloadHtml()
+    }
+    if (req.name == "paywallbuster-downloadPdf") {
+      downloadPdf()
+    }
+  })
+
+  function getDescription() {
+    const summary = document.querySelector<HTMLMetaElement>(
+      'meta[name="description"]'
+    ).content
+    summary && prompt("文章摘要：", summary)
+  }
+
+  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, articleTitle)
+  }
+
+  function downloadMarkdown() {
+    const html = document.querySelector("article")
+    const markdown = turndownService.turndown(html)
+    saveMarkdown(markdown, articleTitle)
+  }
+
+  function downloadHtml() {
+    const dom = document.querySelector("article")
+    saveHtml(dom, articleTitle)
+  }
+
+  function parseMarkdown() {
+    const dom = document.querySelector("article")
+    setParseContent(dom)
+  }
+
+  return showTag ? (
+    <ToolBox
+      onGetDescription={getDescription}
+      onEditMarkdown={editMarkdown}
+      onDownloadMarkdown={downloadMarkdown}
+      onPrint={downloadPdf}
+      onParseMarkdown={parseMarkdown}
+    />
+  ) : (
+    <></>
+  )
+}
+
+export default PlasmoOverlay

locales/en/messages.json

@@ -161,6 +161,9 @@
   "downloadAllImg": {
     "message": "Download All Image"
   },
+  "getArticle": {
+    "message": "Get All Article"
+  },
   "downloading": {
     "message": "Downloading"
   },
@@ -194,6 +197,9 @@
   "weixinConfig": {
     "message": "Wechat Config"
   },
+  "paywallbusterConfig": {
+    "message": "Paywallbuster Config"
+  },
   "fullPageScreenshot": {
     "message": "Full Page Screenshot"
   },

locales/zh_CN/messages.json

@@ -167,6 +167,9 @@
   "downloadAllImg": {
     "message": "下载所有图片"
   },
+  "getArticle": {
+    "message": "获取全文"
+  },
   "downloading": {
     "message": "正在下载"
   },
@@ -197,6 +200,9 @@
   "weixinConfig": {
     "message": "微信设置"
   },
+  "paywallbusterConfig": {
+    "message": "paywallbuster设置"
+  },
   "fullPageScreenshot": {
     "message": "全页面截图"
   },

package.json

@@ -1,7 +1,7 @@
 {
   "name": "code-box",
   "displayName": "__MSG_extensionName__",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "__MSG_extensionDescription__",
   "author": "027xiguapi. <458813868@qq.com>",
   "scripts": {
@@ -36,7 +36,7 @@
     "html2canvas": "^1.4.1",
     "jssha": "^3.3.1",
     "jszip": "^3.10.1",
-    "plasmo": "0.89.4",
+    "plasmo": "0.90.3",
     "qrcode": "^1.5.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -52,7 +52,7 @@
     "postcss-modules": "^4.3.0",
     "prettier": "3.2.4",
     "sass": "^1.77.8",
-    "sharp": "^0.33.4",
+    "sharp": "^0.33.5",
     "typescript": "5.3.3"
   },
   "manifest": {