用户脚本 (JS) 和用户样式 (CSS)

我曾在 2016 年 2 月的印度杂志《Open Source For You》上发表过这篇文章。我将文章的原始版本发布到 CodeProject，以触达更广泛的受众。

引言

JavaScript 和 CSS 不仅仅是服务器端技术。您可以编写自己的脚本和样式表，让您的 Web 浏览器将它们应用到任何网站上。在本文中，我们将快速浏览这种小众的 JavaScript 和 CSS 用法，并了解为什么它拥有数千名忠实粉丝，其中许多人甚至没有写过一行 JavaScript 或 CSS 代码，但他们发誓他们的浏览方式比其他人更胜一筹。

背景

您是否曾多次希望某些网站不要做出糟糕的颜色、对比度或字体大小选择？您是否曾希望其他网站不要对您的耐心提出无法忍受的要求，或者试图让您感到脆弱？嗯……用户样式和脚本可以提供帮助。它们可以使顽固的网站变得乖巧，使好的网站变得更好。最终，您将掌控一切。

用户脚本和用户样式

用户脚本和用户样式应由最终用户（我们，即使用浏览器的人）编写，以自定义我们（访问的）网站的功能或外观。

这与人们普遍认为 CSS 和 JavaScript 文件由网页设计师编写，并且只能是它们来源网站一部分的看法截然相反。

虽然看起来似乎需要 CSS 和 JavaScript 知识，但大多数粉丝只需访问 OpenUserJS.org 或 UserStyles.org 等网站即可获得他们想要的东西。就像书签小工具一样，几乎可以满足所有想象到的用途的上千个用户 JS 和用户 CSS 已经被发布。本文作者几乎编写了他所有的用户脚本/样式。如果您是一名 Web 开发人员，您可能也想这样做。

在 Firefox/Seamonkey/Iceape 浏览器中，您可以使用 Greasemonkey 插件来管理和执行用户脚本，使用 Stylish 插件来管理和应用用户样式。这两个插件都提供了一个文本编辑器来编写您的 JS/CSS。这些插件还可以让您将 CSS/JS 应用到特定站点（使用 URL 中的通配符）或所有站点。

Blink 之前的 Opera（12.x 及更早版本）浏览器一直内置了对用户脚本和样式的支持。它不得不这样做，因为它通常会被流行的网站排除在外，原因是一些不明智的 Web 程序员依赖浏览器检测（偏向 Internet Explorer），而不是功能检测。Opera 现在已经变成了一个 Chrome 克隆版，基于 Presto 引擎的 Opera 12.x 已经过时。

用户脚本和用户样式的用途最好通过示例来说明。

用户脚本示例

这是著名的 Gmail 登录页面。曾几何时，Web 邮件提供商默认不勾选“保持登录”选项。现在，默认勾选了（不仅是 Google，其他提供商也是如此）。每次登录时取消勾选此框都是一个容易忘记的额外步骤。

如何让它自动取消勾选？这个 Greasemonkey 脚本可以为您做到。

// ==UserScript==
// @name        Uncheck Google Signed-In Checkbox
// @description Automatically unchecks the "Stay signed-in" check box
// @include     https://#/*
// @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。任何有经验的 Web 开发人员都知道，这可以通过右键单击网页上的复选框并从上下文菜单中选择“**检查元素**”来完成。

您是否觉得 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;  }

移动设备上的用户 JS/CSS

作为用户脚本和样式的爱好者，我将运行它们的功能添加到了我为 Android 创建的一个同名浏览器中。虽然用户样式可以按常规方式编写，但用户脚本必须以书签小工具 [1] 格式编写——前缀为“javascript:”。例如，为了编辑网页，我使用此脚本。

javascript:(function() { document.body.contentEditable=true;document.designMode='on'; }) ();  

此脚本甚至可以在桌面浏览器（如 Internet Explorer 或 Firefox）中运行，但可能不适用于 Chrome。请继续尝试。

维护

当然，网页会发生变化，ID（或您试图修改的任何内容）也会随之改变。您的 Greasemonkey 脚本可能最终会停止工作。您必须自己修复它，或者从网上更新它，或者找到一个新的。

去年，我发布了一个Greasemonkey 脚本，该脚本可以遍历 Facebook 个人资料活动日志中的所有帖子，逐个删除——这样更有趣，而不是要求 Facebook 一次性全部删除。这是因为一个被一篇同样古老的文章 [2] 引用的旧 Greasemonkey 脚本已经过时。在另一个例子中，我编写的用于将 YouTube 视频下载为 MP4/FLV/WebM 格式的 Greasemonkey 脚本在发布一个月内就停止工作了。尽管我修复了它，但脚本可能很快就需要再次关注。

关注点

尽管用户脚本和样式似乎有有限的保质期，但开源的美妙之处在于任何人都可以复兴 JS 或 CSS 并将其带回社区。

除了上述网站，greasyfork.org 也提供用户脚本。长期以来，Greasemonkey 开发者一直拥有 UserScripts.org 网站来分发用户脚本。在失效 [3] 之前，该网站受到了一些不理解用户脚本的控制狂站长的 DMCA 请求的困扰，遭受了垃圾邮件/DDoS 攻击，并且没有全职管理员。Userscripts.org 的许多原始开发者尚未迁移到新网站。因此，许多用户脚本散布在网上，包括 gist.github.com 等网站。我建议普通读者在安装任何脚本或样式之前，先浏览评论区或论坛。Greasemonkey 和 Stylish 扩展程序可以通过在 Firefox 附加组件管理器中搜索轻松安装。

---

参考文献

1. 书签小工具构建器 - http://subsimple.com/bookmarklets/jsbuilder.htm
2. Jennifer Golbeck：我决定删除我所有的 Facebook 活动 - http://www.slate.com/articles/technology/future_tense/2014/01/facebook_cleansing_how_to_delete_all_of_your_account_activity.html
3. Hacker News：将接力棒传给 userscripts.org - https://news.ycombinator.com/item?id=1574840