初始化

src/contents/sidebar.tsx

@@ -0,0 +1,56 @@
+/**
+ * Content Script - 侧边栏入口
+ * 该脚本会被注入到所有网页中，负责渲染侧边栏面板
+ * 使用 Plasmo 的 Content Script UI 功能，通过 Shadow DOM 实现样式隔离
+ */
+
+import styleText from "data-text:~components/SidebarPanel.scss"
+import type { PlasmoCSConfig, PlasmoGetStyle } from "plasmo"
+import { useEffect, useState } from "react"
+import { SidebarPanel } from "~components/SidebarPanel"
+
+/** Content Script 配置：匹配所有网页 */
+export const config: PlasmoCSConfig = {
+  matches: ["<all_urls>"]
+}
+
+/**
+ * 将 SCSS 编译后的样式注入到 Shadow DOM 中
+ * 这样插件的样式不会影响宿主页面，也不会被宿主页面的样式影响
+ */
+export const getStyle: PlasmoGetStyle = () => {
+  const style = document.createElement("style")
+  style.textContent = styleText
+  return style
+}
+
+/**
+ * 侧边栏根组件
+ * 监听来自 Background Service Worker 的消息，控制面板的显示/隐藏
+ */
+function Sidebar() {
+  /** 侧边栏是否可见 */
+  const [visible, setVisible] = useState(false)
+
+  useEffect(() => {
+    /**
+     * 消息监听器：接收来自 background 或 popup 的消息
+     * 当收到 TOGGLE_SIDEBAR 消息时，切换侧边栏的显示状态
+     */
+    const handler = (message: any) => {
+      if (message.type === "TOGGLE_SIDEBAR") {
+        setVisible((prev) => !prev)
+      }
+    }
+    chrome.runtime.onMessage.addListener(handler)
+    // 组件卸载时移除监听器，防止内存泄漏
+    return () => chrome.runtime.onMessage.removeListener(handler)
+  }, [])
+
+  // 不可见时不渲染任何内容
+  if (!visible) return null
+
+  return <SidebarPanel onClose={() => setVisible(false)} />
+}
+
+export default Sidebar