一个实用的Chrome小工具:xTrace

难度:容易

前言

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

一个实用的Chrome小工具:xTrace_第1张图片

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

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

xTrace

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

如何安装

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

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

方式二:离线安装

  1. 下载Github源代码到用户本地电脑
  2. 打开Chrome,进入扩展程序管理界面,开启开发者模式
  3. 点击加载已解压的扩展程序,选择源代码中的src目录并加载
  4. 安装成功
离线安装无法自动获得功能更新,需要重新下载源代码并加载

使用方法

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

一个实用的Chrome小工具:xTrace_第2张图片

xTrace内置了如下拦截规则:

://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

拦截效果:

一个实用的Chrome小工具:xTrace_第3张图片

拦截示例

打开如下链接:

在没有安装xTrace扩展程序时,我们仅能阅读部分,需要关注博主或者注册后才能继续阅读,截图如下:
一个实用的Chrome小工具:xTrace_第4张图片

在安装xTrace扩展程序后,我们就可以阅读全文了,截图如下:
一个实用的Chrome小工具:xTrace_第5张图片

额外功能

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...

你可能感兴趣的:(chrome,前端,javascript)