一款支持审查元素的安卓浏览器 修改网页浏览器APP

简单的来说，这是一款可以修改网页字体的软件，并没有chrome的审查元素那么强大

想要修改网页内容的时候点一下右上角的“笔”图标，即可开始装逼之路~

不只是可以修改这一个网站，基本上所有的网站都可以修改的哦！电脑装不完的逼，手机继续装

声明：本文只针对几乎没有前端语言知识基础，但python基础和streamlit基础相对熟练的人群。欢迎前端高手捉虫提出修改建议【本文来源于群友Who_F_Sleep】

众所周知，Streamlit的组件设计美观，开箱即用。但是关于样式部分，可自由修改的内容不多。比如我们可以做到通过给任意组件添加可选参数 disabled=True 来做到“禁用”的效果，如下图1：

但是其他方面能允许我们自由定义的样式实在不多，比如我们无法通过Streamlit的官方参数来给button设置一个背景色。这时候我们就需要借助真正的前端工具语言：HTML、CSS、JavaScript，可以实现如下图的效果：

图2 只为第二个button添加背景色

对于Streamlit来说，在后端（python编辑器内）调用这些前端工具语言并不难，有两种途径可以选择：

上图2演示了用st.markdown撰写CSS来修改st组件的样式（直接复制粘贴应当无效）。

下图3演示了用st.markdown撰写HTML为st添加一个极简的自定义组件：

所以，用st.markdown撰写前端代码的特点如下：

优点：不用重复导入；如果撰写HTML代码，代码和其他组件都在主页面内；便于添加和修改主页面的CSS样式

缺点：不能用于撰写JavaScript；撰写HTML则不方便自由调整宽高；有被Streamlit官方弃用的风险

图4 演示被其他st组件包围的html()效果，高度已设置

并且，我们可以通过用html()撰写JavaScript来修改、添加、删除原本的st组件内容或是为他们增加一些事件，比如点击事件（需要较好的JavaScript语言基础），如下图，我用JavaScript删除了Streamlit右上角的汉堡菜单按钮：

图5 演示JS删除st汉堡菜单按钮

所以，用html()撰写前端代码的特点如下：

优点：可自由编辑宽高，便于布局；可撰写JavaScript；

了解了以上两种方法后，不难看出：

对于HTML，一般来说使用st.markdown撰写更加保险，也方便页面内相互调用。但也需要用st.markdown写css对样式进行支持。如果只需要撰写简单的HTML元素，也可以直接使用html()（记得要设置宽高）

对于CSS，如果想简单直接地修改页面内st组件的样式，一般需要选择st.markdown。而用html()调用JS也可以做到

对于JavaScript，由于st.markdown的位置本身就在标签内，所以无法像常规的JavaScript一样写在标签内。所以只能使用html()

一般来说，撰写前端语言有一定的门槛，至少需要对html有一定的了解。但善用Chrome开发者工具（F12），则可以大大降低撰写CSS的难度（复制粘贴能有什么难度）。下面来示范如何使用：

首先需要有一个Chrome浏览器（或至少是Chrome内核的浏览器）。打开自己的Streamlit页面后，按下F12（Mac用户可能需要按住Fn再按F12），即可打开开发者工具，如下图：

图6 开发者工具中要用到的内容

接下来按顺序演示我们需要了解的开发者工具中的内容：

二、页面的HTML代码

左侧页面中的st组件，本质上是由HTML代码+CSS样式组成。HTML代码决定它「是什么」，CSS样式决定它「长什么样」。那么1. 中的内容，就是开发者工具中用于显示当前页面HTML代码的元素（英文版本是Elements）窗口。例如，当前元素窗口中，被选中的HTML内容就是：

HTML代码由一个个标签嵌套、排列组成。如上述代码就是选中的button标签。一个最简单的button标签就是以开头，以结尾。

三、使用辅助检查功能快速定位标签

那么，如何在茫茫多的折叠标签中找到我们想要修改的st组件的标签呢？这就要用到2.中的按钮，点击一下，就可以使光标进入辅助检查模式。

例如此处想要选择第二个按钮，那么就按下辅助检查按钮（快捷键：Ctrl+Shift+C）将鼠标悬停到左侧页面中的组件上，可以看到蓝色绿色等颜色。将色彩范围缩小到这个按钮范围内，就代表已经锁定了这个按钮，再按下左键即可在元素窗口中看到对应的标签已经被选中：

图7 使用辅助检查功能选中一个标签

四、在开发者工具中尝试修改CSS样式

既然已经选中了想要修改的st组件，接下来就是要写代码去修改它的样式。但是在写代码之前，可以在开发者工具中先模拟一下，尝试修改，确保选中的HTML标签就是自己想要修改的那一个。在图6的3. 中就是当前选中的元素的CSS样式代码，它由一段段CSS代码组成。一个CSS代码的构成如下：

它的结构类似于Python字典的键值对，只不过不同的CSS属性之间以";"分隔。在{}之前的是CSS选择器路径，这个路径决定了{}中的属性应用于HTML中的哪个标签。

在开发者工具里，任何一个CSS中，没有变为灰色，且没有被划线删除的CSS属性都会被应用。而如果两个CSS中出现相同的属性，排布更靠上的将会覆盖排布靠下的，这就是划线删除的来源。判断哪个CSS被使用比较复杂，所以可以点击「样式」后的第二栏「计算样式」来查看当前标签应用的CSS属性都有哪些：

如果对这些CSS属性不了解，或者是英文阅读比较吃力，可以在CSS 参考手册中对照理解。

现在来进行一个最直观的测试演示，修改button的背景色。图7中已经给出，background-color（背景色）的属性值为白色，RGBA为rgb(255, 255, 255)。点击background-color后的箭头（鼠标悬停后显示），就会定位到样式中的对应CSS去：

图9 计算样式定位到样式中

此时点击rgb前的白色色块，在取色器中随意修改一个颜色（按回车确认），可以看到按钮的背景色已经发生了变化。证明找到的标签没有错（如果有错，则可以在当前标签的上下继续找，并且尝试修改）。但是也会发现，不止一个button的背景色发生了变化，所有button都变了：

图9 修改CSS，所有应用该CSS的标签都会受影响

这是因为不止一个button使用了该CSS，所有的st.button应用的CSS都应用了这一个CSS（这是因为CSS选择器的选择方式是选择HTML中class="css-1cpxqw2"的所有标签，而目前button都应用了这个标签）。

如果想只修改单个标签，则不能继续在这个CSS中进行修改了。需要在更高级的CSS中写background-color来覆盖掉它。而样式中最上层正好是element.style {}，指该元素的样式，只针对该元素。那么就在它中间新写一条background-color属性，来覆盖下面的属性，且仅应用于当前标签，如图：

可以看到成功了，但是如何把它应用到后端的Python代码中呢？

前面提到，CSS代码由CSS选择器和CSS属性组成。CSS选择器决定了这些属性将应用于哪些元素。如果没有使用CSS选择器的能力（并且由于Streamlit组件的高度近似性，很难通过自己写CSS选择器来精准定位到一个元素），不如直接从开发者工具中复制：只需要右键点击选中的HTML元素，选择复制-复制selector（英文版本可能不同，但是位置相同），就获得了CSS选择器路径，如图：

图10 复制CSS选择器路径

会得到一行选择器的代码。现在就可以在后端构造st.markdown中的CSS代码了：

将这段代码放置在所有组件最后（因为st.markdown虽然不显示，但会占用一定空间，放在最后可以避免影响布局），就可以在前端页面发现已经成功应用了。至此大功告成，别的CSS属性也可以以这种方法修改了。

如果需要修改多个组件，只需要将多个CSS放在同一个st.markdown的标签内即可

如果使用了streamlit_option_menu 等第三方库，则不能确保以上方法能够奏效

复制的CSS选择器路径不是固定的，如果在已经复制路径的组件前再添加/删除了其他组件导致页面布局发生变化，选择器路径自然也会发生变化，需要重新复制

由于js学习成本比较高，所以不在本文赘述。这里只给和我一样不是特别精通js，想在st中应用的朋友们一点提示：

html()会生成一个iframe，所有的js代码都写在iframe的head标签中，并在iframe中运行。alert之类的不受document影响的功能能正常运行，但是如果不跳出iframe，所有想通过js操作st页面DOM的想法都不能实现。

JS的选择器跳出iframe获取到主页面元素的方法如下：

越来越多的朋友使用stremalit做出了优秀的网页应用，在讨论中思路越来越宽阔，欢迎热爱学习的你加入讨论群，一起讨论。

扫码添加公众号作者二维码入群，验证信息：我来自公众号Streamlit