前端邓浩 - 篡改猴脚本
type: channel
link: https://www.denghao.me/index.php/tag/篡改猴脚本/
items: 50行代码实现网页内容过滤（篡改猴脚本）

50行代码实现网页内容过滤（篡改猴脚本）
type: item
date: 2024-07-16T15:57:00+08:00
description: 前言有点标题党了，这是很早前自用的一段脚本，取名“页面净化”，基于浏览器扩展“篡改猴(Tampermonkey)”，用于屏蔽或弱化网页上不想看的烂七八糟的东西，包含广告、视频、声音、图片等等。代码只包含了基础的框架，至于你想屏蔽什么网站，屏蔽什么内容，由你自己决定。只需要了解一点点的jQuery选择器用法，既可自由发挥。使用方法第一步：打开chrome浏览器，安装“篡改猴(Tampermonkey)”扩展（略）；第二步：【点此下载脚本】第三步：修改代码，添加想要屏蔽的网站或内容1、// @match 表示作用于哪些网页，你可以换行在下面添加其它网站，比如知乎// @match https://*.zhihu.com/*。2、hideNodes表示需要屏蔽的元素，比如你想要屏蔽网页上的视频，一般视频标签为 ，你可以这样写hideNodes: ['video']。只要jQuery选择器能抓取到的元素，就能生效。3、opacityNodes表示需要弱化(降低透明度)的元素，使用方法同hideNodes。代码很简单，只要懂一点点基础的前端知识，就能看懂，我就不赘述了。完整源码// ==UserScript== // @name 页面净化 // @description 隐藏任意网站的任意元素(图片/视频/文字/广告等)，干干净净地冲浪。 // @version 1.0.0 // @match https://*.zhihu.com/* // @match https://*.baidu.com/* // @require http://libs.baidu.com/jquery/2.0.0/jquery.min.js // @namespace https://greasyfork.org/users/978718 // @license MIT // ==/UserScript== this.$ = this.jQuery = jQuery.noConflict(true); (function () { //公用方法 const utils = { // 防抖 throttle: function (func, wait) { let timeout; return function () { const context = this; const args = arguments; if (!timeout) { timeout = setTimeout(() => { timeout = null; func.apply(context, args) }, wait) } } } } //主要逻辑 const view = { //直接隐藏的标签集合(需符合jQuery选择器写法) hideNodes: ['.c-container[mu*="xiaohongshu.com"]'], //降低透明度的标签集合(需符合jQuery选择器写法) opacityNodes: ['.QuestionHeader-title', '.QuestionHeader-content', '.AppHeader-inner'], // 入口 init: function () { this.handleNodes(); this.bindEvents(); }, // 处理 handleNodes: function () { this.hideNodes.forEach(function (node) { $(node).css({ 'display': 'none' }); }); this.opacityNodes.forEach(function (node) { $(node).css({ 'opacity': 0.01 }); }); }, // 绑定事件 bindEvents: function () { $(window).on('scroll', utils.throttle(() => { this.handleNodes() }, 300)) } } view.init(); })(); 使用场景待续...