Chrome扩展：如何在谷歌搜索结果左侧插入元素而非重叠

开发Chrome扩展时，需要在每条谷歌搜索结果左侧插入元素，但当前实现的元素与搜索结果重叠，无法正常显示在左侧。现有注入脚本通过遍历包含<a h3>的元素插入shadow DOM，但样式和插入位置的问题导致重叠。

核心问题在于插入位置错误和元素脱离文档流，调整方向如下：

1. 定位正确的搜索结果容器 #

谷歌搜索的单条结果容器通常是div.g（普通网页结果），而非直接操作<a h3>的父元素。选择这个容器才能确保插入的元素属于整个结果卡片的一部分，而非嵌套在标题内部。

2. 调整元素布局，避免脱离文档流 #

移除shadowContent的position: absolute（会脱离文档流导致重叠），改用float: left或inline-block，同时给搜索结果容器添加左侧间距，为插入元素腾出空间。

修改后的代码 #

import React, { useEffect, useRef } from "react"

function ContentScript() {
  const indexRef = useRef(1)

  useEffect(() => {
    const addShadowDivs = () => {
      // 选择谷歌网页搜索的单条结果容器
      const searchResultContainers = document.querySelectorAll('div.g');

      searchResultContainers.forEach((container) => {
        // 避免重复插入元素
        if (container.querySelector('[data-extension-shadow="true"]')) {
          return;
        }

        const shadowHost = document.createElement("div")
        shadowHost.setAttribute("data-extension-shadow", "true")
        // 设置shadowHost为浮动元素，占据左侧空间
        shadowHost.style.float = "left"
        shadowHost.style.marginRight = "8px" // 和搜索结果保持间距
        shadowHost.style.width = "40px"
        shadowHost.style.height = "100px"

        const shadowRoot = shadowHost.attachShadow({ mode: "open" })
        const shadowContent = document.createElement("div")
        shadowContent.id = indexRef.current.toString()
        shadowContent.className = "content-shadow-dom"
        shadowContent.style.width = "100%"
        shadowContent.style.height = "100%"
        shadowContent.style.textAlign = "center"
        shadowContent.style.backgroundColor = "#f0f0f0"

        indexRef.current += 1
        shadowRoot.appendChild(shadowContent)
        
        // 将shadowHost插入到结果容器的最前面
        container.insertBefore(shadowHost, container.firstChild)
        
        // 给结果容器清除浮动，避免布局混乱
        container.style.overflow = "hidden"
      })
    }

    addShadowDivs()

    // 优化监听范围：仅监听搜索结果主容器#rso，减少性能消耗
    const observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        if (mutation.type === "childList") {
          addShadowDivs()
        }
      })
    })

    const searchResultsArea = document.getElementById('rso')
    if (searchResultsArea) {
      observer.observe(searchResultsArea, { childList: true, subtree: true })
    } else {
      observer.observe(document.body, { childList: true, subtree: true })
    }

    return () => observer.disconnect()
  }, [])

  return null
}

export default ContentScript

关键修改点 #

• 容器选择：从a h3改为div.g，确保操作的是整个搜索结果卡片
• 布局调整：移除position: absolute，用float: left让元素占据文档流空间，避免重叠
• 插入位置：将shadowHost插入到结果容器的第一个子元素位置，而非标题内部
• 性能优化：将MutationObserver的监听范围缩小到搜索结果主容器#rso，减少不必要的DOM扫描

内容的提问来源于stack exchange，提问作者Bart S