Chrome扩展中insertAdjacentElement仅刷新页面后生效问题求助

核心问题 #

1. HTML转义错误：你在testDiv.innerHTML中使用了<和>转义字符，浏览器会将其解析为纯文本而非HTML元素，导致插入的内容无法正常渲染。
2. SPA页面DOM渲染时机：LinkedIn是单页应用，URL变化时页面不会完全刷新，document.readyState === "complete"仅代表初始页面加载完成，不意味着目标元素.t-14已经渲染到DOM中。
3. 重复执行逻辑：每次URL变化都会调用AddContainer，可能重复添加样式和元素，引发冗余或冲突。

修正后的代码 #

export const config: PlasmoCSConfig = {
  matches: ["https://www.linkedin.com/*"],
  all_frames: true
}

let lastUrl = location.href
const urlObserver = new MutationObserver(() => {
  const url = location.href
  if (url !== lastUrl) {
    lastUrl = url
    onUrlChange()
  }
})
urlObserver.observe(document, { subtree: true, childList: true })

function onUrlChange() {
  if (window.location.pathname.includes("/jobs/search/")) {
    waitForElement(".t-14").then((targetElement) => {
      GhostOverview(targetElement)
    })
  }
}

// 等待目标元素出现的工具函数
function waitForElement(selector: string): Promise<Element> {
  return new Promise((resolve) => {
    const existingElement = document.querySelector(selector)
    if (existingElement) {
      resolve(existingElement)
      return
    }

    const observer = new MutationObserver((mutations) => {
      const element = document.querySelector(selector)
      if (element) {
        observer.disconnect()
        resolve(element)
      }
    })
    observer.observe(document.body, { subtree: true, childList: true })
  })
}

function AddContainer(targetElement: Element) {
  // 避免重复添加样式
  if (!document.querySelector("#ghost-extension-style")) {
    const style_element = document.createElement("style")
    style_element.id = "ghost-extension-style"
    style_element.innerHTML = `
      .ghost-container {
        width: 500px;
        border: 1px solid rgba(0, 0, 0, .5);  
        border-radius: 5px;
        margin-top: 30px;
        padding-top: 10px;
        padding-left: 10px;
        padding-bottom: 10px;
      } 
      .ghost-header {
        color: black;
        font-size: 18px; 
        font-weight: bold;
      }
    `
    document.head.appendChild(style_element)
  }

  // 避免重复插入元素
  if (!targetElement.nextElementSibling?.classList.contains("ghost-container")) {
    const testDiv = document.createElement("div")
    testDiv.className = "ghost-container"
    // 直接使用HTML标签，无需转义
    testDiv.innerHTML = '<h2 class="ghost-header">Header</h2>'
    targetElement.insertAdjacentElement("afterend", testDiv)
  }
}

export default function GhostOverview(targetElement: Element) {
  AddContainer(targetElement)
  // 其他业务逻辑...
}

关键修正点说明 #

• 修复HTML解析问题：将转义字符</>替换为真实的</>，确保innerHTML能正确解析为HTML元素。
• 精准等待DOM元素：通过waitForElement函数，用MutationObserver监听目标元素的出现，保证插入操作时DOM已准备就绪。
• 避免重复操作：给样式元素添加唯一ID做存在校验；同时检查目标元素的下一个兄弟节点是否为已插入的容器，防止重复创建。
• 优化URL触发逻辑：直接在onUrlChange中判断页面路径，减少不必要的函数调用层级。

内容的提问来源于stack exchange，提问作者Defaced.Face