fix: 修复在iframe下无法拖动sc列表问题

eeelester · Sep 24, 2024 · 861ec89 · 861ec89
1 parent f9b0d1f
commit 861ec89
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 39 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -3,8 +3,8 @@
   "eslint.experimental.useFlatConfig": true,
 
   // Disable the default formatter, use eslint instead
-  "prettier.enable": false,
-  "editor.formatOnSave": false,
+  "prettier.enable": true,
+  "editor.formatOnSave": true,
 
   // Auto fix
   "editor.codeActionsOnSave": {

diff --git a/components/ScList/hook.ts b/components/ScList/hook.ts
@@ -2,8 +2,8 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 type propRef = React.MutableRefObject<HTMLDivElement | undefined | null>
 
-function useMove(ref: propRef) {
-  const height = useMemo(() => document.documentElement.clientHeight, [])
+function useMove(ref: propRef, scDocument: Document) {
+  const height = useMemo(() => scDocument.documentElement.clientHeight, [])
   const [position, setPosition] = useState({ left: 10, bottom: 30, maxHeight: height - 30 })
   const movingRef = useRef(false)
   const lastPositionRef = useRef<{ lastX: number | null, lastY: number | null }>({ lastX: 0, lastY: 0 })
@@ -42,13 +42,13 @@ function useMove(ref: propRef) {
   useEffect(() => {
     const refDom = ref.current
     refDom?.addEventListener('mousedown', handleMouseDown)
-    document.addEventListener('mouseup', handleMouseUp)
-    document.addEventListener('mousemove', handleMouseMove)
+    scDocument.addEventListener('mouseup', handleMouseUp)
+    scDocument.addEventListener('mousemove', handleMouseMove)
 
     return () => {
       refDom?.removeEventListener('mousedown', handleMouseDown)
-      document.removeEventListener('mouseup', handleMouseUp)
-      document.removeEventListener('mousemove', handleMouseMove)
+      scDocument.removeEventListener('mouseup', handleMouseUp)
+      scDocument.removeEventListener('mousemove', handleMouseMove)
     }
   }, [ref, handleMouseDown, handleMouseUp, handleMouseMove])
 

diff --git a/components/ScList/index.tsx b/components/ScList/index.tsx
@@ -24,18 +24,23 @@ interface ScInfo {
   nodeRef: React.RefObject<HTMLDivElement | unknown>
 }
 
-function SCList() {
+interface SCListProps {
+  scDocument: Document
+}
+
+function SCList(props: SCListProps) {
+  const { scDocument } = props
   const [scList, setScList] = useState<ScInfo[]>([])
   const scListRef = useRef<HTMLDivElement>(null)
-  const { left, bottom, maxHeight } = useMove(scListRef)
+  const { left, bottom, maxHeight } = useMove(scListRef, scDocument)
   const timeoutMap = useRef(new Map<number, NodeJS.Timeout>())
 
   const Listener = useCallback((scInfo: ScInfo) => {
     const existDeleteIdList = JSON.parse(sessionStorage.getItem('deleteId') ?? 'null')
     if (Array.isArray(existDeleteIdList) && existDeleteIdList.indexOf(scInfo.id) > -1) {
       console.log(`该id已被删除`)
       return
-    } 
+    }
     setScList(prev => prev.concat({ ...scInfo, nodeRef: createRef() }))
     const { id, time } = scInfo
     if (!timeoutMap.current.has(id)) {

diff --git a/entrypoints/content.tsx b/entrypoints/content.tsx
@@ -17,6 +17,7 @@ export default defineContentScript({
         let switchState: boolean = true
         let isMount = false
         let isFirst = true
+        let isInIframe = false
 
 
         // 判断全屏模式
@@ -58,22 +59,22 @@ export default defineContentScript({
 
             console.log(log)
 
-            if(isFirst){
+            if (isFirst) {
                 injectIframeCss()
                 isFirst = false
             }
-            
+
 
             existElement = document.createElement('div')
-            
+
             const videoDom = getVideoDom()
-            console.log('videoParent',videoDom?.parentNode)
+            console.log('videoParent', videoDom?.parentNode)
             videoDom?.parentNode?.appendChild(existElement)
             root = createRoot(existElement)
-            root.render(<SCList />)
-            // setTimeout(()=>{
+            root.render(<SCList scDocument={isInIframe ? getVideoDomFromIframe().contentDocument as Document : document} />)
+            // setTimeout(() => {
             //     processData(testData)
-            // },1000)
+            // }, 1000)
 
             getInfo()
         }
@@ -127,17 +128,17 @@ export default defineContentScript({
                     const { data: { room_id } = { room_id: 0 } } = res
                     return room_id
                 })
-            
+
             const existingSCList = await fetch(`https://api.live.bilibili.com/xlive/web-room/v1/index/getInfoByRoom?room_id=${roomId}`)
-            .then(response => response.json())
-            .then((res) => {
-                const { data: { super_chat_info:{message_list} }} = res 
-                return message_list
-            })
-            if(Array.isArray(existingSCList) && existingSCList.length){
-                console.log('existingSCList',existingSCList)
-                for(let i of existingSCList){
-                    processData({data:i})
+                .then(response => response.json())
+                .then((res) => {
+                    const { data: { super_chat_info: { message_list } } } = res
+                    return message_list
+                })
+            if (Array.isArray(existingSCList) && existingSCList.length) {
+                console.log('existingSCList', existingSCList)
+                for (let i of existingSCList) {
+                    processData({ data: i })
                 }
             }
 
@@ -158,27 +159,24 @@ export default defineContentScript({
             })
         }
 
-         // 获取跟video的父级dom（B站video的父级dom结构老是变，有病的！）
-        function getVideoDom(){
+        // 获取跟video的父级dom（B站video的父级dom结构老是变，有病的！）
+        function getVideoDom() {
             return document.querySelector('video') || getVideoDomFromIframe()?.contentDocument?.querySelector('video')
         }
 
-        function getVideoDomFromIframe(){
+        function getVideoDomFromIframe() {
             return Array.from(document.querySelectorAll('iframe')).filter(item => item.allowFullscreen)[0]
         }
 
         // 有时候video在iframe里面，content-script.css的样式没法应用到里面去，所以将其应用到iframe head中
-        function injectIframeCss(){
+        function injectIframeCss() {
             const videoIframe = getVideoDomFromIframe()
-            if(videoIframe?.contentDocument?.querySelector('video')){
+            if (videoIframe?.contentDocument?.querySelector('video')) {
                 console.log('--------video在iframe里面，需要手动在iframe中注入样式文件---------')
                 // @ts-ignore
-                console.log(`extension css文件路径：`,browser.runtime.getURL('/content-scripts/content.css'))
+                console.log(`extension css文件路径：`, browser.runtime.getURL('/content-scripts/content.css'))
 
-                // browser.scripting.insertCSS({
-                //     target: { frameIds: [123456] },
-                //     files: ['content.css']
-                //   });
+                isInIframe = true
                 const link = videoIframe.contentDocument.createElement('link');
                 link.rel = 'stylesheet';
 
@@ -189,7 +187,7 @@ export default defineContentScript({
         }
 
         // 监听popup信息
-        browser.runtime.onMessage.addListener((request: { switchState: boolean }, _, sendResponse:(str:string)=>void) => {
+        browser.runtime.onMessage.addListener((request: { switchState: boolean }, _, sendResponse: (str: string) => void) => {
             switchState = request.switchState
             sendResponse('content got!')
         })