浏览器渲染挂钩
Browser render hook
浏览器是否提供任何预渲染挂钩，您可以在 DOM 元素呈现之前对它们应用样式更改？
例如，我可能想将 red 的颜色更改为 green
此要求适用于浏览器扩展，因此该解决方案应该适用于不同的网页。在不知道源代码的情况下覆盖元素的样式并非易事，因为元素的样式是在其上运行的 CSS 和 Javascript 的结果，并且机制不同不同的网站。想到的方法是：
- 解析网页的CSS和Javascript，确定元素的样式。这似乎是多余的，因为浏览器也在这样做
- 扫描 DOM 并检查每个元素的计算样式和覆盖内容。这可行，但如果元素动态变化，我们必须重复扫描可能很重的变化
那么这样的浏览器挂钩是否存在？如果不是，您会推荐什么替代方法？
没有每个元素的渲染挂钩，没有。您可以在渲染下一帧（通常每秒 60 帧）之前通过 requestAnimationFrame 请求回调，但这不是进行您正在考虑的那种检查的好地方。
要捕获对单个元素的更改，您可以设置 mutation observers 以捕获对其 style 属性的更改（ 是 通过设置各种style 属性 代码中的属性）。您需要观察这是否会变成性能问题。
所以我怀疑您需要结合上述内容和上述内容：
- 搜索 style sheets 以查找您要更改的规则
- 确定具有您要更改的内联样式的元素
- 侦听
style 属性的更改，以便您可以在必要时响应这些更改
对于您要实现的目标，查看名为 Dark Reader 的 Chrome 扩展的代码会对您很有帮助。这个扩展可以让你的整个页面变暗，但通过分析代码的 css 来智能地做到这一点。如果某些东西已经是黑暗的，它会保持原样。只有在需要对比度时，才会将明亮的背景设为黑色，将文本设为白色。
图片会让事情变得清晰
原创
黑暗reader渲染
深色reader使用js解析css和样式，在页面中注入自己的CSS样式，达到需要的效果。
如果您真的想利用浏览器的渲染管道，请查看 Project Houdini 将来允许对浏览器进行此类自定义。现在还没准备好。
浏览器是否提供任何预渲染挂钩，您可以在 DOM 元素呈现之前对它们应用样式更改？
例如，我可能想将 red 的颜色更改为 green
此要求适用于浏览器扩展，因此该解决方案应该适用于不同的网页。在不知道源代码的情况下覆盖元素的样式并非易事，因为元素的样式是在其上运行的 CSS 和 Javascript 的结果，并且机制不同不同的网站。想到的方法是：
- 解析网页的CSS和Javascript，确定元素的样式。这似乎是多余的，因为浏览器也在这样做
- 扫描 DOM 并检查每个元素的计算样式和覆盖内容。这可行，但如果元素动态变化，我们必须重复扫描可能很重的变化
那么这样的浏览器挂钩是否存在？如果不是，您会推荐什么替代方法？
没有每个元素的渲染挂钩，没有。您可以在渲染下一帧（通常每秒 60 帧）之前通过 requestAnimationFrame 请求回调，但这不是进行您正在考虑的那种检查的好地方。
要捕获对单个元素的更改，您可以设置 mutation observers 以捕获对其 style 属性的更改（ 是 通过设置各种style 属性 代码中的属性）。您需要观察这是否会变成性能问题。
所以我怀疑您需要结合上述内容和上述内容：
- 搜索 style sheets 以查找您要更改的规则
- 确定具有您要更改的内联样式的元素
- 侦听
style属性的更改，以便您可以在必要时响应这些更改
对于您要实现的目标，查看名为 Dark Reader 的 Chrome 扩展的代码会对您很有帮助。这个扩展可以让你的整个页面变暗，但通过分析代码的 css 来智能地做到这一点。如果某些东西已经是黑暗的，它会保持原样。只有在需要对比度时，才会将明亮的背景设为黑色，将文本设为白色。 图片会让事情变得清晰
原创
黑暗reader渲染
深色reader使用js解析css和样式，在页面中注入自己的CSS样式，达到需要的效果。
如果您真的想利用浏览器的渲染管道，请查看 Project Houdini 将来允许对浏览器进行此类自定义。现在还没准备好。