用于覆盖站点 css/自定义 css 的用户脚本答案

【问题标题】：userscript for overriding site css/ custom css用于覆盖站点 css/自定义 css 的用户脚本
【发布时间】：2012-02-06 05:12:43
【问题描述】：

我有一个有效的 userstyles.org 解决方案。但是，我也想通过用户脚本获得一些自定义 css 来覆盖给定网站的 css。

这是我目前所拥有的：

// ==UserScript==
// @id            Custom_Style
// @name          Custom CSS for domain.com
// @version       1.0
// @author        vulgarbulgar
// @description   Changes the default css for domain.com
// @include       http://site.com/*
// @include       https://site.com/*
// @include       http://*.site.com/*
// @include       https://*.site.com/*
// @resource      css http://userstyles.org/custom.css
// ==/UserScript==

$(document).ready(function() {
    GM_addStyle(GM_getResourceText("css"));
});

似乎不起作用。

我没有任何js知识，但是从一些例子中拼凑出上面的内容。将上述用户脚本安装到 chrome 中似乎不会在访问目标站点时触发更改。

谢谢。

【问题讨论】：

标签： javascript css userscripts

【解决方案1】：

该脚本使用$(document).ready()，但没有用于jQuery 的@require 指令！

此外，（大多数）GM 脚本中不需要$(document).ready()，因为默认情况下 Greasemonkey 会在正确的时间运行。

另一件能让你保持理智的事情是：不要使用如此短的、重载的名称作为变量。使用可搜索的东西代替“css”。

所以你当前的脚本会变成：

// ==UserScript==
// @id            Custom_Style
// @name          Custom CSS for domain.com
// @version       1.0
// @author        vulgarbulgar
// @description   Changes the default css for domain.com
// @include       http://site.com/*
// @include       https://site.com/*
// @include       http://*.site.com/*
// @include       https://*.site.com/*
// @resource      myCustomCss http://userstyles.org/custom.css
// @grant         GM_addStyle
// @grant         GM_getResourceText
// ==/UserScript==

GM_addStyle (GM_getResourceText ("myCustomCss") );

【讨论】：