From 8da598bedeab38604502a02feee50cdf61cf961f Mon Sep 17 00:00:00 2001 From: Forget Date: Wed, 18 Dec 2024 10:05:14 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96script=E8=84=9A?= =?UTF-8?q?=E6=9C=AC=E6=89=A7=E8=A1=8C=E6=9C=BA=E5=88=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/lib/inject.ts | 133 ++++++++++++++++++++++------------------------ 1 file changed, 64 insertions(+), 69 deletions(-) diff --git a/src/lib/inject.ts b/src/lib/inject.ts index 81705fb..97b5c7d 100644 --- a/src/lib/inject.ts +++ b/src/lib/inject.ts @@ -1,104 +1,99 @@ export const InjectContext = (content: string) => { - const tempDiv = document.createElement("div") - tempDiv.innerHTML = content + const tempDiv = document.createElement("div"); + tempDiv.innerHTML = content; - const INJECTION_MARK = "data-injected" // 自定义属性标识 + const INJECTION_MARK = "data-injected"; // 自定义属性标识 // 清理已有的注入资源 const cleanInjectedResources = () => { - document.querySelectorAll(`[${INJECTION_MARK}]`).forEach((node) => node.remove()) - } + document.querySelectorAll(`[${INJECTION_MARK}]`).forEach((node) => node.remove()); + }; const loadExternalScript = (scriptElement: HTMLScriptElement): Promise => { 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 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 executeInlineScript = (scriptContent: string): Promise => { + return new Promise((resolve) => { + const script = document.createElement("script"); + script.textContent = scriptContent; + script.setAttribute(INJECTION_MARK, "true"); // 添加标识 + document.body.appendChild(script); + resolve(); + }); + }; const loadStyle = (styleElement: HTMLStyleElement): Promise => { return new Promise((resolve, reject) => { if ((styleElement as any).href) { // 处理 - 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) + 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 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 } = { SCRIPT: (element) => { - const scriptElement = element as HTMLScriptElement + const scriptElement = element as HTMLScriptElement; if (scriptElement.src) { // 加载外部脚本 - return loadExternalScript(scriptElement) + return loadExternalScript(scriptElement); } else { - // 推迟执行内联脚本，后续手动执行 - return Promise.resolve() + // 执行内联脚本 + return executeInlineScript(scriptElement.textContent || ""); } }, 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 标签插入到 - return Promise.resolve() + const meta = element.cloneNode(true) as HTMLElement; + meta.setAttribute(INJECTION_MARK, "true"); // 添加标识 + document.head.appendChild(meta); // 将 meta 标签插入到 + return Promise.resolve(); }, DEFAULT: (element) => { - element.setAttribute(INJECTION_MARK, "true") // 添加标识 - document.body.appendChild(element) - return Promise.resolve() + element.setAttribute(INJECTION_MARK, "true"); // 添加标识 + document.body.appendChild(element); + return Promise.resolve(); }, - } + }; // 开始注入前清理已有资源 - cleanInjectedResources() + cleanInjectedResources(); - const externalScriptQueue: Promise[] = [] - - 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) { - // 直接执行内联脚本 - executeInlineScript(element as HTMLScriptElement) - } else { - const handler = handlers[element.tagName] || handlers.DEFAULT - externalScriptQueue.push(handler(element)) + const executeSequentially = async () => { + for (const node of Array.from(tempDiv.childNodes)) { + if (node.nodeType === Node.ELEMENT_NODE) { + const element = node as HTMLElement; + const handler = handlers[element.tagName] || handlers.DEFAULT; + await handler(element); // 按顺序等待当前脚本或资源完成处理 + } else if (node.nodeType === Node.TEXT_NODE) { + document.body.appendChild(document.createTextNode(node.textContent || "")); } - } else if (node.nodeType === Node.TEXT_NODE) { - document.body.appendChild(document.createTextNode(node.textContent || "")) } - }) + console.log("All resources have been injected and executed in sequence."); + }; - return Promise.all(externalScriptQueue) - .then(() => { - console.log("All resources have been injected successfully.") - }) - .catch((error) => { - console.error("Error during resource injection:", error) - }) -} + return executeSequentially().catch((error) => { + console.error("Error during resource injection:", error); + }); +}; \ No newline at end of file From 0f6787e081d67f309d3444975c5db5875034e05a Mon Sep 17 00:00:00 2001 From: dr-forget Date: Wed, 18 Dec 2024 02:06:47 +0000 Subject: [PATCH 2/2] chore: auto-fix linting and formatting issues --- src/lib/inject.ts | 112 +++++++++++++++++++++++----------------------- 1 file changed, 56 insertions(+), 56 deletions(-) diff --git a/src/lib/inject.ts b/src/lib/inject.ts index 97b5c7d..8d696f0 100644 --- a/src/lib/inject.ts +++ b/src/lib/inject.ts @@ -1,99 +1,99 @@ export const InjectContext = (content: string) => { - const tempDiv = document.createElement("div"); - tempDiv.innerHTML = content; + const tempDiv = document.createElement("div") + tempDiv.innerHTML = content - const INJECTION_MARK = "data-injected"; // 自定义属性标识 + const INJECTION_MARK = "data-injected" // 自定义属性标识 // 清理已有的注入资源 const cleanInjectedResources = () => { - document.querySelectorAll(`[${INJECTION_MARK}]`).forEach((node) => node.remove()); - }; + document.querySelectorAll(`[${INJECTION_MARK}]`).forEach((node) => node.remove()) + } const loadExternalScript = (scriptElement: HTMLScriptElement): Promise => { 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 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 = (scriptContent: string): Promise => { return new Promise((resolve) => { - const script = document.createElement("script"); - script.textContent = scriptContent; - script.setAttribute(INJECTION_MARK, "true"); // 添加标识 - document.body.appendChild(script); - resolve(); - }); - }; + const script = document.createElement("script") + script.textContent = scriptContent + script.setAttribute(INJECTION_MARK, "true") // 添加标识 + document.body.appendChild(script) + resolve() + }) + } const loadStyle = (styleElement: HTMLStyleElement): Promise => { return new Promise((resolve, reject) => { if ((styleElement as any).href) { // 处理 - 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); + 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 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 } = { SCRIPT: (element) => { - const scriptElement = element as HTMLScriptElement; + const scriptElement = element as HTMLScriptElement if (scriptElement.src) { // 加载外部脚本 - return loadExternalScript(scriptElement); + return loadExternalScript(scriptElement) } else { // 执行内联脚本 - return executeInlineScript(scriptElement.textContent || ""); + return executeInlineScript(scriptElement.textContent || "") } }, 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 标签插入到 - return Promise.resolve(); + const meta = element.cloneNode(true) as HTMLElement + meta.setAttribute(INJECTION_MARK, "true") // 添加标识 + document.head.appendChild(meta) // 将 meta 标签插入到 + return Promise.resolve() }, DEFAULT: (element) => { - element.setAttribute(INJECTION_MARK, "true"); // 添加标识 - document.body.appendChild(element); - return Promise.resolve(); + element.setAttribute(INJECTION_MARK, "true") // 添加标识 + document.body.appendChild(element) + return Promise.resolve() }, - }; + } // 开始注入前清理已有资源 - cleanInjectedResources(); + cleanInjectedResources() const executeSequentially = async () => { for (const node of Array.from(tempDiv.childNodes)) { if (node.nodeType === Node.ELEMENT_NODE) { - const element = node as HTMLElement; - const handler = handlers[element.tagName] || handlers.DEFAULT; - await handler(element); // 按顺序等待当前脚本或资源完成处理 + const element = node as HTMLElement + const handler = handlers[element.tagName] || handlers.DEFAULT + await handler(element) // 按顺序等待当前脚本或资源完成处理 } else if (node.nodeType === Node.TEXT_NODE) { - document.body.appendChild(document.createTextNode(node.textContent || "")); + document.body.appendChild(document.createTextNode(node.textContent || "")) } } - console.log("All resources have been injected and executed in sequence."); - }; + console.log("All resources have been injected and executed in sequence.") + } return executeSequentially().catch((error) => { - console.error("Error during resource injection:", error); - }); -}; \ No newline at end of file + console.error("Error during resource injection:", error) + }) +}