Merge pull request #18 from dr-forget/feat/inject

feat: 优化注入代码执行顺序 添加自定义注入标识

src/App.tsx

@@ -1,10 +1,11 @@
 import { useQuery } from "@tanstack/react-query"
-import React, { useCallback, useEffect } from "react"
+import React, { useEffect } from "react"
 import { useTranslation } from "react-i18next"
 import { Route, BrowserRouter as Router, Routes } from "react-router-dom"
 
 import Footer from "./components/Footer"
 import Header from "./components/Header"
+import { InjectContext } from "./lib/inject"
 import { fetchSetting } from "./lib/nezha-api"
 import { cn } from "./lib/utils"
 import ErrorPage from "./pages/ErrorPage"
@@ -21,40 +22,6 @@ const App: React.FC = () => {
   })
   const { i18n } = useTranslation()
 
-  const InjectContext = useCallback((content: string) => {
-    const tempDiv = document.createElement("div")
-    tempDiv.innerHTML = content
-
-    const handlers: { [key: string]: (element: HTMLElement) => void } = {
-      SCRIPT: (element) => {
-        const script = document.createElement("script")
-        if ((element as HTMLScriptElement).src) {
-          script.src = (element as HTMLScriptElement).src
-        } else {
-          script.textContent = element.textContent
-        }
-        document.body.appendChild(script)
-      },
-      STYLE: (element) => {
-        const style = document.createElement("style")
-        style.textContent = element.textContent
-        document.head.appendChild(style)
-      },
-      DEFAULT: (element) => {
-        document.body.appendChild(element)
-      },
-    }
-
-    Array.from(tempDiv.childNodes).forEach((node) => {
-      if (node.nodeType === Node.ELEMENT_NODE) {
-        const element = node as HTMLElement
-        ;(handlers[element.tagName] || handlers.DEFAULT)(element)
-      } else if (node.nodeType === Node.TEXT_NODE) {
-        document.body.appendChild(document.createTextNode(node.textContent || ""))
-      }
-    })
-  }, [])
-
   useEffect(() => {
     if (settingData?.data?.custom_code) {
       InjectContext(settingData?.data?.custom_code)

src/lib/inject.ts

@@ -0,0 +1,109 @@
+export const InjectContext = (content: string) => {
+  const tempDiv = document.createElement("div")
+  tempDiv.innerHTML = content
+
+  const INJECTION_MARK = "data-injected" // 自定义属性标识
+
+  // 清理已有的注入资源
+  const cleanInjectedResources = () => {
+    document.querySelectorAll(`[${INJECTION_MARK}]`).forEach((node) => node.remove())
+  }
+
+  const loadExternalScript = (scriptElement: HTMLScriptElement): Promise<void> => {
+    return new Promise((resolve, reject) => {
+      const script = document.createElement("script")
+      script.src = scriptElement.src
+      script.async = false // 保持顺序执行
+      script.setAttribute(INJECTION_MARK, "true") // 添加标识
+      script.onload = () => resolve()
+      script.onerror = () => reject(new Error(`Failed to load script: ${scriptElement.src}`))
+      document.head.appendChild(script)
+    })
+  }
+
+  const executeInlineScript = (scriptElement: HTMLScriptElement): void => {
+    const script = document.createElement("script")
+    script.textContent = scriptElement.textContent
+    script.setAttribute(INJECTION_MARK, "true") // 添加标识
+    document.body.appendChild(script)
+  }
+
+  const loadStyle = (styleElement: HTMLStyleElement): Promise<void> => {
+    return new Promise((resolve, reject) => {
+      if ((styleElement as any).href) {
+        // 处理 <link>
+        const link = document.createElement("link")
+        link.rel = "stylesheet"
+        link.href = (styleElement as any).href
+        link.setAttribute(INJECTION_MARK, "true") // 添加标识
+        link.onload = () => resolve()
+        link.onerror = () => reject(new Error(`Failed to load stylesheet: ${link.href}`))
+        document.head.appendChild(link)
+      } else {
+        const style = document.createElement("style")
+        style.textContent = styleElement.textContent
+        style.setAttribute(INJECTION_MARK, "true") // 添加标识
+        document.head.appendChild(style)
+        resolve()
+      }
+    })
+  }
+
+  const handlers: { [key: string]: (element: HTMLElement) => Promise<void> } = {
+    SCRIPT: (element) => {
+      const scriptElement = element as HTMLScriptElement
+      if (scriptElement.src) {
+        // 加载外部脚本
+        return loadExternalScript(scriptElement)
+      } else {
+        // 推迟执行内联脚本，后续手动执行
+        return Promise.resolve()
+      }
+    },
+    STYLE: (element) => loadStyle(element as HTMLStyleElement),
+    META: (element) => {
+      const meta = element.cloneNode(true) as HTMLElement
+      meta.setAttribute(INJECTION_MARK, "true") // 添加标识
+      document.head.appendChild(meta) // 将 meta 标签插入到 <head>
+      return Promise.resolve()
+    },
+    DEFAULT: (element) => {
+      element.setAttribute(INJECTION_MARK, "true") // 添加标识
+      document.body.appendChild(element)
+      return Promise.resolve()
+    },
+  }
+
+  // 开始注入前清理已有资源
+  cleanInjectedResources()
+
+  const externalScriptQueue: Promise<void>[] = []
+  const inlineScripts: HTMLScriptElement[] = []
+
+  Array.from(tempDiv.childNodes).forEach((node) => {
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      const element = node as HTMLElement
+      if (element.tagName === "SCRIPT" && !(element as HTMLScriptElement).src) {
+        // 收集内联脚本，稍后执行
+        inlineScripts.push(element as HTMLScriptElement)
+      } else {
+        const handler = handlers[element.tagName] || handlers.DEFAULT
+        externalScriptQueue.push(handler(element))
+      }
+    } else if (node.nodeType === Node.TEXT_NODE) {
+      document.body.appendChild(document.createTextNode(node.textContent || ""))
+    }
+  })
+
+  // 等待外部脚本加载完成后再执行内联脚本
+  return Promise.all(externalScriptQueue)
+    .then(() => {
+      inlineScripts.forEach((script) => executeInlineScript(script))
+    })
+    .then(() => {
+      console.log("All resources have been injected successfully.")
+    })
+    .catch((error) => {
+      console.error("Error during resource injection:", error)
+    })
+}