如何通过编程方式禁用Edge浏览器Visual Search视觉搜索功能

Edge Visual Search 屏蔽方法 #

Edge的视觉搜索悬浮图标是浏览器原生注入的UI，不需要引导用户修改浏览器设置，网页端可通过三层方案彻底屏蔽，不影响原有图片点击交互：

• 第一层：官方元标签全局关闭
  在页面<head>区域加入以下元标签，是微软官方提供的站点级关闭入口，Edge 112及以上正式版本均支持，配置后整个页面不会再出现视觉搜索悬浮控件：

  <meta name="edge" content="disableVisualSearch" />
  

• 第二层：CSS属性定向屏蔽
  针对小部分未升级到适配版本的Edge用户，给页面内的img标签、作为点击交互区域的容器加以下CSS规则，可直接禁止对应元素唤起视觉搜索控件：

  .quiz-image, /* 你的测评类图片专属类名，也可以直接写img全局生效 */
  img {
    visual-search: none;
    /* 兼容旧版本Chromium内核浏览器的同类控件 */
    -webkit-visual-search: none;
  }
  

• 第三层：JS兜底移除
  如果需要100%避免注入控件干扰点击，可以加全局DOM监听，检测到浏览器注入的视觉搜索相关节点直接移除，不受后续浏览器版本规则变动影响：

  const blockBrowserInjectUI = new MutationObserver((records) => {
    records.forEach(record => {
      record.addedNodes.forEach(node => {
        if (node.nodeType !== 1) return
        const classList = node.classList?.toString() || ''
        // 匹配主流浏览器注入的视觉搜索类名特征
        if (classList.includes('visual-search') || classList.includes('edge-swd') || classList.includes('lens-hover')) {
          node.remove()
        }
      })
    })
  })
  blockBrowserInjectUI.observe(document.body, {
    childList: true,
    subtree: true
  })
  

其他浏览器同类功能适配说明 #

• Chrome：116版本后内置了Google Lens图片悬浮搜索入口，和Edge的实现逻辑一致，上述三层屏蔽方案完全生效，不需要额外写适配逻辑。
• 国内Chromium套壳浏览器（360安全浏览器、QQ浏览器、搜狗浏览器等）：同类图片搜索功能基本都复用了Chromium内核的标准注入逻辑，上述方案可覆盖99%以上的用户场景。
• Firefox、Safari：当前官方正式版默认没有内置全局图片悬浮搜索类控件，不需要做额外适配。

注意：不要尝试通过拦截网络请求的方式屏蔽这类控件，相关UI是浏览器本地注入的，不走网页上下文的网络请求，拦截无效。

内容的提问来源于stack exchange，提问作者Rabbi Kaii