插入自定义样式

README.md

@@ -22,7 +22,13 @@ https://github.com/027xiguapi/code-box
 ![img](https://raw.githubusercontent.com/027xiguapi/code-box/main/public/img.png)
 
 
-### 安装方式二：源码安装
+### 安装方式二：安装包
+
+1. 下载地址： https://github.com/027xiguapi/code-box/releases
+2. 谷歌浏览器，从右上角菜单->更多工具->扩展程序可以进入插件管理页面，也可以直接在地址栏输入 chrome://extensions 访问
+3. 勾选开发者模式，即可以文件夹的形式直接加载插件
+
+### 安装方式三：源码安装
 
 1. clone源码
    ```sh
@@ -41,6 +47,10 @@ https://github.com/027xiguapi/code-box
 
 ![img-1](https://raw.githubusercontent.com/027xiguapi/code-box/main/public/img_1.png)
 
+### 自定义
+
+1. 插入自定义样式(css代码)
+
 ### CSDN
 
 1. 打开任意一个`CSDN`博客即可开始复制代码

component/content.tsx

@@ -0,0 +1,19 @@
+import Cnblogs from "./cnblogs"
+import Csdn from "./csdn"
+import Custom from "./custom"
+import Jb51 from "./jb51"
+import Jianshu from "./jianshu"
+import Zhihu from "./zhihu"
+
+export default function Content() {
+  return (
+    <>
+      <Csdn />
+      <Zhihu />
+      <Jianshu />
+      <Jb51 />
+      <Cnblogs />
+      <Custom />
+    </>
+  )
+}

component/custom.tsx

@@ -0,0 +1,34 @@
+import { useStorage } from "@plasmohq/storage/hook"
+
+export default function Custom() {
+  const [runCss, setRunCss] = useStorage("custom-runCss", (v) =>
+    v === undefined ? false : v
+  )
+  const [cssCode, setCssCode] = useStorage("custom-cssCode", (v) =>
+    v === undefined ? "" : v
+  )
+
+  return (
+    <fieldset>
+      <legend>自定义设置</legend>
+      <div className="item">
+        <span>页面插入css代码</span>
+        <input
+          type="checkbox"
+          id="custom-runCss"
+          name="custom-runCss"
+          className="codebox-offscreen"
+          checked={runCss}
+          onChange={(e) => setRunCss(e.target.checked)}
+        />
+        <label className="codebox-switch" htmlFor="custom-runCss"></label>
+      </div>
+      <div className={`item ${runCss ? "" : "hide"}`}>
+        <textarea
+          name="custom-cssCode"
+          defaultValue={cssCode}
+          onChange={(e) => setCssCode(e.target.value)}></textarea>
+      </div>
+    </fieldset>
+  )
+}

contents/custom.tsx

@@ -0,0 +1,22 @@
+import { useEffect } from "react"
+
+import { useStorage } from "@plasmohq/storage/hook"
+
+import { addCss } from "~tools"
+
+export default function Custom() {
+  const [runCss] = useStorage<boolean>("custom-runCss")
+  const [cssCode] = useStorage<string>("custom-cssCode")
+
+  useEffect(() => {
+    runCss && runCssFunc()
+  }, [runCss])
+
+  /* 插入自定义css代码 */
+  function runCssFunc() {
+    console.log("插入自定义css代码", cssCode)
+    addCss(cssCode)
+  }
+
+  return <div style={{ display: "none" }}></div>
+}

contents/jb51.tsx

@@ -18,14 +18,10 @@ export default function jb51() {
   const [copyCode] = useStorage<boolean>("jb51-copyCode")
 
   useEffect(() => {
-    console.log("jb51 closeAds", closeAds)
+    console.log("jb51 status", { closeAds, copyCode })
     closeAds && closeAdsFunc()
-  }, [closeAds])
-
-  useEffect(() => {
-    console.log("jb51 copyCode", copyCode)
     copyCode && copyCodeFunc()
-  }, [copyCode])
+  }, [closeAds, copyCode])
 
   /* 未登录复制代码 */
   function copyCodeCssFunc() {

index.css

@@ -1,5 +1,20 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+.hide {
+    display: none !important;
+}
+
+.show {
+    display: block !important;
+}
+
 .App {
-    width: 160px;
+    width: 190px;
+    margin: 0 auto;
+    padding: 5px 8px;
 }
 
 .App-header .title {
@@ -18,6 +33,10 @@
     font-size: 14px;
 }
 
+.App-body fieldset {
+    padding: 5px 8px;
+}
+
 .App-body fieldset .item {
     display: flex;
     justify-content: space-between;
@@ -26,12 +45,16 @@
     font-size: 12px;
 }
 
+.App-body fieldset .item textarea {
+    padding: 5px;
+}
+
 /*开关*/
-.codebox-offscreen{
+.codebox-offscreen {
     display: none;
 }
 
-.codebox-switch{
+.codebox-switch {
     position: relative;
     display: inline-block;
     width: 40px;
@@ -41,7 +64,7 @@
     transition: all 0.3s;
 }
 
-.codebox-switch::after{
+.codebox-switch::after {
     content: "";
     position: absolute;
     width: 18px;
@@ -53,10 +76,10 @@
     transition: all 0.3s;
 }
 
-input[type="checkbox"]:checked+.codebox-switch::after{
+input[type="checkbox"]:checked + .codebox-switch::after {
     transform: translateX(20px);
 }
 
-input[type="checkbox"]:checked+.codebox-switch{
+input[type="checkbox"]:checked + .codebox-switch {
     background-color: #7983ff;
 }

options.tsx

@@ -1,12 +1,8 @@
-import Cnblogs from "./component/cnblogs"
-import Csdn from "./component/csdn"
-import Jb51 from "./component/jb51"
-import Jianshu from "./component/jianshu"
-import Zhihu from "./component/zhihu"
+import Content from "./component/content"
 
 import "./index.css"
 
-function IndexOptions() {
+export default function IndexOptions() {
   return (
     <div className="App">
       <div className="App-header">
@@ -14,11 +10,7 @@ function IndexOptions() {
         <p className="desc">更方便操作网页代码</p>
       </div>
       <div className="App-body">
-        <Csdn />
-        <Zhihu />
-        <Jianshu />
-        <Jb51 />
-        <Cnblogs />
+        <Content />
       </div>
       <div className="App-link">
         <a
@@ -32,5 +24,3 @@ function IndexOptions() {
     </div>
   )
 }
-
-export default IndexOptions

package.json

@@ -1,8 +1,8 @@
 {
   "name": "code-box",
-  "displayName": "codebox-免登录复制代码(CSDN/知乎/脚本之家/博客园)",
-  "version": "0.0.8",
-  "description": "本插件可以用于CSDN/知乎/脚本之家/博客园等网站,实现无需登录一键复制代码;支持选中代码;或者代码右上角按钮的一键复制;解除关注博主即可阅读全文提示;去除登录弹窗;去除跳转APP弹窗.",
+  "displayName": "codebox-免登录一键复制代码(CSDN/知乎/脚本之家/博客园)",
+  "version": "0.1.0",
+  "description": "本插件可以用于CSDN/知乎/脚本之家/博客园等网站,实现无需登录一键复制代码;支持选中代码;或者代码右上角按钮的一键复制;解除关注博主即可阅读全文提示;去除登录弹窗;去除跳转APP弹窗;页面自定义样式.",
   "author": "027xiguapi. <458813868@qq.com>",
   "scripts": {
     "dev": "plasmo dev",

popup.tsx

@@ -1,12 +1,8 @@
-import Cnblogs from "./component/cnblogs"
-import Csdn from "./component/csdn"
-import Jb51 from "./component/jb51"
-import Jianshu from "./component/jianshu"
-import Zhihu from "./component/zhihu"
+import Content from "./component/content"
 
 import "./index.css"
 
-function IndexPopup() {
+export default function IndexPopup() {
   return (
     <div className="App">
       <div className="App-header">
@@ -14,11 +10,7 @@ function IndexPopup() {
         <p className="desc">更方便操作网页代码</p>
       </div>
       <div className="App-body">
-        <Csdn />
-        <Zhihu />
-        <Jianshu />
-        <Jb51 />
-        <Cnblogs />
+        <Content />
       </div>
       <div className="App-link">
         <a
@@ -32,5 +24,3 @@ function IndexPopup() {
     </div>
   )
 }
-
-export default IndexPopup

tools.ts

@@ -1,6 +1,14 @@
-export function addCss(html) {
+export function addCss(code) {
   const style = document.createElement("style")
-  const css = document.createTextNode(html)
+  const css = document.createTextNode(code)
   style.appendChild(css)
   document.head.appendChild(style)
 }
+
+export function addJs(code) {
+  const script = document.createElement("script")
+  // const js = document.createTextNode(`(()=>{${code}})()`)
+  const js = document.createTextNode(code)
+  script.appendChild(js)
+  document.head.appendChild(script)
+}