Tampermonkey 自定义 CSS 主题

Tampermonkey 是一个浏览器扩展，它可以让用户在网页上添加自定义脚本和样式。其中，自定义 CSS 功能可以帮助用户轻松地改变网页的外观和样式，让用户有更好的浏览体验。

下面是如何在 Tampermonkey 中使用自定义 CSS 主题的介绍。

安装 Tampermonkey

首先，需要在浏览器中安装 Tampermonkey 插件。可在 Chrome 网上应用商店中搜索 Tampermonkey，然后添加至 Chrome 浏览器中。

创建自定义 CSS 主题

在安装和开启 Tampermonkey 插件后，可以在 Tampermonkey 的用户脚本菜单中找到“新建脚本”选项。

在新建脚本页面中，可以输入以下代码，用于创建自定义 CSS 主题：

/* 自定义 CSS 样式开始 */

/* 此处输入你想要更改的网页元素样式 */
body {
    background-color: #f5f5f5;
}

/* 自定义 CSS 样式结束 */

尽量使用作用域限制，只针对特定的网页进行样式修改，避免干扰其他网站。

导入 CSS 主题

Tampermonkey 对于自定义 CSS 主题提供了两种导入方式：本地导入和在线导入。

本地导入

本地导入 CSS 主题是将一个已经创建的 CSS 文件导入到 Tampermonkey 中。在 Tampermonkey 的用户脚本菜单中找到“添加”选项，选择“从文件中添加脚本”即可。此时可以选择本地已经创建好的 CSS 文件，导入至 Tampermonkey 中。

在线导入

在线导入 CSS 主题是将一个已经上传到云端的 CSS 文件导入到 Tampermonkey 中。在 Tampermonkey 的用户脚本菜单中找到“添加”选项，选择“从 URL 中添加脚本”即可。此时需要填写 CSS 文件的 URL 地址，再点击添加即可完成导入。

应用 CSS 主题

导入 CSS 主题后，可以在 Tampermonkey 的用户脚本菜单中找到对应的脚本，点击“编辑”按钮进入编辑页面。

在编辑页面中，可以在“UserScript”部分添加以下代码：

// ==UserScript==
// @name         My Custom Theme
// @namespace    http://tampermonkey-theme/custom
// @version      0.1
// @description  A custom theme for Tampermonkey
// @match        http://*/*
// @match        https://*/*
// @grant        none
// ==/UserScript==

/* 导入 CSS 文件 */
var link = document.createElement("link");
link.href = "http://path/to/your/custom.css";
link.type = "text/css";
link.rel = "stylesheet";
document.getElementsByTagName("head")[0].appendChild(link);

其中，“http://path/to/your/custom.css”需改为实际的 CSS 文件的 URL 地址。

保存后，打开空白的网页，即可看到自定义 CSS 主题已经生效了。

总结

通过 Tampermonkey 的自定义 CSS 主题功能，我们可以很方便地改变网页的外观和样式，提高浏览体验。

使用方法简单，添加自己的 CSS 样式可以让网页更好的适应个人需求和口味。