使用css技术屏蔽,将目标元素的css选择器值找出来,设置display属性为none屏蔽元素
新建目录AnnoyingElementsBlock,目录下结构如下所示:
-css
|-BlockBaiduBaikeVideo.css
|-BlockBaiduJingyanVideo.css
-manifest.json
manifest.json内容
{
"manifest_version": 2,
"name": "tellw页面元素屏蔽器",
"version": "1.0",
"description": "可以屏蔽网页中不需要的元素",
"content_scripts": [
{
"matches": ["https://baike.baidu.com/*"],
"css": ["css/BlockBaiduBaikeVideo.css" ]
},
{
"matches": ["https://jingyan.baidu.com/*"],
"css": ["css/BlockBaiduJingyanVideo.css"]
}
]
}
css/BlockBaiduBaikeVideo.css内容#sl-player-el { display: none; }
css/BlockBaiduJingyanVideo.css内容#feeds-video-play-container { display: none; }
在edge中打开开发者模式,加载该自定义插件目录,再次访问百度百科看到视频元素处是一个黑块。
参考链接:制作一个浏览器插件来屏蔽百度经验的视频
扩展
使用油猴脚本实现相同功能,安装油猴脚本插件后创建自定义脚本内容如下
// ==UserScript==
// @name block some elements I don't like
// @namespace https://baidu.com
// @version 0.1
// @description 屏蔽网站中不想看到的元素
// @author You
// @match https://baike.baidu.com/*
// @match https://jingyan.baidu.com/*
// @license GPLv3 License
// ==/UserScript==
(function() {
'use strict';
var baiduBaikeVideoElement = document.getElementById("sl-player-el");
var baiduJingyanVideoElement = document.getElementById("feeds-video-play-container");
if(baiduBaikeVideoElement)baiduBaikeVideoElement.style.display = "none";
if(baiduJingyanVideoElement)baiduJingyanVideoElement.style.display = "none";
// Your code here...
})();
本文创建于2021年1月13日16点56分,修改于2021年 07月 11日 星期日 16:54:48 CST