【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": [""]
  

• 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

推荐阅读

• 前端
  • 学习笔记 | HTML 基本结构和基本标签 ——前端学习第一步！
  • 学习笔记 | HTML（2）——关于HTML的head标签（404界面示例）
• Python
  • Python爬虫 | 爬取b站北京奥运会开幕式弹幕，有多少人从东京奥运会跑过来的？
  • 绝密！Python爬虫告诉你刷分机器人背后的原理！这篇文章差点没过审
  • 【爬虫】用Python爬取豆瓣电影分类排行榜
  • 【Python爬虫】爬虫利器 requests 库小结（建议收藏！）
  • 没想到我连五年级的题目都解不出来？可不能被人小看，让万能的Python登场
  • 女朋友让我深夜十二点催她睡觉，我有Python我就不干
  • Python：程序猿怎么追女生？教你用Python做一个表白神器，告别表白尴尬！
  • Python标准库：datetime 时间和日期模块 —— 时间的获取和操作详解