=Start=

缘由：

没想到前端里面的黑科技这么多，简单学习了解一下，扩展一下自己的知识面。

这里主要介绍一下——如何根据自身需要来按条件修改页面的默认样式。

正文：

参考解答：

总的来说，思路有2种：

1. 在数据传到浏览器之前，借助浏览器代理等相关工具进行修改后再传递给浏览器进行展示，比如：Fiddler、BurpSuite等；
2. 在数据传到浏览器之后，通过浏览器插件进行修改并覆盖，比如：Chrome浏览器插件。

刚了解到的一些常见工具/方法有：

• Fiddler/BurpSuite自定义脚本；
• js: TamperMonkey
• css: Stylish/Stylus

---

下面用 Stylish/Stylus 做一个简单的介绍和使用样例说明：

User styles 是一个提供各大知名网站的网站主题和皮肤风格的站点，通过该网站开发的浏览器扩展插件Stylish，就可以为任意网站来自定义主题了，想要什么类型的自己修改或者使用已经制作好的主题。

其实该网站就是利用浏览器的扩展插件Stylish 通过替换网页本身的 CSS 来达到的「美化/自定义」的目的。你可利用Stylish为许多网站安装主题和皮肤，也可创建自己的主题和皮肤，例如为Reddit添加黑色风格，使用简约的Facebook，或者更改Google、Twitter或您最爱的任意网站的外观，支持自定义背景、配色方案、字体甚至动画。

@document url("http://www.w3.org/"),
          url-prefix("http://www.w3.org/Style/"),
          domain("mozilla.org"),
          media-document("video"),
          regexp("https:.*") {
  /* CSS rules here apply to:
     - The page "http://www.w3.org/"
     - Any page whose URL begins with "http://www.w3.org/Style/"
     - Any page whose URL's host is "mozilla.org"
       or ends with ".mozilla.org"
     - Any standalone video
     - Any page whose URL starts with "https:" */

  /* Make the above-mentioned pages really ugly */
  body {
    color: purple;
    background: yellow;
  }

  div[style*='test-image']
  {
    background-image: none!important;
  }
}

参考链接：

• 不喜欢某个网站的样子？用这款美化神器给它一键「换肤」
  https://zhuanlan.zhihu.com/p/31980216
• 有没有这样一款 chrome 插件，使网站中的 js,css 等资源直接引用本地上的
  https://www.v2ex.com/t/219643
• Stylish-为任意网站自定义主题[https://userstyles.org]
  https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe
• 简悦 [https://chrome.google.com/webstore/detail/simpread-reader-view/ijllcpnolfcooahcekpamkbidhejabll]
• stylus[https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne]
• https://developer.mozilla.org/en-US/docs/Web/CSS/@document
• Content Scripts Chrome插件怎么用？看我的学习笔记
  http://www.cnplugins.com/zhuanti/content.html
• Chrome浏览器扩展开发系列之十二：Content Scripts
  https://www.cnblogs.com/champagne/p/4844682.html
  http://open.chrome.360.cn/extension_dev/content_scripts.html

=END=