前记

想必我们浏览器上都会装上类似 Adblock 的去广告插件，以屏蔽一些烦人的广告

但是现在很多浏览的网站都有很多区块是用来放一些广告位、热门搜索位等，其实我们就是想浏览最重要的 feed 流部分，其他并不想看。想到这个场景，就搜索了一下，现在已经有很多插件可以帮助我们去制作，类似于 Bookmarklet，只要简单的 JavaScript 语句，就可以生成一个书签，点击就可以运行显示我们想做的事情，比如我之前制作的微博的去除广告的书签：

打开微博是这样的

点击书签后就可以屏蔽一些区块（广告位和两旁的 SideBar 都屏蔽掉）

今天想记录一下使用 Chrome 插件来完成以上的效果

Chrome 插件制作

首先推荐两个链接可以先看一下简要描述和文档

最新版指南：juejin.cn/post/702107…

W3C简要指南：www.w3cschool.cn/kesyi/kesyi…

我制作时候是在 Github 上搜索到了一个 LazyExtKit 的插件包，已经写好先关的依赖打包，我们只需要直接专注于 JS 和 CSS 相关的改写，同时还要修改一下配置文件

因为这个插件包是 "manifest_version": 2，现在制作需要改为 "manifest_version": 3，并且配置的一些文件名需要做适当的修改

以头条新闻为例

如何将

变成下图这样

manifest.json 如下：

"manifest_version": 3,
"name": "my_AbBlock",
"description": "Experience a cleaner, faster web without annoying ads",
"version": "1.0",

"host_permissions": ["http://*/*", "https://*/*"],
"permissions": ["tabs"],
"optional_permissions": ["downloads"],

"action": {
    "default_icon": "logo.png"
}
,
"background": 
{
    "background.service_worker": ["background.js"]
}
,
"content_scripts": [
    {
        // 当域名匹配时，加载的 js 和 css
         "matches": ["https://www.toutiao.com/*","http://www.toutiao.com/*","https://toutiao.com/*","http://toutiao.com/*"],
         "css": ["app.css"],
         "js": ["jquery-3.2.1.min.js","app.js"]
    }
]

因为引入了 jQuery，我们就使用它的语法进行 Dom 的操作，因为直接将其写入 app.js 文件中

选定相关节点 remove 掉即可，或者也可以操作 CSS.js 也可以，选定好相关的 class、id 的 display 设置为 none 即可

将以上的文件配置完，即可导入 Chrome 拓展中，这样子网站即可按照你要的样式进行展示

以上就是很简单和一个类去广告的小插件制作流程，在这里也记录一下

制作属于自己的去广告插件

前记

Chrome 插件制作