chrome扩展stylish:给不喜欢某个网站一键「换肤」

author author     2022-08-28     416

关键词:

原文地址:http://whosmall.com/?post=419

本文标签: Chrome扩展 Chrome浏览器 Chrome插件 Chrome扩展Stylish Stylish是什么

Stylish 是什么

开门见山,Stylish 的作用是,它可以把百度首页变成这样:

技术分享

它还能把知乎「拍扁」,让微博网页版变得简洁无比,让 Feedly 用上 Material Design…

这个神奇的 Stylish 实际上是一个浏览器插件,适用于 ChromeFirefoxOpera 以及 Safari 浏览器(点击浏览器名称即可下载)。Stylish 通过替换网页本身的 CSS 来达到的「美化」的目的。

什么是 CSS?CSS 的中文全称是 层叠样式表,是一种用来表现HTML 或 XML ……这是个晦涩的东西。换个通俗易懂说法,CSS 就好比是一个网页的衣服,虽然不能添加网页本身的功能,但可以决定排版、字体,甚至滚动条等一切与外表有关的东西。至于外表的重要性,我想不必多言,你也许比我更有体会。

CSS 高深但 Stylish 也可以很易用

Stylish 的基本用法非常简单,从官网安装 Stylish 到你的浏览器。在 Stylish 的选项菜单中你可以更新、停用、卸载、编辑已经安装的 CSS,这和 Chrome 的扩展程序管理类似。

* 不同浏览器界面略有区别,但使用方法相同,本文以 Chrome 为例

技术分享

现在你的 Stylish 里面空空如也,接下来就是要添加 CSS 样式模板了。别怕,你只需要信手打开一个网站,打开 Stylish 的菜单,点击「查找适合此网站的更多样式」,Stylish 就会为你列出该网站合适的 CSS 模板。

技术分享你也可以直接前往 userstyles.org 寻找已经编写好的 CSS 模板,这里就是 Stylish 的「应用商店」,不过网站的界面并不友好,建议善用左上角的搜索功能。

 

技术分享

找到心仪的模板之后,点击绿色按钮即可安装,像安装浏览器插件一样无痛。而某些 CSS 还有更多可选项,如图。

技术分享

你应该试试这些 CSS 模板

1. 给你一个干净的微博:Weibo_v6

这款 CSS 和一款叫做「微博急简」的 Chrome 插件有同样的功效,把微博来个大换装,去掉广告等多余元素,重新排版,给你一个干净的微博。

技术分享

2. 百度也用上 Material Design:百度轻

这就是文首看到的能让百度用上 Material Design 风格的 CSS 了。它同样适用于搜索结果页面。

技术分享

3. Google 搜索的再美化:Google Search - Material Design

这款 CSS 是根据 Dribbble 上的设计师 Aurélien Salomon ? 重新设计的 Google 搜索做出来的。类似上文的百度轻,由于 Google 本身已经很干净,所以效果提升并没有百度那么明显,好看倒是真的。

技术分享

4. 扁平版知乎:Flat_Zhihu

这款 CSS 不仅是把知乎拍平,还优化了字体,动效,以及页面宽度。总之看起来比原版舒服多了,看知乎终于不用开页面缩放了。

技术分享

5. 全局夜间模式:NightShift - eye care

这款全局 CSS 能将页面中白色的部分变黑,图片亮度降低,用起来就像开了「夜间模式」一样。会出现些许兼容问题,不影响使用。

技术分享

6. Mac 风格滚动条:Universial Minimalist Scroll Bar

这是针对 Windows 系统的全局 CSS 样式。他能让你的浏览器拥有 Mac OS X 样式的透明极简滚动条。

技术分享

使用 Stylish 自定义网页字体

除了使用上面的模板改变网页样式之外,很多人都希望能用自己喜欢的字体来浏览网页,使用 Stylish 可以轻松达到这个目的,在 userstyles 网站搜索「字体」,你可以轻松找到很多现成的模板供你挑选使用,下载后几乎不需调整即可直接使用。

在这里要推荐一款叫做 ForceMyFont 的模板,这个模板内置的选项非常丰富,允许你手动选择多款中英文字体,即使你对于 CSS 一窍不通,也可以轻松地完成字体设置,在列表中选定你要使用的字体,之后选择安装即可,非常方便。不过要注意你的电脑上是否已经安装了对应字体,如果没有则需要额外下载安装。

技术分享

如果你懂一些 CSS 样式,你当然也可以手动编写页面效果。这样做的好处是自由度高,可以按自己的喜好想改啥改啥,但使用门槛也成正比的高。在这里我举一个自定义字体 CSS 的例子。 

首先,打开 Stylish 的选项菜单,选择「编写新样式」,填入下面的代码:

*{font-weight:600!important;}
*{font-family: Arial, ”方正兰亭黑简体”;}

其中第一行是定义字体的粗细,越大越粗。第二行是指定的字体,填入一个电脑中已安装的字体就好。

技术分享

如果你喜欢字体阴影,可以加入下面这行代码:

*{text-shadow:0.01em 0.01em 0.01em #999999 !important;}

其中的数值依次代表阴影的 X 轴偏移、Y 轴偏移、阴影大小,以及字体颜色。

当填写好「应用对象」之后去页面查看一下效果吧。如果想要应用到全局,如上图配置即可。

最后要说一下,如果你是 Mac 用户,想要调用最新的 San Francisco 字体,可能会发现这个字体并不在 Font Book 里,而在 CSS 中直接键入"San Francisco" 也没有效果,这是因为苹果并没有把这个字体放在 Font Book 中供大家使用,如果想在网页上使用这个字体,需要用 -apple-system, BlinkMacSystemFont, 才行

最后

可以看到,Stylish 可以优化页面的样式。对于大多数普通用户来说,使用 Stylish 套用那些现成的模板,来优化那些设计不佳或风格不喜欢的网站,是个很好的解决方案。

更进阶一点的话,Stylish 实际上还可以实现去除广告、补全浏览器部分功能。但这不在本文的范围之中,这篇文章仅作为抛砖引玉,以便让更多人先知道并初步了解这样一款浏览器扩展。

欢迎各位在评论里一起讨论 Stylish 的更多用法,或分享你喜欢的 CSS 模板。

写在最后:FOR Freedom 看看外边的世界,以及IT这一行,少不了去Google查资料,最后,安利一些速器代理。

加速器推荐 免费方案 付费方案 官方网站
一枝红杏加速器 免费方案暂无,稳定高速 输入8折优惠码wh80,年付只需80元/年 官网直达
安云加速器 最好用的外贸VPN 最低¥30/月 官网直达
LoCo加速器 每天免费2小时 最低¥15/月 官网直达

本文标签: Chrome扩展 Chrome浏览器 Chrome插件 Chrome扩展Stylish Stylish是什么 Extentions Google

转自 SUN‘S BLOG - 专注互联网知识,分享互联网精神!

原文地址 Chrome 扩展 Stylish :给不喜欢某个网站一键「换肤」

相关阅读将 QQ 音乐、网易云音乐和虾米音乐资源「整合」一起的Chrome 扩展Listen 1

相关阅读8 个「新标签页」Chrome 扩展: 教你把 New Tab 页面玩的溜溜溜

相关阅读7 款实用 Chrome 扩展推荐:帮你提升 Chrome 使用体验

相关阅读无扩展就不是 Chrome 了:15 款优质的Chrome 扩展推荐给大家

相关阅读12 款不能少的使网页浏览获得的最佳体验Chrome 扩展

相关阅读5 款可以带来幸福感的 Chrome 扩展

相关阅读 关于 Android 中的 Palette 类的使用案例:色彩自适应的 Toolbar

相关阅读:GIT能做什么、它和SVN在深层次上究竟有什么不同

相关阅读:分享一些对开发者最有用的、用户友好和功能丰富的Google Chrome扩展工具

相关阅读:分享一些实际Android开发过程中很多相见恨晚的工具或网站

相关阅读:我是 G 粉,一直关注 Google,最近 Google 有一些小动作,可能很多人不太了解

相关阅读:机器学习引领认知领域的技术创新,那么SaaS行业会被机器学习如何改变?

相关阅读:VPS 教程系列:Dnsmasq + DNSCrypt + SNI Proxy 顺畅访问 Google 配置教程

相关阅读: 对程序员有用:2017最新能上Google的hosts文件下载及总结网友遇到的各种hosts问题解决方法及配置详解

相关BLOG:SUN’S BLOG - 专注互联网知识,分享互联网精神!去看看:www.whosmall.com

原文地址:http://whosmall.com/?post=419

chrome将给不安全的http连接贴标签

谷歌终于开始推进其在Chrome上给不安全的HTTP连接贴标签的计划。不过新的安全计划也会一步一步来实现(腾云科技ty300.com),计划从2017年1月起,Chrome56将给不安全传输密码和信用卡信息的网站进行标记。"Chrome目前扮演的是HTTP... 查看详情

5款让微博等社交网站更加清爽好用chrome扩展

本文标签:Chrome扩展Extentions社交网站审美Google原文地址:《5款让微博等社交网站更加清爽好用Chrome扩展》不论你是在新浪微博上了解朋友近况还是浏览各种段子,或者是去Facebook和Twitter上看一看外面的世界follow一下自己喜欢的... 查看详情

5款让微博等社交网站更加清爽好用chrome扩展

本文标签:Chrome扩展Extentions社交网站审美Google原文地址:《5款让微博等社交网站更加清爽好用Chrome扩展》不论你是在新浪微博上了解朋友近况还是浏览各种段子,或者是去Facebook和Twitter上看一看外面的世界follow一下自己喜欢的... 查看详情

stylish——一键为网页换肤,改变字体大小,去除广告

今天给大家介绍的是一款非常好用的插件stylishstylish是一款可以为网站自定义主题的插件可以在chrome的应用商店找到也可以通过网址访问https://userstyles.org/应用商店找到安装即可 点击网站也可以进入官网进入网站后输入你想... 查看详情

制作chrome插件/扩展程序,禁止谷歌浏览器访问某些网站

 chrome地址栏输入chrome://extensions/,可以看到当前谷歌浏览器的全部扩展程序开启开发者模式,可以加载自己制作的扩展程序,或者把自己制作的扩展程序打包 打包第一扩展程序,生成crx插件和pem密钥  查看详情

2022年我们最喜欢的chrome扩展程序

...太难。我喜欢它是一个浏览器应用程序的方式,这意味着Chromebook之类的东西可以使用它,即使它感觉像是一个本机应用程序。Mote与Loom的精神相似——用你的声音留下反馈 查看详情

chrome 扩展:如何将某个选项卡中的所有音频静音

】chrome扩展:如何将某个选项卡中的所有音频静音【英文标题】:chromeextension:howtomuteallaudiofromcertaintab【发布时间】:2014-09-1416:57:14【问题描述】:我一直在chrome扩展参考中搜索一些东西,以找到任何可以让我操纵标签的音频级... 查看详情

网站是不是可以跟踪用户的 chrome 扩展程序或他们的行为?

】网站是不是可以跟踪用户的chrome扩展程序或他们的行为?【英文标题】:Possibilityforawebsitetotracktheuser\'schromeextensions,ortheirbehaviour?网站是否可以跟踪用户的chrome扩展程序或他们的行为?【发布时间】:2016-11-1810:37:09【问题描述... 查看详情

chrome扩展content.js使动态网站崩溃[重复]

】chrome扩展content.js使动态网站崩溃[重复]【英文标题】:chromeextensioncontent.jscrashesdynamicwebsites[duplicate]【发布时间】:2021-01-2805:56:52【问题描述】:我尝试通过自定义chrome扩展插入覆盖,但是,当简单地将HTML添加到文档正文时,... 查看详情

可以使用 chrome 扩展将 HTML 标记添加到网站吗?

】可以使用chrome扩展将HTML标记添加到网站吗?【英文标题】:CanHTMLmarkupbeaddedtoawebsiteusingachromeextension?【发布时间】:2015-02-0118:20:48【问题描述】:我正在尝试创建一个Chrome扩展程序,该扩展程序创建一个像普通按钮一样的按钮... 查看详情

使用 chrome 扩展程序登录网站并从中获取数据

】使用chrome扩展程序登录网站并从中获取数据【英文标题】:Logintowebsitewithchromeextensionandgetdatafromit【发布时间】:2011-07-1806:19:16【问题描述】:我正在开发一个Chrome/Chromium扩展程序,它将从学校系统读取学校成绩和成绩。问题... 查看详情

跨域 Chrome 扩展

】跨域Chrome扩展【英文标题】:CrossOriginChromeExtension【发布时间】:2016-08-2808:17:47【问题描述】:上周左右我一直在阅读和使用Chrome扩展程序,但我在尝试实现我想要的东西时遇到了麻烦。我要创建的是一个扩展,它在后台(或... 查看详情

我的浏览器和常用扩展

Chrome浏览器对于国内的网络环境想使用基于原版的chrome,可以使用CentBrowser+Chrome同步助手扩展。?CentBorwser(百分浏览器):https://www.centbrowser.cn/相对来说是一款很干净的Chrome内核浏览器对于国内的浏览器,我推荐360极速浏览器当然... 查看详情

为啥程序员都喜欢用chrome浏览器?

Chrome浏览器作为浏览器中的一大巨头,无论是在程序员人群或是整个上网人群之中都占据着极大的比例,而Chrome浏览器之所以能够受到众人欢迎的原因有:其一是内核很高效;其二是界面很简洁;其三是扩展功能丰富;其四是浏... 查看详情

用于刷新页面的 Chrome 扩展

】用于刷新页面的Chrome扩展【英文标题】:Chromeextensionusedtorefreshpages【发布时间】:2012-02-1102:13:54【问题描述】:我正在尝试开发一个Chrome扩展程序,它可以通过每5分钟刷新一次来向我显示来自足球新闻网站的最近3条新闻(显... 查看详情

谷歌浏览器chrome的扩展程序安装目录(代码片段)

默认安装在:C:\\Users\\Administrator\\AppData\\Local\\Google\\Chrome\\UserData\\Default\\Extensions\\推荐一种快捷方法。在谷歌浏览器的扩展中chrome://extensions/可以复制ID,通过Everything快速搜索工具查找某个扩展的文件夹 查看详情

谷歌浏览器chrome的扩展程序安装目录(代码片段)

默认安装在:C:\\Users\\Administrator\\AppData\\Local\\Google\\Chrome\\UserData\\Default\\Extensions\\推荐一种快捷方法。在谷歌浏览器的扩展中chrome://extensions/可以复制ID,通过Everything快速搜索工具查找某个扩展的文件夹 查看详情

chrome扩展程序中的javascript点击行为问题

我目前正在开发一个chrome扩展,以自动执行手动任务,为SpringboardVR上的VR机器设置分配时间。我遇到过我的脚本问题,在此过程中按下最后一个按钮似乎没有触发正确的网站响应。该过程只需点击一系列提示(每次点击之间有一... 查看详情