利用油猴插件 Tampermonkey 编写脚本以屏蔽网页指定元素——以屏蔽百度搜索右边的百度热榜为例
一、起因一直使用 Tampermonkey 中的AC-baidu-重定向优化百度搜狗谷歌必应搜索_favicon_双列这个插件屏蔽好好的,今天突然屏蔽不了,正好自己编写一个简单的插件试试完成这一效果,如下图二、过程Tampermonkey 版本 v4.11直接进入油猴管理面板,点击已安装脚本的左边的 + 号,这样就新建了一个新的用户脚本了我们审查原始得知百度搜索中我们需要屏蔽的元素块 id 块名为
·
一、起因
一直使用 Tampermonkey 中的
AC-baidu-重定向优化百度搜狗谷歌必应搜索_favicon_双列
这个插件屏蔽好好的,今天突然屏蔽不了,正好自己编写一个简单的插件试试完成这一效果,如下图
二、过程
- Tampermonkey 版本 v4.11
- 直接进入油猴管理面板,点击已安装脚本的左边的 + 号,这样就新建了一个新的用户脚本了
- 我们审查原始得知百度搜索中我们需要屏蔽的元素块 id 块名为
content_right
,并且在网页测试可以用display
:none
属性屏蔽,那代码就很简单了
- name 指代你的脚本名称
- namespace 命名空间,可以用你自定义名称
- version 脚本当前版本,这样别人如果使用了你的脚本,还可以及时更新
- description 脚本的描述
- author 作者名
- match 脚本在匹配到什么url 时才触发生效
// ==UserScript==
// @name 自定义的屏蔽百度搜索结果中右侧百度热榜
// @namespace http://tampermonkey.net/
// @version 0.1
// @description 屏蔽百度搜索的百度热榜
// @author mizuhokaga
// @match *://www.baidu.com/*
// @grant none
// ==/UserScript==
(function() {
//1.原生js写法
//let content_right=document.getElementById("content_right");
//if(content_right!=null){ content_right.style.display="none";}
//2.jQuery写法,油猴现在已经支持jQuery了
$('#content_right').hide();
})();
需要注意的是油猴的元数据中 @match
中填入需要屏蔽的 url ,
我懒的想百度搜索的 url 是怎么匹配的就直接 *
通配了
除了用元数据匹配,也可以编辑右边的设置中包括/排除自行添加
3. 在油猴的管理面板确认是否打开自定义的脚本,然后看看效果,基本符合需求
三、场后反思
问题:
- 能不能更加精准的匹配的 url 吗?
- 测试效果后发现,网页还是先会出现百度热榜再消失,即闪屏现象,如何解决?
四、解决提出的问题
这里匹配 url 无关紧要,所以只需要解决第二个问题,闪屏的问题很容易想到是百度在这里做了异步加载,所以思路基本有了:我们需要监听页面变化事件,然后判断有没有该网页元素再是否隐藏。
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
已为社区贡献6条内容
所有评论(0)