【chrome插件开发】程序猿节来临，我却被这广告给气到了

明天就是1024程序猿节了，过节嘛，搞点活动是好事，但CSDN却给整了这么个广告出来：
广告
这就让人很不爽，在博客主页、文章界面、搜索页等所有界面都会弹出来，关掉也不行，刷新一下就自动跳出来了，极其影响使用体验。这是在是可恶。于是我琢磨着写个简单的chrome插件把它屏蔽掉。

首先检查网页元素，我们可以找到该元素的class：toolbar-advert，我们要做的是用 CSS 把它给设为不显示，以达到屏蔽的效果：
class
话不多说直接上代码：
文件树

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

推荐阅读

版权声明：本文为weixin_52132159原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。