脚本宝典收集整理的这篇文章主要介绍了【chrome插件开发】程序猿节来临,我却被这广告给气到了,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
明天就是1024程序猿节了,过节嘛,搞点活动是好事,但CSDN却给整了这么个广告出来F1a;
这就让人很不爽,在博客主页、文章界面、搜索页等所有界面都会弹出来,关掉也不行,刷新一下就自动跳出来了,极其影响使用体验。这是在是可恶。于是我琢磨着写个简单的chrome插件把它屏蔽掉。首先检查网页元素,我们可以找到该元素的class:toolbar-advert
,我们要做的是用 CSS 把它给设为不显示,以达到屏蔽的效果:
{
// 清单文件的版本
";manifest_version": 2,
// 插件名称
"name":"No AdvertiSEMents(csdn)",
// 插件描述
"description":"去掉CSDN顶部的广告内容",
// 版本号
"version":"1.0.0",
// 插件作者
"author":"Cresyeal",
// 需要直接注入界面的js,但其实可以注入js、css文件
"content_scripts": [
{
"matches": ["https://*.csdn.net/*"], //匹配网址
"css": ["index.css"], //要注入的代码文件
"run_at": "document_end" //表示注入的时间
}
]
}
其中:
manifest_version 清单文件版本,必须为2,否则浏览器无法读取。
matches xpath 匹配 url,在打开一个网页时自动匹配,若匹配成功则自动注入。
可以匹配多个 url,如:
"matches": ["https://blog.csdn.net/*", "https://so.csdn.net/*"]
以下方式可匹配所有地址:
"matches": ["<all_urls>"]
run_at 表示注入的时间:
css 的代码非常简单:
/*选择class为 toolbar-advert 的元素*/
.toolbar-advert {
display: none; /*将显示状态设为不显示*/
}
进入chrome的扩展界面,点击 “加载已解压的扩展程序”,然后选择我们的文件夹,然后稍微等待一下,就加载成功了。
接下来刷新一下CSDN博客界面,看看效果: 我们可以看到,1024 的广告已经消失了,看着畅快许多!好啦,这篇文章就到这里了。 以上就是我分享的全部内容,感谢阅读!
后记:开学之后要上学,可能更文会变得少了,甚至几乎不更了。因为面临着中考的压力。也许等到放假之后会继续更新,谢谢大家的支持!
本文收录于专栏:前端实例 关注作者,持续阅读作者的文章,学习更多知识! https://bLOG.csdn.net/weixin_52132159
2021/10/23
推荐阅读
- 前端
- 学习笔记 | HTML 基本结构和基本标签 ——前端学习第一步!
- 学习笔记 | HTML(2)——关于HTML的head标签(404界面示例)
- Python
以上是脚本宝典为你收集整理的【chrome插件开发】程序猿节来临,我却被这广告给气到了全部内容,希望文章能够帮你解决【chrome插件开发】程序猿节来临,我却被这广告给气到了所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。