一个实用的Chrome小工具：xTrace

难度：容易

前言

我们在上网浏览网页时经常会被网站收集操作行为，收集行为本身并没有问题，但某些网站为了向移动端引流或者吸引注册经常需要点击“下载App阅读更多”或者”关注博主即可阅读全文”这样的交互行为，非常影响阅读体验，举个栗子🌰：

上图示例我想许多同学经常遇到，这在阅读体验上是非常糟糕的，中断我们日常工作的进程，打断我们开发思路，浪费我们的时间，这是不能接受的，鉴于此，我开发一个chrome插件——xTrace来屏蔽他们，其基本原理是利用这些博文本身需要做SEO，页面基本上是SSR渲染的，而遮蔽部分内容的功能基本都是通过前端js脚本实现的，所以只要阻断脚本执行即可。

下面我们看下xTrace如何使用？

xTrace

xTrace是一款Chrome扩展插件，用于屏蔽某些追踪用户行为的脚本，以及支持用户自定义屏蔽影响我们流畅阅读博文的前端脚本。

如何安装

方式一：在线安装
用户可以通过Chrome Web Store进行在线安装，这里是直达链接

使用在线安装可以自动获得本插件(xTrace)功能更新

方式二：离线安装

1. 下载Github源代码到用户本地电脑
2. 打开Chrome，进入扩展程序管理界面，开启开发者模式
3. 点击加载已解压的扩展程序，选择源代码中的src目录并加载
4. 安装成功

离线安装无法自动获得功能更新，需要重新下载源代码并加载

使用方法

使用鼠标左击扩展程序图标，在弹出的页面中点击Options进入配置页面，用户可以在这个页面进行更多自定义的脚本拦截配置，

xTrace内置了如下拦截规则：

 /* Js中文网 - 全球前端挚爱的技术成长平台 https://www.javascriptc.com/ */

://hm.baidu.com/
://www.google-analytics.com/
://www.googletagmanager.com/
://my.openwrite.cn/
://pagead2.googlesyndication.com/
://adservice.google.com
://csdnimg.cn/release/blogv2/dist/pc/js/detail

拦截效果：

拦截示例

打开如下链接：

• https://blog.csdn.net/qq_43762191/article/details/109195441

在没有安装xTrace扩展程序时，我们仅能阅读部分，需要关注博主或者注册后才能继续阅读，截图如下：

在安装xTrace扩展程序后，我们就可以阅读全文了，截图如下：

额外功能

xTrace也可以用来屏蔽指定广告链接，虽然市面上已经有不少类似AdBlock的插件来屏蔽广告，但是效果都不是很好，许多网站本身也会针对这些插件做反屏蔽。xTrace则简单许多，直接屏蔽加载广告的域名或者脚本链接，目前插件内置一些通用的域名和链接，如果大家发现更多的广告域名，可以通过issue来告诉我。

和谐社会，你我共建！

更多

Chrome插件源码安装/离线安装

1. 国内因为GFW的存在，如果没有梯子，安装Chrome插件只能选择离线模式，这里介绍一种离线安装方式(目前似乎是唯一方法)
2. 找到一个国内Chrome插件镜像站，下载离线包crx，如果找不到镜像可以参考文末引用链接
3. Chrome最新版本（67之后）crx扩展文件无法直接拖拽安装，可选择解压后进行源码安装或者开启开发者模式
4. Mac下更改crx文件扩展名为zip，不支持双击解压，可以通过在终端中执行命令unzip xxx.crx -d xxx完成解压获取源码
5. Windows下可以通过7zip工具直接提取crx获取安装包源代码
6. 获取源码后，打开Chrome，在地址栏输入chrome://extensions/，开启开发者模式，点击加载已解压的扩展程序按钮，加载源码目录完成安装👏

参考

Chrome插件开发快速入门：https://zhuanlan.zhihu.com/p/…

Chrome插件开发官方文档：https://developer.chrome.com/…

国内Chrome插件镜像站：https://pictureknow.com/exten…

作者：风清洋
链接：https://segmentfault.com/a/1190000038118270