难度:容易
我们在上网浏览网页时经常会被网站收集操作行为,收集行为本身并没有问题,但某些网站为了向移动端引流或者吸引注册经常需要点击“下载App阅读更多”或者"关注博主即可阅读全文"这样的交互行为,非常影响阅读体验,举个栗子🌰:
上图示例我想许多同学经常遇到,这在阅读体验上是非常糟糕的,中断我们日常工作的进程,打断我们开发思路,浪费我们的时间,这是不能接受的,鉴于此,我开发一个chrome插件——xTrace来屏蔽他们,其基本原理是利用这些博文本身需要做SEO,页面基本上是SSR渲染的,而遮蔽部分内容的功能基本都是通过前端js脚本实现的,所以只要阻断脚本执行即可。
下面我们看下xTrace如何使用?
xTrace是一款Chrome扩展插件,用于屏蔽某些追踪用户行为的脚本,以及支持用户自定义屏蔽影响我们流畅阅读博文的前端脚本。
方式一:在线安装
用户可以通过Chrome Web Store进行在线安装,这里是直达链接
使用在线安装可以自动获得本插件(xTrace
)功能更新
方式二:离线安装
开发者模式
加载已解压的扩展程序
,选择源代码中的src
目录并加载离线安装无法自动获得功能更新,需要重新下载源代码并加载
使用鼠标左击
扩展程序图标,在弹出的页面中点击Options
进入配置页面,用户可以在这个页面进行更多自定义的脚本拦截配置,
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
拦截效果:
打开如下链接:
在没有安装xTrace
扩展程序时,我们仅能阅读部分,需要关注博主或者注册后才能继续阅读,截图如下:
在安装xTrace
扩展程序后,我们就可以阅读全文了,截图如下:
xTrace
也可以用来屏蔽指定广告链接,虽然市面上已经有不少类似AdBlock
的插件来屏蔽广告,但是效果都不是很好,许多网站本身也会针对这些插件做反屏蔽。xTrace
则简单许多,直接屏蔽加载广告的域名或者脚本链接,目前插件内置一些通用的域名和链接,如果大家发现更多的广告域名,可以通过issue
来告诉我。
和谐社会,你我共建!
Chrome插件源码安装/离线安装
- 国内因为GFW的存在,如果没有梯子,安装Chrome插件只能选择离线模式,这里介绍一种离线安装方式(目前似乎是唯一方法)
- 找到一个国内Chrome插件镜像站,下载离线包crx,如果找不到镜像可以参考文末引用链接
- Chrome最新版本(67之后)crx扩展文件无法直接拖拽安装,可选择解压后进行源码安装或者开启开发者模式
- Mac下更改crx文件扩展名为zip,不支持双击解压,可以通过在终端中执行命令
unzip xxx.crx -d xxx
完成解压获取源码- Windows下可以通过7zip工具直接提取crx获取安装包源代码
- 获取源码后,打开Chrome,在地址栏输入
chrome://extensions/
,开启开发者模式
,点击加载已解压的扩展程序
按钮,加载源码目录完成安装👏
Chrome插件开发快速入门:https://zhuanlan.zhihu.com/p/...
Chrome插件开发官方文档:https://developer.chrome.com/...
国内Chrome插件镜像站:https://pictureknow.com/exten...