csdn 功能基本完成

.gitignore

@@ -31,3 +31,8 @@ dist/
 
 # typescript
 .tsbuildinfo
+
+
+.idea
+.vscode
+pnpm-lock.yaml

README.md

@@ -1,33 +1,52 @@
-This is a [Plasmo extension](https://docs.plasmo.com/) project bootstrapped with [`plasmo init`](https://www.npmjs.com/package/plasmo).
+## code-box
 
-## Getting Started
+## 介绍
 
-First, run the development server:
+CSDN博客在未登录状态下无法复制代码，使用这个插件，无需登录可以一键复制csdn代码。
 
-```bash
-pnpm dev
-# or
-npm run dev
-```
+还支持解除`关注博主即可阅读全文`的提示，隐藏登陆弹窗。
 
-Open your browser and load the appropriate development build. For example, if you are developing for the chrome browser, using manifest v3, use: `build/chrome-mv3-dev`.
+完整分析：[谷歌插件：无需登录一键复制 CSDN 代码](https://lwebapp.com/zh/post/copy-csdn)
 
-You can start editing the popup by modifying `popup.tsx`. It should auto-update as you make changes. To add an options page, simply add a `options.tsx` file to the root of the project, with a react component default exported. Likewise to add a content page, add a `content.ts` file to the root of the project, importing some module and do some logic, then reload the extension on your browser.
+## 安装
 
-For further guidance, [visit our Documentation](https://docs.plasmo.com/)
+### 安装方式一：Chrome商店《推荐》
 
-## Making production build
+直接下载安装：
+1. 进入 [Chrome网上应用商店](https://chrome.google.com/webstore/category/extensions?hl=zh-CN)
+2. 搜索：一键复制csdn代码
 
-Run the following:
+![](https://cdn.jsdelivr.net/gh/openHacking/static-files@main/img/1645522384306copy-csdn-web-store.png)
 
-```bash
-pnpm build
-# or
-npm run build
-```
+### 安装方式二：源码安装
 
-This should create a production bundle for your extension, ready to be zipped and published to the stores.
+1. clone源码
+   ```sh
+   git clone https://github.com/027xiguapi/code-box.git
+   ```
+2. 谷歌浏览器，从右上角菜单->更多工具->扩展程序可以进入插件管理页面，也可以直接在地址栏输入 chrome://extensions 访问
+3. 勾选开发者模式，即可以文件夹的形式直接加载插件
 
-## Submit to the webstores
+## 功能
+### CSDN
 
-The easiest way to deploy your Plasmo extension is to use the built-in [bpp](https://bpp.browser.market) GitHub action. Prior to using this action however, make sure to build your extension and upload the first version to the store to establish the basic credentials. Then, simply follow [this setup instruction](https://docs.plasmo.com/framework/workflows/submit) and you should be on your way for automated submission!
+1. 打开任意一个`CSDN`博客即可开始复制代码`CSDN`博客地址
+2. 未登录`CSDN`状态下，支持选中代码
+3. 未登录`CSDN`状态下，代码右上角按钮一键复制
+4. 未登录`CSDN`状态下，不会再出现强制登陆弹窗
+5. 未关注博主状态下，不再提示关注博主即可阅读全文，且完整展示文章
+6. 自动展开代码块，如果不需要自动展开，可以在扩展的`popup`界面中关闭自动展开代码块功能。
+
+## 知乎
+
+1. 打开任意一个`知乎`博客即可开始复制代码`知乎`博客地址
+2. 未登录`知乎`状态下，支持选中代码
+3. 未登录`知乎`状态下，代码右上角按钮一键复制
+4. 未登录`知乎`状态下，不会再出现强制登陆弹窗
+5. 未关注博主状态下，不再提示关注博主即可阅读全文，且完整展示文章
+6. 自动展开代码块，如果不需要自动展开，可以在扩展的`popup`界面中关闭自动展开代码块功能。
+
+## 参考
+
+1. [copy-csdn](https://github.com/openHacking/copy-csdn)
+2. [plasmo](https://github.com/PlasmoHQ/plasmo)

background.ts

@@ -0,0 +1,9 @@
+export {}
+
+chrome.runtime.onInstalled.addListener(function (object) {
+  let externalUrl = "https://github.com/027xiguapi/code-box"
+
+  if (object.reason === chrome.runtime.OnInstalledReason.INSTALL) {
+    chrome.tabs.create({ url: externalUrl })
+  }
+})

contents/csdn.tsx

@@ -0,0 +1,168 @@
+import type { PlasmoCSConfig } from "plasmo"
+import { useEffect, useRef } from "react"
+
+import { useStorage } from "@plasmohq/storage/hook"
+
+export const config: PlasmoCSConfig = {
+  matches: ["https://*.blog.csdn.net/*"]
+}
+
+window.addEventListener("load", () => {
+  console.log("CSDN 加载完成，执行代码")
+})
+
+const csdn = () => {
+  const [closeAds] = useStorage<boolean>("csdn-closeAds")
+  const [copyCode] = useStorage<boolean>("csdn-copyCode")
+  const [closeFollow, setCloseFollow] = useStorage("csdn-closeFollow")
+  const [autoOpenCode] = useStorage<boolean>("csdn-autoOpenCode")
+  const [closeLoginModal] = useStorage<boolean>("csdn-closeLoginModal")
+
+  useEffect(() => {
+    console.log("CSDN closeAds", closeAds)
+    closeAds && closeAdsFunc()
+  }, [closeAds])
+
+  useEffect(() => {
+    console.log("CSDN copyCode", copyCode)
+    if (copyCode) {
+      copyCodeFunc()
+    }
+  }, [copyCode])
+
+  useEffect(() => {
+    console.log("CSDN autoOpenCode", autoOpenCode)
+    if (autoOpenCode) {
+      autoOpenCodeFunc()
+    }
+  }, [autoOpenCode])
+
+  useEffect(() => {
+    console.log("CSDN closeFollow", closeFollow)
+    if (closeFollow) {
+      followFunc()
+    }
+  }, [closeFollow])
+
+  useEffect(() => {
+    console.log("CSDN closeLoginModal", closeLoginModal)
+    if (closeLoginModal) {
+      closeLoginModalFunc()
+    }
+  }, [closeLoginModal])
+
+  /* 未登录复制代码 */
+  function copyCodeCssFunc() {
+    let style = document.createElement("style")
+    style.innerHTML = `
+    #content_views pre,
+    #content_views pre code {
+      -webkit-touch-callout: auto !important;
+      -webkit-user-select: auto !important;
+      -khtml-user-select: auto !important;
+      -moz-user-select: auto !important;
+      -ms-user-select: auto !important;
+      user-select: auto !important;
+    }`
+    document.head.appendChild(style)
+  }
+
+  function copyCodeFunc() {
+    copyCodeCssFunc()
+    // 内容区开启复制
+    var content_views = document.querySelector("#content_views")
+    content_views.replaceWith(content_views.cloneNode(true))
+
+    // 功能一： 修改复制按钮，支持一键复制
+    const buttons = document.querySelectorAll(".hljs-button")
+
+    buttons.forEach((btn) => {
+      // 更改标题
+      btn.dataset.title = "复制"
+
+      // 移除点击事件
+      btn.setAttribute("onclick", "")
+
+      // 克隆按钮
+      var elClone = btn.cloneNode(true)
+
+      // 替回按钮
+      btn.parentNode.replaceChild(elClone, btn)
+
+      // 重新添加点击事件
+      elClone.addEventListener("click", (e) => {
+        // 实现复制
+        const parentPreBlock = e.target.closest("pre")
+        const codeBlock = parentPreBlock.querySelector("code")
+        console.log(parentPreBlock, codeBlock)
+        navigator.clipboard.writeText(codeBlock.innerText)
+
+        e.target.dataset.title = "复制成功"
+        setTimeout(() => {
+          e.target.dataset.title = "复制"
+        }, 1000)
+        e.stopPropagation()
+        e.preventDefault()
+      })
+    })
+  }
+
+  // 关闭广告
+  function closeAdsFunc() {
+    let style = document.createElement("style")
+    style.innerHTML = `
+    .toolbar-advert,
+    #recommendAdBox,
+    .adsbygoogle {
+      display:none !important;
+    }`
+    document.head.appendChild(style)
+  }
+
+  // 解除 关注博主即可阅读全文的提示
+  const followFunc = () => {
+    let readMore = document.querySelector(".btn-readmore")
+    let style = document.createElement("style")
+
+    style.innerHTML = `
+    #article_content{
+      height: auto !important;
+    }
+    .hide-article-box {
+      z-index: -1 !important;
+    }`
+    if (readMore) {
+      document.head.appendChild(style)
+    }
+  }
+
+  // 隐藏登陆弹窗
+  function closeLoginModalFunc() {
+    let style = document.createElement("style")
+    style.innerHTML = `
+    .passport-login-container {
+      display:none !important;
+    }`
+    document.head.appendChild(style)
+  }
+
+  // 自动展开代码块
+  function autoOpenCodeFunc() {
+    const pres = Array.from(
+      document.querySelectorAll("main div.blog-content-box pre.set-code-hide")
+    )
+    const presBox = Array.from(document.querySelectorAll(".hide-preCode-box"))
+
+    pres.forEach((pre) => {
+      pre.style.height = "unset"
+      pre.style.maxHeight = "unset"
+    })
+    presBox.forEach((box) => {
+      box.style.display = "none"
+    })
+  }
+
+  return <div style={{ display: "none" }}></div>
+}
+
+export default csdn

package.json

@@ -10,6 +10,7 @@
     "package": "plasmo package"
   },
   "dependencies": {
+    "@plasmohq/storage": "^1.11.0",
     "plasmo": "0.88.0",
     "react": "18.2.0",
     "react-dom": "18.2.0"

popup.tsx

@@ -1,24 +1,110 @@
-import { useState } from "react"
+import { useEffect, useState } from "react"
+
+import { useStorage } from "@plasmohq/storage/hook"
 
 function IndexPopup() {
-  const [data, setData] = useState("")
+  const [closeAds, setCloseAds] = useStorage("csdn-closeAds", (v) =>
+    v === undefined ? true : v
+  )
+  const [copyCode, setCopyCode] = useStorage("csdn-copyCode", (v) =>
+    v === undefined ? true : v
+  )
+  const [closeFollow, setCloseFollow] = useStorage("csdn-closeFollow", (v) =>
+    v === undefined ? true : v
+  )
+  const [autoOpenCode, setAutoOpenCode] = useStorage(
+    "csdn-autoOpenCode",
+    (v) => (v === undefined ? true : v)
+  )
+  const [closeLoginModal, setCloseLoginModal] = useStorage(
+    "csdn-closeLoginModal",
+    (v) => (v === undefined ? true : v)
+  )
 
   return (
-    <div
-      style={{
-        padding: 16
-      }}>
-      <h2>
-        Welcome to your{" "}
-        <a href="https://www.plasmo.com" target="_blank">
-          Plasmo
-        </a>{" "}
-        Extension!
-      </h2>
-      <input onChange={(e) => setData(e.target.value)} value={data} />
-      <a href="https://docs.plasmo.com" target="_blank">
-        View Docs
-      </a>
+    <div className="App" style={{ width: "160px" }}>
+      <div className="App-header">
+        <h2 style={{ marginBottom: "0" }}>CodeBox 🎉</h2>
+        <p style={{ margin: "5px 0" }}>让代码更容易</p>
+      </div>
+      <div className="App-body">
+        <fieldset>
+          <legend>CSDN设置</legend>
+          <div>
+            <input
+              type="checkbox"
+              id="closeAds"
+              name="closeAds"
+              checked={closeAds}
+              onChange={(e) => setCloseAds(e.target.checked)}
+            />
+            <label htmlFor="closeAds">关闭广告</label>
+          </div>
+          <div>
+            <input
+              type="checkbox"
+              id="copyCode"
+              name="copyCode"
+              checked={copyCode}
+              onChange={(e) => setCopyCode(e.target.checked)}
+            />
+            <label htmlFor="copyCode">一键复制代码</label>
+          </div>
+          <div>
+            <input
+              type="checkbox"
+              id="closeFollow"
+              name="closeFollow"
+              checked={closeFollow}
+              onChange={(e) => setCloseFollow(e.target.checked)}
+            />
+            <label htmlFor="closeFollow">关注阅读全文</label>
+          </div>
+          <div>
+            <input
+              type="checkbox"
+              id="autoOpenCode"
+              name="autoOpenCode"
+              checked={autoOpenCode}
+              onChange={(e) => setAutoOpenCode(e.target.checked)}
+            />
+            <label htmlFor="autoOpenCode">自动展开代码块</label>
+          </div>
+          <div>
+            <input
+              type="checkbox"
+              id="closeLoginModal"
+              name="closeLoginModal"
+              checked={closeLoginModal}
+              onChange={(e) => setCloseLoginModal(e.target.checked)}
+            />
+            <label htmlFor="closeLoginModal">关闭登陆弹窗</label>
+          </div>
+        </fieldset>
+        {/*<fieldset>*/}
+        {/*  <legend>知乎设置:</legend>*/}
+        {/*  <div>*/}
+        {/*    <input type="checkbox" id="autoOpenCode" name="autoOpenCode" />*/}
+        {/*    <label htmlFor="autoOpenCode">自动展开代码块</label>*/}
+        {/*  </div>*/}
+        {/*</fieldset>*/}
+        {/*<fieldset>*/}
+        {/*  <legend>掘金设置:</legend>*/}
+        {/*  <div>*/}
+        {/*    <input type="checkbox" id="autoOpenCode" name="autoOpenCode" />*/}
+        {/*    <label htmlFor="autoOpenCode">自动展开代码块</label>*/}
+        {/*  </div>*/}
+        {/*</fieldset>*/}
+      </div>
+      <div className="App-link" style={{ marginTop: "10px" }}>
+        <a
+          className="btn"
+          href="https://github.com/027xiguapi/code-box"
+          target="_blank"
+          rel="noreferrer">
+          支持作者更新👍
+        </a>
+      </div>
     </div>
   )
 }