chrome插件开发程序猿节来临，我却被这广告给气到了
Posted Cresyeal
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了chrome插件开发程序猿节来临，我却被这广告给气到了相关的知识，希望对你有一定的参考价值。
明天就是1024程序猿节了，过节嘛，搞点活动是好事，但CSDN却给整了这么个广告出来：
这就让人很不爽，在博客主页、文章界面、搜索页等所有界面都会弹出来，关掉也不行，刷新一下就自动跳出来了，极其影响使用体验。这是在是可恶。于是我琢磨着写个简单的chrome插件把它屏蔽掉。
首先检查网页元素，我们可以找到该元素的class：toolbar-advert，我们要做的是用 CSS 把它给设为不显示，以达到屏蔽的效果：
话不多说直接上代码：
manifest.json：
{
// 清单文件的版本
"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
表示注入的时间：- document_start：网页加载前；
- document_end：网页加载完成后；
- document_idle：页面空闲时（默认）。
index.css：
css 的代码非常简单：
/*选择class为 toolbar-advert 的元素*/
.toolbar-advert {
display: none; /*将显示状态设为不显示*/
}
加载扩展
进入chrome的扩展界面，点击 “加载已解压的扩展程序”，然后选择我们的文件夹，然后稍微等待一下，就加载成功了。
接下来刷新一下CSDN博客界面，看看效果：
我们可以看到，1024 的广告已经消失了，看着畅快许多！
– the End –
好啦，这篇文章就到这里了。
以上就是我分享的全部内容，感谢阅读！
后记：开学之后要上学，可能更文会变得少了，甚至几乎不更了。因为面临着中考的压力。也许等到放假之后会继续更新，谢谢大家的支持！
本文收录于专栏：前端实例
关注作者，持续阅读作者的文章，学习更多知识！
https://blog.csdn.net/weixin_52132159
2021/10/23
推荐阅读
- 前端
- Python
以上是关于chrome插件开发程序猿节来临，我却被这广告给气到了的主要内容，如果未能解决你的问题，请参考以下文章