首次加载bug

README.md

@@ -46,6 +46,10 @@ CSDN博客在未登录状态下无法复制代码，使用这个插件，无需
 5. 未关注博主状态下，不再提示关注博主即可阅读全文，且完整展示文章
 6. 自动展开代码块，如果不需要自动展开，可以在扩展的`popup`界面中关闭自动展开代码块功能。
 
+## 脚本之家
+
+## 博客园
+
 ## 参考
 
 1. [copy-csdn](https://github.com/openHacking/copy-csdn)

background.ts

@@ -1,9 +1,7 @@
 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 })
+    chrome.tabs.create({ url: chrome.runtime.getURL("options.html") })
   }
 })

contents/csdn.tsx

@@ -17,6 +17,7 @@ const csdn = () => {
   const [closeFollow, setCloseFollow] = useStorage("csdn-closeFollow")
   const [autoOpenCode] = useStorage<boolean>("csdn-autoOpenCode")
   const [closeLoginModal] = useStorage<boolean>("csdn-closeLoginModal")
+  const isMount = useRef<boolean>(false)
 
   useEffect(() => {
     console.log("CSDN closeAds", closeAds)
@@ -25,30 +26,22 @@ const csdn = () => {
 
   useEffect(() => {
     console.log("CSDN copyCode", copyCode)
-    if (copyCode) {
-      copyCodeFunc()
-    }
+    copyCode && copyCodeFunc()
   }, [copyCode])
 
   useEffect(() => {
     console.log("CSDN autoOpenCode", autoOpenCode)
-    if (autoOpenCode) {
-      autoOpenCodeFunc()
-    }
+    autoOpenCode && autoOpenCodeFunc()
   }, [autoOpenCode])
 
   useEffect(() => {
     console.log("CSDN closeFollow", closeFollow)
-    if (closeFollow) {
-      followFunc()
-    }
+    closeFollow && followFunc()
   }, [closeFollow])
 
   useEffect(() => {
     console.log("CSDN closeLoginModal", closeLoginModal)
-    if (closeLoginModal) {
-      closeLoginModalFunc()
-    }
+    closeLoginModal && closeLoginModalFunc()
   }, [closeLoginModal])
 
   /* 未登录复制代码 */
@@ -74,7 +67,7 @@ const csdn = () => {
     content_views.replaceWith(content_views.cloneNode(true))
 
     // 功能一： 修改复制按钮，支持一键复制
-    const buttons = document.querySelectorAll(".hljs-button")
+    const buttons = document.querySelectorAll<HTMLElement>(".hljs-button")
 
     buttons.forEach((btn) => {
       // 更改标题
@@ -92,14 +85,15 @@ const csdn = () => {
       // 重新添加点击事件
       elClone.addEventListener("click", (e) => {
         // 实现复制
-        const parentPreBlock = e.target.closest("pre")
+        const target = e.target as HTMLElement
+        const parentPreBlock = target.closest("pre")
         const codeBlock = parentPreBlock.querySelector("code")
-        console.log(parentPreBlock, codeBlock)
+
         navigator.clipboard.writeText(codeBlock.innerText)
 
-        e.target.dataset.title = "复制成功"
+        target.dataset.title = "复制成功"
         setTimeout(() => {
-          e.target.dataset.title = "复制"
+          target.dataset.title = "复制"
         }, 1000)
         e.stopPropagation()
         e.preventDefault()
@@ -149,9 +143,13 @@ const csdn = () => {
   // 自动展开代码块
   function autoOpenCodeFunc() {
     const pres = Array.from(
-      document.querySelectorAll("main div.blog-content-box pre.set-code-hide")
+      document.querySelectorAll<HTMLElement>(
+        "main div.blog-content-box pre.set-code-hide"
+      )
+    )
+    const presBox = Array.from(
+      document.querySelectorAll<HTMLElement>(".hide-preCode-box")
     )
-    const presBox = Array.from(document.querySelectorAll(".hide-preCode-box"))
 
     pres.forEach((pre) => {
       pre.style.height = "unset"

options.tsx

@@ -0,0 +1,86 @@
+import { useStorage } from "@plasmohq/storage/hook"
+
+function IndexOptions() {
+  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={{
+        display: "flex",
+        flexDirection: "column",
+        padding: 16
+      }}>
+      <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>
+    </div>
+  )
+}
+
+export default IndexOptions

package.json

@@ -2,8 +2,8 @@
   "name": "code-box",
   "displayName": "Code box",
   "version": "0.0.1",
-  "description": "A basic Plasmo extension.",
-  "author": "Plasmo Corp. <foss@plasmo.com>",
+  "description": "更方便操作网页代码的插件",
+  "author": "027xiguapi. <458813868@qq.com>",
   "scripts": {
     "dev": "plasmo dev",
     "build": "plasmo build",

popup.tsx

@@ -25,7 +25,7 @@ function IndexPopup() {
     <div className="App" style={{ width: "160px" }}>
       <div className="App-header">
         <h2 style={{ marginBottom: "0" }}>CodeBox 🎉</h2>
-        <p style={{ margin: "5px 0" }}>让代码更容易</p>
+        <p style={{ margin: "5px 0" }}>更方便操作网页代码</p>
       </div>
       <div className="App-body">
         <fieldset>