浏览器渲染钩子

Question

浏览器是否提供任何预呈现钩子，在呈现DOM元素之前可以将更改应用到它们的样式上？

例如，我可能想将任何红色的颜色更改为绿色。

这个要求是对浏览器扩展的要求，所以解决方案应该在不同的网页上工作。重写元素的样式而不知道源代码的样式并不简单，因为元素的样式是运行在其上的CSS和Javascript的结果，而且不同网站的机制不同。脑海中浮现的方式有：

• 解析网页的CSS和Javascript以确定元素的样式。这似乎是多余的，因为浏览器也在这样做。
• 扫描DOM并检查每个元素的计算样式和重写内容。这是可行的，但是如果元素动态变化，我们必须反复扫描可能会很重的更改。

那么，这样的浏览器钩子存在吗？如果没有，你会推荐什么样的替代方法？

Answer 1

对于您想要实现的目标，查看名为暗读物的Chrome扩展的代码将非常有帮助。这个扩展可以使整个页面变黑，但是通过分析代码的css可以实现智能。如果某物已经是黑暗的，它就会保持原状。明亮的背景是黑色的，只有当需要对比时，文字才是白色的。一张图片就能把事情弄清楚

原始

​

黑暗阅读器渲染

​

黑暗阅读器使用js分析css和样式，并在页面中注入自己的CSS样式以获得所需的效果。

如果您真的想要访问浏览器的呈现管道，那么请看一看霍迪尼项目，它将允许将来对浏览器进行这种自定义。现在还没准备好。

Answer 2

没有元素渲染钩子，没有。您可以在呈现下一个帧之前通过requestAnimationFrame请求回调(通常为每秒60帧)，但这并不是进行您所想到的那种检查的好地方。

要捕获对单个元素的更改，可以设置突变观测器以捕获对其style属性的更改(通过在代码中设置style属性上的各种属性来更改该属性)。你会想看看这是否会变成一个性能问题。

因此，我怀疑您需要将您所描述的内容和上面的内容结合起来：

• 浏览样式表以查找要更改的规则
• 使用要更改的内联样式标识元素
• 侦听style属性的更改，以便在必要时响应这些更改