☰

当我访问网站时如何强制使用我的 CSS 样式？

tag-icon • tag-icon google-chrome browser css
当我访问网站时如何强制使用我的 CSS 样式？

想象一下，我想webmaster.stackexchange.com每天访问（或其他网站），但我想改变标题的蓝色（例如将其更改为红色）。

访问网站时是否可以强制使用个人 CSS 样式？如果可以，我该怎么做？也许是网络浏览器提示或插件？（我使用 Chrome）

我想要一个自动解决方案，对于我访问的每个页面使用 Web 浏览器控制台（Chrome 上为 F12）更改 CSS 并不有趣。

答案1

你所追求的一般概念是“用户样式表”。
时尚的（铬合金/火狐) 为您提供了一种轻松的方式来管理每个站点的样式并根据需要打开/关闭它们。

答案2

2017 年，Stylish 变得非常沉重，充满了臃肿的功能，所以我决定放弃它。

我创建了一个替代方案 - Styler 扩展 - 它很轻量，样式简单但功能强大。您可以添加自定义 CSS 和 JavaScript/jQuery 代码。

Google Chrome 的 Styler 扩展程序

Firefox 的 Styler 扩展

源代码

我喜欢它并每天使用它的原因 - 主要是因为它可以在所有 Google Chrome 浏览器（在 Mac、Win 和 Linux 上）之间自动保存和自动同步。

答案3

自 2018 年起，Chrome（65）浏览器的集成 DevTools 中有一项功能称为本地覆盖。因此，不需要像 StyleBot、Stylish 或 Greasemonkey 这样的附加组件或扩展。

本地覆盖允许在任何实时站点上重写 CSS、JS 和 DOM。更改保存在本地文件夹中，并覆盖实时环境的内容。

可以访问Developer Tools > Sources >> Overrides

这使您可以选择一个自定义本地文件夹，该文件夹将包含 CSS 和 JS，它将覆盖当前网站自己的 CSS 和 JS。

开发者工具 > 源代码 > Over

答案4

在 Stylish 数据窃取丑闻曝光后，使用闭源浏览器扩展变得风险太大，除非它来自知名的软件开发商……但许多扩展都不是这样的……所以对于我可以自己自动化的事情，比如像你的例子那样更改 CSS，我一路使用开源 javascript 注入引擎，在 2023 年的所有引擎中，很难不推荐出色的 Violent-Monkey。与我尝试过的替代方案相比，它具有最漂亮、最完整的用户界面，并且它的文档写得非常好。

正如其他人在这里所说的，这些注入引擎很容易改变 CSS...例如，下面是一个脚本代码，它修复了每次页面重新加载时闪烁的可怕的 Instagram 白色启动画面：

// ==UserScript==
// @name        fix-instagram-white-splashscreen
// @namespace   Violentmonkey Scripts
// @match       https://www.instagram.com/*
// @grant       GM_addStyle
// @version     1.0
// @author      AUTHOR-NAME
// @description 8/13/2023, 12:35:17 PM
// ==/UserScript==

GM_addStyle (
  `
    #splash-screen {
      background-color: #333 !important;
    }

  `
);

就是这样。请注意，标题部分大部分由 Violent-Monkey 自动填充，也可以通过 UI 进行修改，而无需记住所有标志。它真的是一个强大的工具，我很高兴我正在学习使用它，因为它可以在许多不同的用例中派上用场……对于其中许多，可能已经有其他用户编写的脚本，就像 Grease Monkey 和其他人一样，但我建议只有在您自己可以阅读他们的代码时才使用它们，因为你永远不知道……

相关内容