在互联网的世界里，JavaScript 和 CSS 不仅仅是后端技术。可以通过编写自己的脚本和样式表，让网页浏览器应用它们，从而实现对任何网站的个性化定制。本文将带了解这种神秘的 JavaScript 和 CSS 形式，并探讨为什么它拥有成千上万的忠实粉丝，即使他们中许多人甚至没有写过一行 JavaScript 或 CSS 代码，但他们坚信自己的浏览方式是超群的。
是否曾经希望某些网站不要使用那些糟糕的颜色选择、对比度或字体大小？是否希望其他网站不要对耐心提出无法忍受的要求，或者试图让感到不安？用户脚本和用户样式可以帮助。它们可以让顽固的网站变得听话，让好的网站变得更好。最终，将掌控一切。
用户脚本和用户样式是由终端用户（这些使用浏览器的人）编写的，目的是自定义访问的网站的功能或外观和感觉。这与普遍的看法相反，即 CSS 和 JavaScript 文件是由网页设计师编写的，并且只能作为它们起源的网站的一部分。
虽然看起来需要 CSS 和 JavaScript 的知识，但大多数粉丝只是访问像 OpenUserJS.org 或 UserStyles.org 这样的网站来获取他们想要的东西。就像书签一样，成千上万的用户 JS 和用户 CSS 几乎用于所有可以想象的目的。本文作者几乎编写了他所有的用户脚本/样式。如果是一个网页开发者，可能也想这样做。
在 Firefox/Seamonkey/Iceape 浏览器中，可以使用 Greasemonkey 插件来管理和执行用户脚本，使用 Stylish 插件来管理和应用用户样式。这两个插件都提供了一个文本编辑器来编写 JS/CSS。插件还允许将 CSS/JS 应用到特定网站（使用 URL 中的通配符）或所有网站。
旧版 Opera（12.x 及更早版本）浏览器总是内置支持用户脚本和样式。它不得不这样做，因为它通常因为一些无知的网页程序员依赖浏览器检测（这有利于 Internet Explorer）而不是功能检测而被排除在流行网站之外。Opera 现在已经成为 Chrome 的克隆，基于 Presto 引擎的 Opera 12.x 已经过时。
以著名的 Gmail 登录页面为例。曾经有一段时间，网络邮件提供商会默认不勾选 "保持登录状态"。现在，默认情况下已经勾选了（不仅仅是 Google，其他提供商也是如此）。每次登录时都要取消勾选这个选项是一个容易忘记的额外步骤。
如何让它自动取消勾选？这个 Greasemonkey 脚本可以为做到这一点。
// ==UserScript==
// @name Uncheck Google Signed-In Checkbox
// @description Automatically unchecks the "Stay signed-in" check box
// @include https://accounts.google.com/*
// @version 1
// @grant none
// ==/UserScript==
document.addEventListener("DOMContentLoaded", uncheckGoogleStaySignedInButton, false);
function uncheckGoogleStaySignedInButton() {
try {
document.getElementById("PersistentCookie").checked = false;
} catch (err) {
console.error("UGSIC Greasemonkey Error: " + err);
}
}
Greasemonkey 插件在所有匹配 @include 过滤器的页面上执行此脚本。脚本找到复选框并取消勾选它。（稍作修改，也可以让同一个脚本在 Yahoo Mail 登录页面上工作。）
在编写脚本之前，需要找到复选框的 HTML 元素 ID。任何值得称道的网页开发者都知道，这可以通过在网页上右键单击复选框并选择 "检查元素" 来完成。
是否觉得 Yahoo Mail 页面在滚动前要求提供电话号码很烦人？那么，这个用户脚本将自动帮助跳过这一页。
// ==UserScript==
// @name Bypass Phone Number Prompt on Yahoo Mail
// @description Get past the page that asks for your phone number
// @include https://edit.yahoo.com/progreg/*
// @exclude %exclude%
// @version 1
// @grant none
// ==/UserScript==
document.addEventListener("DOMContentLoaded", getPastPhoneNumberPage, false);
function getPastPhoneNumberPage() {
try {
window.alert("Moving past the page");
location.href = "https://mail.yahoo.com";
} catch (err) {
console.log("BPNPYM Greasemonkey Error: " + err);
}
}
如果曾经拒绝提供号码，那么网站应该尊重并记住决定。通过每次登录时都装傻，它试图强迫交出号码。
以 DuckDuckGo 页面为例。将这个搜索引擎设置为默认，因为它更尊重用户。然而，发现它的网页颜色和对比度并不符合喜好。所以为它编写了一个用户 CSS，并记得在样式后加上 "!important" 属性以覆盖页面作者的设置。
对于 Wikipedia 网站，使用这个 CSS，因为页面通常文字密集，并且占据了整个屏幕的宽度。在大屏幕上，它们真的可以让人脖子疼。
* { font-family: Century Schoolbook L!important; }
div#content { font-size: 1.2em; width: 7in; }
作为一名用户脚本和样式的粉丝，在 Android 浏览器中添加了运行它们的能力。虽然用户样式可以像通常一样编写，但用户脚本必须以书签格式编写 - 前缀为 "javascript:"。例如，要编辑一个网页，使用这个脚本。
javascript:(function() {
document.body.contentEditable = true;
document.designMode = 'on';
})();
这个脚本甚至可以在桌面浏览器中工作，如 Internet Explorer 或 Firefox，但可能不适用于 Chrome。不妨试试。
当然，网页会发生变化，ID（或者试图干预的任何东西）也会随之变化。 Greasemonkey 脚本最终可能会停止工作。将不得不自己修复它，或者从网络上更新它，或者找到一个新的。
去年，发布了一个 Greasemonkey 脚本，它会遍历 Facebook 个人资料的活动日志中的所有帖子，并逐个删除它们 - 这种方式比要求 Facebook 一次性删除它们更有趣。这是由于一个旧的 Greasemonkey 脚本引用了一个同样旧的文章[2]已经过时。在另一个案例中，编写的一个 Greasemonkey 脚本在发布后一个月内就停止了工作，用于下载 YouTube 视频作为 MP4/FLV/WebM 文件。尽管修复了它，但可能不久之后脚本又需要关注了。