renciy/code-box
1
0
Fork 0
mirror of https://github.com/027xiguapi/code-box.git synced 2026-09-26 09:08:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

增加侧边栏

Browse Source
This commit is contained in:
fzk
2024-09-24 16:58:05 +08:00
parent 8cf2636443
commit 12f2aa8bfd
11 changed files with 208 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
background/index.ts
+28
View File
@@ -24,3 +24,31 @@ chrome.runtime.requestUpdateCheck(function (status, details) {
console.log("更新检查被限流。")
}
})
chrome.tabs.onUpdated.addListener((tabId, _, tab) => {
// console.log(tabId, _, tab)
// if (!("sidePanel" in chrome)) {
// return
// }
//
// void (async () => {
// if (!tab.url) {
// return
// }
// // const url = new URL(tab.url)
// // if (
// // url.origin === ""
// // ) {
// // await chrome.sidePanel.setOptions({
// // tabId,
// // // path: "pages/options.html",
// // enabled: true
// // })
// // } else {
// // await chrome.sidePanel.setOptions({
// // tabId,
// // enabled: false
// // })
// // }
// })()
})
background/messages/sidepanel.ts
+9
View File
@@ -0,0 +1,9 @@
import type { PlasmoMessaging } from "@plasmohq/messaging"
const handler: PlasmoMessaging.MessageHandler = (req, res) => {
chrome.tabs.query({ active: true, currentWindow: true }, ([tab]) => {
chrome.sidePanel.open({ tabId: tab.id })
})
}
export default handler
component/options/content.tsx
+10 -3
View File
@@ -1,6 +1,7 @@
import React, { useEffect, useState } from "react"
import { sendToContentScript } from "@plasmohq/messaging"
import { useStorage } from "@plasmohq/storage/dist/hook"
import Cto51 from "~component/options/51cto"
import Baidu from "~component/options/baidu"
@@ -18,6 +19,7 @@ import Weixin from "~component/options/weixin"
import Zhihu from "~component/options/zhihu"
export default function Content() {
const [closeLog] = useStorage("config-closeLog", true)
const [csdnIsShow, setCsdnIsShow] = useState<boolean>(false)
const [zhihuIsShow, setZhihuIsShow] = useState<boolean>(false)
const [baiduIsShow, setBaiduIsShow] = useState<boolean>(false)
@@ -64,9 +66,14 @@ export default function Content() {
custom: setCustomIsShow
}
async function getIsShow(type) {
const res = await sendToContentScript({ name: `${type}-isShow` })
res?.isShow && setIsShowMap[type] && setIsShowMap[type](res.isShow)
function getIsShow(type) {
sendToContentScript({ name: `${type}-isShow` })
.then((res) => {
res?.isShow && setIsShowMap[type] && setIsShowMap[type](res.isShow)
})
.catch((err) => {
closeLog || console.log("getIsShow", err)
})
}
return (
component/options/custom.tsx
+9 -5
View File
@@ -11,18 +11,22 @@ export default function Custom() {
v === undefined ? false : v
)
const [cssCode, setCssCode] = useStorage("custom-cssCode")
const [closeLog] = useStorage("config-closeLog", true)
const [codes, setCodes] = useState([])
useEffect(() => {
if (window.location.protocol != "chrome-extension:") {
getCodes()
}
getCodes()
}, [])
async function getCodes() {
const res = await sendToContentScript({ name: `custom-getCodes` })
res?.codes && setCodes(res?.codes)
sendToContentScript({ name: `custom-getCodes` })
.then((res) => {
res?.codes && setCodes(res?.codes)
})
.catch((err) => {
closeLog || console.log("getCodes", err)
})
}
function downloadCode(index) {
contents/custom.tsx
+8 -4
View File
@@ -173,9 +173,11 @@ export default function CustomOverlay() {
target.classList.add("codebox-current")
event.stopPropagation()
event.preventDefault()
if (confirm("是否下载？")) {
handleDownload()
}
setTimeout(() => {
if (confirm("是否下载？")) {
handleDownload()
}
}, 1000)
}
})
}
@@ -209,7 +211,6 @@ export default function CustomOverlay() {
function handleDownload() {
const currentDom = document.querySelector(".codebox-current")
removeCurrentDom()
setIsCurrentDom(false)
if (isDownloadType == "html") {
downloadHtml(currentDom)
} else if (isDownloadType == "markdown") {
@@ -219,6 +220,9 @@ export default function CustomOverlay() {
} else if (isDownloadType == "img") {
downloadImg(currentDom)
}
isReady = false
isSelect = false
setIsCurrentDom(false)
}
function handleConfirm() {
locales/en/messages.json
+3
View File
@@ -11,6 +11,9 @@
"history": {
"message": "Historical records"
},
"sidePanel": {
"message": "Side Panel"
},
"more": {
"message": "More settings"
},
locales/zh_CN/messages.json
+3
View File
@@ -11,6 +11,9 @@
"history": {
"message": "历史记录"
},
"sidePanel": {
"message": "侧边栏"
},
"more": {
"message": "更多设置"
},
package.json
+1 -1
View File
@@ -1,7 +1,7 @@
{
"name": "code-box",
"displayName": "__MSG_extensionName__",
"version": "0.7.1",
"version": "0.7.2",
"description": "__MSG_extensionDescription__",
"author": "027xiguapi. <458813868@qq.com>",
"scripts": {
popup/index.tsx
+16
View File
@@ -4,7 +4,18 @@ import { i18n } from "~tools"
import "~index.css"
import { sendToBackground } from "@plasmohq/messaging"
export default function IndexPopup() {
function hanleOpenSidePanel() {
sendToBackground({
name: "sidepanel",
body: {
active: true
}
})
}
return (
<ThemeProvider>
<div className="App popup">
@@ -16,6 +27,11 @@ export default function IndexPopup() {
<Content />
</div>
<div className="App-link">
<div className="item">
<a className="btn" href="#" onClick={hanleOpenSidePanel}>
{i18n("sidePanel")}😀
</a>
</div>
<div className="item">
<a
className="btn"
sidepanel/index.module.scss
+38
View File
@@ -0,0 +1,38 @@
.sidepanel {
margin: 0 auto;
padding: 10px 15px;
:global {
.wechat {
text-align: center;
.wechatDesc {
font-size: 14px;
color: red;
}
.wechatImg {
margin: 0 auto;
width: 150px;
}
}
.item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
font-size: 16px;
}
.item.download {
cursor: pointer;
}
.item.code {
cursor: pointer;
height: 20px;
}
.item.code .codeTxt {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: auto;
flex: 1;
}
}
}
sidepanel/index.tsx
+83
View File
@@ -0,0 +1,83 @@
import { ThemeProvider } from "~theme"
import "~index.css"
import {
DownloadOutlined,
KeyOutlined,
PushpinOutlined
} from "@ant-design/icons"
import { Button, Input, Space } from "antd"
import qrcodeUrl from "raw:~/public/wx/qrcode_wx.jpg"
import { useEffect, useState } from "react"
import { sendToContentScript } from "@plasmohq/messaging"
import { useStorage } from "@plasmohq/storage/dist/hook"
import styles from "./index.module.scss"
function IndexSidePanel() {
const [codes, setCodes] = useState([])
const [closeLog] = useStorage("config-closeLog", true)
useEffect(() => {
getCodes()
}, [])
async function getCodes() {
sendToContentScript({ name: `custom-getCodes` })
.then((res) => {
res?.codes && setCodes(res?.codes)
})
.catch((err) => {
closeLog || console.log("getCodes", err)
})
}
function pinCode(index) {
sendToContentScript({ name: `custom-scrollIntoViewCode`, body: { index } })
}
function downloadCode(index) {
sendToContentScript({ name: `custom-downloadCode`, body: { index } })
}
function handleSubmit() {}
return (
<ThemeProvider>
<div className={`${styles.sidepanel}`}>
<div className="wechat">
<h1>微信公众号</h1>
<p className="wechatDesc">关注公众号，了解更多功能</p>
<img className="wechatImg" src={qrcodeUrl} alt="微信公众号" />
<Space.Compact style={{ width: "100%" }}>
<Input placeholder="输入激活码" prefix={<KeyOutlined />} />
<Button type="primary" onClick={handleSubmit}>
提交
</Button>
</Space.Compact>
</div>
{codes.map((code, index) => (
<div className="item code" onClick={() => pinCode(index)} key={index}>
<span className="codeTxt">
{index + 1}-{JSON.stringify(code)}
</span>
<PushpinOutlined
style={{ color: "#52c41a", fontSize: "16px", marginLeft: "10px" }}
className="download"
onClick={() => pinCode(index)}
/>
<DownloadOutlined
style={{ color: "#52c41a", fontSize: "16px", marginLeft: "10px" }}
className="download"
onClick={() => downloadCode(index)}
/>
</div>
))}
</div>
</ThemeProvider>
)
}
export default IndexSidePanel