插入自定义样式

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>
+  )
+}