使用谷歌浏览器拓展删除百度搜索引擎的AI自动生成（AI结果）

自从AI成为新风口之后，干什么都得带点AI，百度搜索也不例外，搜索什么东西都会自动生成AI回答。回答既不准确就罢了，点击停止还反应慢半拍的卡一下。因此，专门写了一个浏览器拓展程序，来删除AI回答。

一、扩展程序使用教程

1. 下载扩展程序

由于注册谷歌浏览器开发者要5美金，很明显博主掏不出来，所以直接给出源码，gitee链接。

2.使用教程

  1. 下载后我们只需要del_baidu_ai_index文件夹，里面是content.js和manifest.json，如图所示：
    image-1720601059343
  2. 进入谷歌浏览器，点击浏览器右上角三个点，点击拓展程序，如图所示：
    image
  3. 加载下载好的扩展程序文件，如图所示：
    image-1720598959439
    注意：文件夹中应当只包含content.js和manifest.json文件，不应当还有其他文件夹目录或文件。
  4. 加载成功后的扩展程序如图所示，此时我们再访问就没有百度的ai自动生成的内容了
    image-1720599045781
    添加扩展程序前：
    image-1720599184140
    添加扩展程序后：
    image-1720599216973

3.存在的问题

由于AI的这一部分是动态加载的，所以即使加了扩展程序，在被删除前，依然会一闪而过AI生成的DIV，这里暂时还没想到办法优化。不过即使如此，浏览体验对我来说也好很多了。

二、扩展程序开发过程

1.思路

  1. 本质上，这个AI模块还是被包装到DIV标签中的，那么只要我们能找到这个标签的唯一指向性，就能操作DOM将其删除。
  2. 通过查看Elements可以发现，每一个div都有一个tpl属性，其他的div tpl属性都是一样的，只有ai的div不一样，叫ai_index或wenda_generate，如图所示：
    image-1720599502703
  3. 有了唯一指向性，那么剩下的事情就是编码了。

2.编码

  1. 我们要能够将js脚本作为扩展程序加载到浏览器中，所以必须要有manifest.json文件。
{
  "manifest_version": 3,
  "name": "Del Baidu Ai Index",
  "version": "1.0",
  "permissions": ["scripting","activeTab"],
  "content_scripts": [
    {
      "matches": ["*://*/*"], 
      "js": ["content.js"]
    }
  ]
}

我们主要看matches和js标签的内容，matches是脚本的作用域，此处我们是作用到所有网站；js则是指向的我们的脚本文件。

  1. js脚本内容主要是根据tpl的值查找符合条件的div标签，并进行删除
// content.js
console.log('Div Remover script running...'); // 检查脚本是否执行

function removeAIIndexDivs() {
  // 查找所有具有 'tpl' 属性且属性值为 'ai_index' 和 'wenda_generate' 的 div 标签
  var divsToRemove1 = document.querySelectorAll('div[tpl="ai_index"]');
  divsToRemove1.forEach(function(div) {
    console.log('Removing div with tpl="ai_index"', div); // 检查是否找到正确的元素
    div.parentNode.removeChild(div);
  });
  var divsToRemove2 = document.querySelectorAll('div[tpl="wenda_generate"]');
  divsToRemove2.forEach(function(div) {
    console.log('Removing div with tpl="wenda_generate"', div); // 检查是否找到正确的元素
    div.parentNode.removeChild(div);
  });
}

// 检查DOM是否加载完成
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', removeAIIndexDivs);
} else {
  // 页面已加载，DOM已就绪
  removeAIIndexDivs();
  
  //页面有动态加载的元素，设置一个轮询检查
  const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
      if (mutation.type === 'childList') {
        removeAIIndexDivs();
      }
    });
  });

  observer.observe(document.body, { childList: true, subtree: true });
}

三、总结

该扩展程序只是工作之余写出来的小玩意，如果大家有更好的解决方案欢迎提出！