Files
code-box-1/component/options/content.tsx
2025-03-08 20:40:18 +08:00

106 lines
4.5 KiB
TypeScript

import React, { useEffect, useRef, useState } from "react"
import Cto51 from "~component/options/51cto"
import Baidu from "~component/options/baidu"
import Cnblogs from "~component/options/cnblogs"
import Config from "~component/options/config"
import Csdn from "~component/options/csdn"
import Custom from "~component/options/custom"
import Jb51 from "~component/options/jb51"
import Jianshu from "~component/options/jianshu"
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"
import Zhihu from "~component/options/zhihu"
export default function Content() {
const [csdnIsShow, setCsdnIsShow] = useState<boolean>(false)
const [zhihuIsShow, setZhihuIsShow] = useState<boolean>(false)
const [baiduIsShow, setBaiduIsShow] = useState<boolean>(false)
const [jianshuIsShow, setJianshuIsShow] = useState<boolean>(false)
const [jb51IsShow, setJb51IsShow] = useState<boolean>(false)
const [cnblogsIsShow, setCnblogsShow] = useState<boolean>(false)
const [ctoIsShow, set51ctoIsShow] = useState<boolean>(false)
const [juejinIsShow, setJuejinIsShow] = useState<boolean>(false)
const [phpIsShow, setPhpIsShow] = useState<boolean>(false)
const [oschinaIsShow, setOschinaIsShow] = useState<boolean>(false)
const [segmentfaultIsShow, setSegmentfaultIsShow] = useState<boolean>(false)
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>()
const baiduRef = useRef<any>()
const juejinRef = useRef<any>()
const oschinaRef = useRef<any>()
const jianshuRef = useRef<any>()
const jb51Ref = useRef<any>()
const cnblogsRef = useRef<any>()
const cto51Ref = useRef<any>()
const phpRef = useRef<any>()
const segmentfaultRef = useRef<any>()
const weixinRef = useRef<any>()
const customRef = useRef<any>()
const appRef = useRef<any>()
useEffect(() => {
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
const currentTab = tabs[0]
if (currentTab) {
const url = new URL(currentTab.url)
const { hostname, pathname } = url
hostname.includes("csdn") && setCsdnIsShow(true)
hostname.includes("zhihu") && setZhihuIsShow(true)
hostname.includes("baidu") && setBaiduIsShow(true)
hostname.includes("jianshu") && setJianshuIsShow(true)
hostname.includes("jb51") && setJb51IsShow(true)
hostname.includes("cnblogs") && setCnblogsShow(true)
hostname.includes("51cto") && set51ctoIsShow(true)
hostname.includes("juejin") && setJuejinIsShow(true)
hostname.includes("php") && setPhpIsShow(true)
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)
} else {
setWeixinIsShow(true)
}
}
}
})
}, [])
return (
<div className="content">
{csdnIsShow ? <Csdn forwardRef={csdnRef} /> : <></>}
{zhihuIsShow ? <Zhihu forwardRef={zhihuRef} /> : <></>}
{baiduIsShow ? <Baidu forwardRef={baiduRef} /> : <></>}
{jianshuIsShow ? <Jianshu forwardRef={juejinRef} /> : <></>}
{jb51IsShow ? <Jb51 forwardRef={jb51Ref} /> : <></>}
{cnblogsIsShow ? <Cnblogs forwardRef={cnblogsRef} /> : <></>}
{ctoIsShow ? <Cto51 forwardRef={cto51Ref} /> : <></>}
{juejinIsShow ? <Juejin /> : <></>}
{phpIsShow ? <Php forwardRef={phpRef} /> : <></>}
{oschinaIsShow ? <Oschina /> : <></>}
{segmentfaultIsShow ? <Segmentfault /> : <></>}
{weixinIsShow ? <Weixin /> : <></>}
{mediumIsShow ? <Medium /> : <></>}
{mpIsShow ? <Mp /> : <></>}
{paywallbusterIsShow ? <Paywallbuster /> : <></>}
<Custom />
<Config forwardRef={customRef} />
</div>
)
}