GmonkeyWides - Woodpecker Wiki for CPUG

回到[wiki:self/Greasemonkey Greasemonkey]-- FireFox插件开发利器！

9/9/2005 [http://spaces.msn.com/members/weide/Blog/cns!1pzVDh31qyi3BSHtcBK8IkFg!133.entry GreaseMonkey is so cool]

::-- ZoomQuiet [DateTime(2005-09-09T04:03:02Z)] TableOfContents

在developerworks看文档的时候，style里定义的Code字体太小（code{ font-family: Courier, monospace; font-size: +2; }），刚开始看的时候还以为那是个下划线再看发现那里应该是有内容的，否则文章连贯不起来，放大了无数倍之后，才发现居然真的有字只好从菜单“工具－DOM查看器”，修改StyleSheets中Code的字体；换页之后发现那个Css是附带在每个页面当中的，每换一页都要修改一次，着实麻烦，于是就想到了GreaseMonkey。没想到的是，利用JS修改全局Css又费了一番功夫，好在终于成功了

IBMEditStyleCode.user.js

// IBM Develop's stye Code font size is two small,so change it
// version 0.1 BETA!
// 2005-09-08
// Copyright (c) 2005, Weide
// Released under the GPL license
// http://www.gnu.org/copyleft/gpl.html
//
// --------------------------------------------------------------------
//
// This is a Greasemonkey user script.  To install it, you need
// Greasemonkey 0.5.3 or later: http://greasemonkey.mozdev.org/
// Then restart Firefox and revisit this script.
// Under Tools, there will be a new menu item to "Install User Script".
// Accept the default configuration and install.
//
// To uninstall, go to Tools/Manage User Scripts,
// select @name(see follow), and click Uninstall.
//
// --------------------------------------------------------------------
//
// ==UserScript==
// @name          IBM Edit Sytle Code
// @namespace     http://spaces.msn.com/members/weide/
// @description   Edit IBM Develop's style code
// @include       *.ibm.com*
// ==/UserScript==

// You may find more functions at:
// http://developer.apple.com/internet/webcontent/styles.html


var ugly_selectorText_workaround_flag = false;
var allStyleRules;


String.prototype.trim = function(){
   return this.replace(/(^\s+)|\s+$/g,"");
}

String.prototype.isEquals = function(str) {
    return this.toLowerCase() == str.toLowerCase();
}

function ugly_selectorText_workaround() {
        if((navigator.userAgent.indexOf("Gecko") == -1) ||
           (ugly_selectorText_workaround_flag)) {
                return; // we've already been here or shouldn't be here
        }
        var styleElements = document.getElementsByTagName("style");
        
        for(var i = 0; i < styleElements.length; i++) {
                var styleText = styleElements[i].firstChild.data;
                // this should be using match(/\b[\w-.]+(?=\s*\{)/g but ?= causes an
                // error in IE5, so we include the open brace and then strip it
                allStyleRules = styleText.match(/\b[\w-.]+(\s*\{)/g);
        }

        for(var i = 0; i < allStyleRules.length; i++) {
                // probably insufficient for people who like random gobs of 
                // whitespace in their styles
                allStyleRules[i] = allStyleRules[i].substr(0, (allStyleRules[i].length - 2)).trim();
        }
        ugly_selectorText_workaround_flag = true;
}

// setStyleByTag: given an element type, style property and
// value, and whether the property should override inline styles or
// just global stylesheet preferences, apply the style.
// args:
//  e - element type or id
//  p - property
//  v - value
//  g - boolean 0: modify global only; 1: modify all elements in document
function setStyleByTag(e, p, v, g) {
    e=e.trim();
    if(g) {
        var elements = document.getElementsByTagName(e);
        for(var i = 0; i < elements.length; i++) {
            elements.item(i).style[p] = v;
        }
    } else {
        var sheets = document.styleSheets;
        if(sheets.length > 0) {
            for(var i = 0; i < sheets.length; i++) {
                var rules = sheets[i].cssRules;
                if (! ( rules ) ) rules = sheets[i].rules;
                if(rules.length > 0) {
                    for(var j = 0; j < rules.length; j++) {
                        var s = rules[j].style;
                        // selectorText broken in NS 6/Mozilla: see
                        // http://bugzilla.mozilla.org/show_bug.cgi?id=51944
                        ugly_selectorText_workaround();
                        if(allStyleRules) {
                            if(allStyleRules[j].isEquals(e)) {
                                s[p] = v;
                            }           
                        } else {//alert(rules[j].selectorText+e+s.fontsize);
                            // use the native selectorText and style stuff
                            if (rules[j].selectorText.isEquals(e)){ //(((s[p] != "") && (s[p] != null)) &&(rules[j].selectorText.isEquals(e))) {
                                s[p] = v;
                            }
                        }

                    }
                }
            }
        }
    }
}

setStyleByTag('code','font','12px  Courier, monospace',0)

具有良好插件结构(扩展机制)的软件是令人舒服的，FireFox即是其中一款。GreaseMonkey是FireFox的一个扩展，可以执行JavaScript脚本，为页面增加许多实用功能。 Greasemonkey 提供全自动化的服务，帮你 Match Domain，自动执行 User scripts，加强管理。Greasemonkey的出现从本质冲击了我们对浏览器的使用概念，通过浏览器对网页执行本地脚本程序，控制网页的呈现方式，添加功能。其实Greasemonkey本身并没有多么的显眼，因为他的功能完全类似于一个基础设施，所以，看不出他能干什么。他是一个中间的承载器件，要是把各种JavaScript脚本语言加载上去，那功能就太丰富多彩了。对于软件架构方面的启发就是：Kernel+插件容器(包含插件辅助工具)+插件。Kernel 是最底层的运行支撑，提供最基本的功能支持，设计要求为“简单、稳定”；插件机制提供了系统足够的扩展能力，插件将提供用户需要的业务功能；插件容器既作为插件的载体和管理工具，同时提供插件辅助工具，可以通过脚本语言如JavaScript或Python利用Kernel、插件提供的接口方便地扩展新的应用，插件辅助工具更多地应用在高层业务逻辑或表现层上，大大增加了系统的灵活性。这种模式并不是创新，事实上很多大型软件就采用了这种方式。目前对于为应用程序添加Javascript或Python脚本的扩展接口，尚未有完整的解决办法，继续学习中……

参考链接：