0x00. 媒介
微博如今也是变得愈来愈痴肥，广告愈来愈多，早已不再是“微”博了，这让微博深度用户的我觉得非常焦灼。因为之前就尝试写过 Chrome 插件，因而便想到了如许的解决方案。Flat Weibo，简约你的微博！
0x01. 概览
去除双方的种种引荐
去除部份广告
重置顶部导航款式
修正背景
修正微博流款式
其他
0x02. 下载 & 装置
下载
装置
因为 Chrome 现在制止第三方插件的装置，所以需在 Chrome 里顺次点击 菜单 更多东西 扩大顺序 然后翻开 开辟者形式，将插件拖进来然后会自动装置。
装置胜利后插件即见效，更多自定义功用稍后便来 ~
0x03. 写一个 Chrome 扩大
源码
Chrome 扩大是什么？
Chrome 扩大许可你在 Chrome 中运用 JavaScript 来对网页、阅读器、当地存储等内容举行接见和变动，对应的 Firefox 也有本身的扩大顺序。本文章的扩大只针对 Chrome 而言。
Chrome 扩大是一系列文件的鸠合，这些文件包括 HTML 文件、CSS 款式文件、JavaScript 剧本文件、图片等静态文件以及 manifest.json（清单文件）。
扩大被装置后，Chrome 就会读取扩大中的 manifest.json 文件。这个文件的文件名固定为 manifest.json，内容是根据肯定花样形貌的扩大相干信息，如扩大称号、版本、更新地点、要求的权限、扩大的 UI 界面进口等等。如许 Chrome 就能够晓得在阅读器中怎样显现这个扩大，以及这个扩大怎样同用户举行交互。
一般而言，Chrome 扩大会对用户阅读的页面举行响应的 DOM 操作和一些数据通报，本案例 Flat Weibo 的实质是，当用户阅读网页版微博时，Chrome 扩大会向当前页面注入预先写好的 CSS，如许便对微博网页版举行了款式重构。
manifest.json（清单文件）
每一个 Chrome 扩大都包括一个 manifest 文件，Chrome 会从该文件中读取本扩大的相干信息，是扩大的进口。
{
"manifest_version": 2, // manifest 版本，当前只能为 2
"name": "Flat Weibo", // 扩大名
"version": "1.0.0", // 扩大版本号
"description": "简约你的微博，去除烦人的微博引荐和广告，让微博越发扁平，越发简朴明了", // 扩大形貌
"icons": { // 扩大图标
"16": "img/icon/icon_16.png",
"48": "img/icon/icon_48.png",
"128": "img/icon/icon_128.png"
},
"browser_action": { // 增加图标按钮至 Chrome 东西条
"default_icon": { // 图标
"19": "img/icon/icon_19.png",
"38": "img/icon/icon_38.png"
},
"default_title": "开启简约微博天下", // 按钮题目，鼠标挪动至按钮上会显现
"default_popup": "popup.html" // 点击按钮显现的页面
},
"content_scripts": [ // 被注入的剧本
{
"matches": [ // 婚配被注入的前提
"*://weibo.com/*",
"*://www.weibo.com/*"
],
"css": [ // 被注入的 css
"css/flat-weibo.css"
]
}
]
}更多关于清单文件的引见请接见
css
本扩大的中心部份就是被注入到页面中的 CSS，中心头脑是剖析页面 DOM 构造，编写新款式，举行注入。
如上图所示，两个红框标出了一些我们不愿意看到的东西，我们先剖析一下这两部份的 DOM 构造。
我们能够看到这个烦人的引荐位所对应的节点为 .send_weibo .key，既然拿到了 DOM 节点，就能够这么写：
.send_weibo .key {
display: none;
}是否是很简朴，很机灵呢，直接让我们不想看到的东西隐蔽就好了！
一样的，我们检察一下右边引荐位的 DOM 构造。
因而
#v6_pl_rightmod_rank {
display: none;
}处置惩罚以后就是这个模样，我们看到 #v6_pl_rightmod_rank 的 Styles 中涌现了一个标有 injected stylesheet 的款式（中心红框），这个就是我们在 Chrome 扩大中向页面注入的 CSS。一样的我们看到左侧红框和 #v6_pl_rightmod_rank 同级有许多 div 标签，采纳一样的要领就能够让右边只剩下个人信息了。
采纳如许的要领顺次处置惩罚一切你不想看到的元素，你的微博便会简约许多。因为须要变动的款式比较复杂，因而运用了 SASS 举行预处置惩罚 CSS，也因而运用了 gulp 来举行自动化构建。
SASS 是一个 CSS 预处置惩罚器，它许可挑选器嵌套、运用一些简朴的逻辑运算举行编写 CSS，功用非常壮大，但语法也很简朴。
gulp 是一个前端自动化构建东西，有雄厚的插件供你运用，本例中便运用gulp-sass来编译 scss，运用gulp-autoprefixer给 css 增加阅读器前缀
sass 入门/gulp.js 入门
开辟 & 构建
装置依靠
npm install
开辟
npm run dev
构建
npm run build
0x04. TODO
增加自定义主题色
增加变动规划
增加模块显现/隐蔽挑选
