Greasemonkey-- FireFox插件开发利器!

1. 简介

Greasemonkey一个Firefox的扩展,可以执行javascript脚本,为页面添加很多实用功能。很Cool,以后为firefox编写插件就更容易了,推荐之!

主页:http://greasemonkey.mozdev.org/index.html

可用脚本:http://dunck.us/collab/GreaseMonkeyUserScriptsGeneric

2. 关于Greasemonkey的开发

回到Greasemonkey-- FireFox插件开发利器!

::-- ZoomQuiet [2005-09-09 04:05:42]

2.1. Hello World例子

hello.user.js

for(var i=0; i<document.images.length; i++){
        document.images[i].addEventListener("click",function(){alert('Hello World');},false);
}

2.2. 将一个Greasemonkey组件变为一个Firefox Extensions

按照以下步骤你就可以将你的Greasemonkey组件转换为Firefox Extensions,ok让我们开始

  • 进入http://www.letitblog.com/greasemonkey-compiler/,将你的Greasemonkey代码copy到Javascript文本框内
  • 为你的Extensions起一个名字填在Creator
  • 在Version写入版本号
  • 填写一个GUID,要生成GUID可以访问这个网站http://extensions.roachfiend.com/cgi-bin/guid.pl
  • 然后点击生成你的Greasemonkey组件就变成了Firefox Extensions :)

P.S:

  • 开发Greasemonkey组件要比单纯开发Firefox Extensions好调试
  • 我的vivi变成Firefox扩展的下载 vivi1.1_ff_xpi

3. 大家贡献自己开发的脚本

3.1. weide's

回到Greasemonkey-- FireFox插件开发利器!

9/9/2005 GreaseMonkey is so cool

::-- ZoomQuiet [2005-09-09 04:03:02]

Contents

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

参考链接:

3.2. 清风的脚本

3.2.1. 一个随时将所想发到Bloglines的插件

下载:TexttoBloglines0.1.user.js

本想将插件做在菜单中,可惜Greasemonkey和Firefox1.0.6有冲突,注册菜单函数,无法使用,哭。。。所以只好又在屏幕上加上一个小图标,点击后,日志自动保存到了Bloglines

3.2.2. 一个新浪vivi的插件

安装以后,屏幕右下角出现一vivi图标,点击后即可将当前网页保存至vivi。

发布1.1版本,使得vivi图标始终居于右下角。

解决方法:

div.style.position = "fixed";

截图:

vivi.scr1.gif

安装:

vivi1.1.user.js

对其按右键即可安装

说明: 安装以后,点击网页任意图片都会弹出Hello World

4. 推荐脚本

4.1. Inline MP3 Player

Greasemonkey_mp3.gif

安装:http://musicplayer.sourceforge.net/greasemonkey/inline.player.user.js

4.2. Greasemap

Greasemap是一个由Greasemonkey开发的firefox插件,其作用就是读取网页的地图信息。

<meta name='ICBM' content="39.93333, 116.2833" />

然后利用GoogleMap的API读取位置信息,显示出相应的地图。

思路拓展:比如一个商店的网站,利用该插件就可以轻松的显示出店铺位置。

效果:

Greasemap.gif

安装:http://www.vinq.com/greasemap/greasemap.user.js

Greasemonkey真是越玩越有趣了:)

5. 相关资源

5.1. Dive into Greasemonkey

5.2. Greasemonkey for IE

http://www.bhelpuri.net/Trixie/Trixie.htm

5.3. 服务器端的Greasemonkey

Monkeygrease

相关使用

Greasemonkey (last edited 2009-12-25 07:11:03 by localhost)