深入浅出-油猴脚本

深入浅出 Greasemonkey目录http://www.ttlsa.com/docs/greasemonkey/1. 开始http://
www.ttlsa.com/docs/greasemonkey/1.1. Greasemonkey 是什么？http://www.
ttlsa.com/docs/greasemonkey/1.2. 安装 Greasemonkeyhttp://www.ttlsa.
com/docs/greasemonkey/1.3. 安装用户脚本http://www.ttlsa.com/docs/grease
monkey/1.4. 管理用户脚本http://www.ttlsa.com/docs/greasemonkey/2. 您的第一个
用户脚本http://www.ttlsa.com/docs/greasemonkey/2.1. Hello Worldhttp:/
/www.ttlsa.com/docs/greasemonkey/2.2. 用元数据描述您的用户脚本http://www.ttls
a.com/docs/greasemonkey/2.3. 编写用户脚本代码http://www.ttlsa.com/docs/gr
easemonkey/2.4. 修改用户脚本http://www.ttlsa.com/docs/greasemonkey/3. 调
试用户脚本http://www.ttlsa.com/docs/greasemonkey/3.1. 用错误控制台追踪错误http:/
/www.ttlsa.com/docs/greasemonkey/3.2. 用?GM_log?记日志http://www.ttls
a.com/docs/greasemonkey/3.3. 用 DOM 查看器查看元素http://www.ttlsa.com/do
cs/greasemonkey/3.4. 用 Javascript Shell 计算表达式http://www.ttlsa.com
/docs/greasemonkey/3.5. 其他调试工具http://www.ttlsa.com/docs/greasemon
key/4. 公共模式http://www.ttlsa.com/docs/greasemonkey/4.1. 在域名以及它所有子域
名上执行用户脚本http://www.ttlsa.com/docs/greasemonkey/4.2. 测试 Greasemonk
ey 函数是否有效http://www.ttlsa.com/docs/greasemonkey/4.3. 测试页面中是否有?HTM
L?元素http://www.ttlsa.com/docs/greasemonkey/4.4. 操作所有?HTML?元素http:
//www.ttlsa.com/docs/greasemonkey/4.5. 操作特定?HTML?元素的所有实例http://ww
w.ttlsa.com/docs/greasemonkey/4.6. 操作所有有特定属性的元素http://www.ttlsa.c
om/docs/greasemonkey/4.7. 在元素前插入内容http://www.ttlsa.com/docs/greas
emonkey/4.8. 在元素后插入内容http://www.ttlsa.com/docs/greasemonkey/4.9.
删除元素http://www.ttlsa.com/docs/greasemonkey/4.10. 替换元素为新内容http://w
ww.ttlsa.com/docs/greasemonkey/4.11. 快速插入复杂的?HTMLhttp://www.ttlsa
.com/docs/greasemonkey/4.12. 在没有服务器的情况下添加图片http://www.ttlsa.com/d
ocs/greasemonkey/4.13. 添加 CSS 样式http://www.ttlsa.com/docs/greasem
onkey/4.14. 获取元素样式http://www.ttlsa.com/docs/greasemonkey/4.15. 设置
元素样式http://www.ttlsa.com/docs/greasemonkey/4.16. 处理已渲染的页面http://w
ww.ttlsa.com/docs/greasemonkey/4.17. 匹配大小写无关的属性值http://www.ttlsa.
com/docs/greasemonkey/4.18. 获取当前域名http://www.ttlsa.com/docs/greas
emonkey/4.19. 改写链接http://www.ttlsa.com/docs/greasemonkey/4.20. 重定
向页面http://www.ttlsa.com/docs/greasemonkey/4.21. 俘获用户点击http://www.
ttlsa.com/docs/greasemonkey/4.22. 覆盖内建的 Javascript 方法http://www.t
tlsa.com/docs/greasemonkey/4.23. 解析?XMLhttp://www.ttlsa.com/docs/
greasemonkey/5. 实例教学http://www.ttlsa.com/docs/greasemonkey/5.1. 案
例：GMail Securehttp://www.ttlsa.com/docs/greasemonkey/5.2. 案例：Blog
lines Autoloadhttp://www.ttlsa.com/docs/greasemonkey/5.3. 案例：Ain''
t It Readablehttp://www.ttlsa.com/docs/greasemonkey/5.4. 案例：Offsi
te Blankhttp://www.ttlsa.com/docs/greasemonkey/5.5. 案例：Dumb Quote
shttp://www.ttlsa.com/docs/greasemonkey/5.6. 案例：Frownieshttp://ww
w.ttlsa.com/docs/greasemonkey/5.7. 案例：Zoom Textareahttp://www.ttl
sa.com/docs/greasemonkey/5.8. 案例：Access Barhttp://www.ttlsa.com/d
ocs/greasemonkey/6. 高级话题http://www.ttlsa.com/docs/greasemonkey/6.
1. 存取持久数据http://www.ttlsa.com/docs/greasemonkey/6.2. 在菜单栏上添加菜单项ht
tp://www.ttlsa.com/docs/greasemonkey/6.3. 整合其他网站的数据http://www.ttl
sa.com/docs/greasemonkey/6.4. 把您的用户脚本编译为扩展http://www.ttlsa.com/do
cs/greasemonkey/Greasemonkey API 参考http://www.ttlsa.com/docs/grea
semonkey/GM_log?- 记录日志到错误控制台http://www.ttlsa.com/docs/greasemonke
y/GM_getValue?- 读取脚本专用的配置值http://www.ttlsa.com/docs/greasemonkey/
GM_setValue?- 设置脚本专用的配置值http://www.ttlsa.com/docs/greasemonkey/GM
_registerMenuCommand?- 在 用户脚本命令 (C) 子菜单中添加菜单项http://www.ttlsa.com
/docs/greasemonkey/GM_xmlhttpRequest?- 进行任意的 HTTP 请求http://www.tt
lsa.com/docs/greasemonkey/GM_openInTab?- 在新标签中打开指定的 URLhttp://www
.ttlsa.com/docs/greasemonkey/GM_addStyle?- 给页面添加 CSS 样式http://www
.ttlsa.com/docs/greasemonkey/“参考资料”链接清单http://www.ttlsa.com/docs/
greasemonkey/技巧清单http://www.ttlsa.com/docs/greasemonkey/实例清单http:
//www.ttlsa.com/docs/greasemonkey/步骤清单http://www.ttlsa.com/docs/g
reasemonkey/修订历史http://www.ttlsa.com/docs/greasemonkey/关于本书http:/
/www.ttlsa.com/docs/greasemonkey/GNU 通用公共许可证http://www.ttlsa.com/
docs/greasemonkey/1. 序言http://www.ttlsa.com/docs/greasemonkey/2.
有关复制，发布和修改的条款和条件http://www.ttlsa.com/docs/greasemonkey/3. 如何将这些条款
用到你的新程序第?1?章?开始1.1.?Greasemonkey 是什么？Greasemonkey 是一个 Firefox 扩展，
它具有通过编写脚本来改变被访问网页的功能。使用它，能使您访问的网站更便于阅读或者更便于使用。使用它，您能修复网页渲染的缺陷，而无须
烦扰网站管理员。使用它，您能让网页更好地使用残疾人援助技术，清楚响亮地说出网页内容，或者将网页内容变为盲文。使用它，您能自动地获得
其它网站的数据，从而使两个网站更好地相互链接起来。然而 Greasemonkey 本身并没有作这些事。实际上，在您安装它之后，您注
意到根本没有任何变动...直到您开始安装一种叫做“用户脚本”的东西。用户脚本(user script)就是一大块 Javascri
pt 代码，还有些附加信息，用来告诉 Greasemonkey 脚本应该在何时何地运行。每个用户脚本能够针对具体页面，具体网站，或
者一批网站。用户脚本能做到您在 Javascript 中可做到的任何事情。实际上，它能做得更多，因为 Greasemonkey 提
供了专供用户脚本使用的函数。这里是http://dunck.us/collab/GreaseMonkeyUserScriptsGr
easemonkey 脚本库含了上百个用户脚本，这些都是用户为了满足自己的需要而写的。一旦您写了自己的用户脚本，只要您认为别人也许
发现它有用，您可以把它添加到脚本库中。您也可以自己使用，因为从编写过程中获得知识，获得满足感，才是更重要的。这是http://gr
easemonkey.mozdev.org/list.htmlGreasemonkey 的邮件列表，您可以在那里提问，发表用户脚本
，和讨论新特性的想法。Greasemonkey 开发人员常去这个邮件列表; 他们也许会回答您的问题!为什么写这本书？深入浅出 Gr
easemonkey 是从 Greasemonkey 邮件列表中的用户讨论和作者本人编写用户脚本的经验中发展而来。仅仅一个星期，作
者就发现，新用户经常会提出重复的问题，而这些问题是被回答过的。此外，在写了几个用户脚本以后，作者发现，一些常用的模式，以及可以解决
某一类问题的成块的可重用代码会反复出现。因此，作者开始整理这些有用的模式，解释编程思路，同时作者也从中写作中得到不少锻炼。如果没有
Greasemonkey 的开发者 Aaron Boodman 和 Jeremy Dunck 的大力帮助，没有那些对我的初稿提出
宝贵的反馈建议的用户，就不会有现在的这本书。谢谢大家。1.2.?安装 Greasemonkey要写用户脚本，您首先要安装 Grea
semonkey 扩展， 0.3 或以上版本。过程?1.1.?安装 Greasemonkey 扩展访问http://greasem
onkey.mozdev.org/Greasemonkey的主页。点击名为“Install Greasemonkey”的链接。Fi
refox会显示(可能在浏览器窗口的上方)阻止网站安装软件的信息。点击编辑选项...打开“允许的站点”对话框，点击允许，将 Gre
asemonkey 的网站添加到允许安装软件的网站列表中。点击确定，关闭“允许的站点”对话框。再次点击名为“Install Gre
asemonkey”的链接。将弹出安装对话框，确定您要安装。几秒钟后，安装按钮变亮，点击安装。重新启动 Firefox。当您重新启
动了 Firefox 后，选择工具 (T)单。您应该看到四个菜单项：启用 (E)、管理用户脚本 (U)...、新建用户脚本 (N)
...和用户脚本命令 (C)。 只要管理用户脚本 (U)...可以使用，那么就装好了。其他的两个要在特殊情况下才能使用。一般来说，
安装好 Greasemonkey，(除了四个菜单项外)并不会给浏览器添加任何功能。但是它能让您添加别的东西，名叫“用户脚本”，用户
脚本可以用来定制指定的网页。1.3.?安装用户脚本Greasemonkey “用户脚本”是用 Javascript 编写的独立文件
，用来定制一个或多个网页。http://www.ttlsa.com/docs/greasemonkey/您可以在http://du
nck.us/collab/GreaseMonkeyUserScriptsGreasemonkey脚本库，找到许多用户脚本。尽管没
人要求您必须把脚本放到那儿去，但是实际上，您可以把您的脚本共享到任何地方，这样别人就可以安装它了。甚至您根本不需要一台网络服务器，
因为你可以从本地文件中安装用户脚本。http://www.ttlsa.com/docs/greasemonkey/用户脚本的文件名
必须以.user.js结尾。我写的第一个用户脚本叫做“Butler”。它增强了Google的搜索结果的功能。过程?1.2.?安装
Butler 用户脚本访问http://diveintomark.org/projects/butler/Butler 的主页，可
看到有关 Butler 的功能简述。(并不是所有的用户脚本都有主页， Greasemonkey 只要有用户脚本就够了。)点击“Do
wnload version...”链接 (0.3截至发稿时)。弹出一个标题为“Greasemonkey 安装过程”的对话框，其中
显示了将要安装的用户脚本名称，简介以及作用与排除的页面列表。所有这些信息都包含在脚本之中；以后您会在http://www.ttls
a.com/docs/greasemonkey/用元数据描述您的用户脚本学到定义的方法。点击确定安装用户脚本。没有意外的话，Gre
asemonkey 会在状态栏滑出一个提示，“''Butler'' 安装成功”。现在，可以在?http://www.google.co
m/Google中任意搜索一些东西。在搜索结果页面的顶部会有一行文字：“Try your search on: Yahoo, As
k Jeeves, AlltheWeb, ...”。在其下面会有一个标签：“Enhanced by Butler”。这些都是由 B
utler 用户脚本加进去的。参考资料http://dunck.us/collab/GreaseMonkeyUserScripts
Greasemonkey 脚本库有上百个 Greasemonkey 脚本。1.4.?管理用户脚本如果愿意可以安装很多个 Greas
emonkey 脚本。 Greasemonkey 带有配置对话框来管理用户脚本：暂时禁用，改变配置或卸载脚本。过程?1.3.?暂时
禁用 Butler在菜单中，选择工具 (T)?→?Greasemonkey?→?管理用户脚本 (U)...，Greasemonke
y 会弹出一个对话框：“管理用户脚本”。在对话框左方一栏中列出了已安装的所有用户脚本 (如果您从http://www.ttlsa.
com/docs/greasemonkey/本文开始一步步来的话，这里只有一个脚本：Butler。)选中列表中的 Butler，然
后取消启用复选框。左方列表中的“Butler”就会由黑色转为灰色。(当它还是选中状态的时候，看起来比较费劲，但是当安装了很多脚本的
时候，这个特性就非常有用了。)点击?确定，退出“管理用户脚本”对话框。现在 Butler 已经安装，但是未被启用。您在Google
上随便搜索下就会发现确实如此。在页面顶端的“Enhanced by Butler”应该没有了。您可以在“管理用户脚本”对话框中重复
刚才的步骤，重新选中 Butler，重新启用启用复选框。http://www.ttlsa.com/docs/greasemonke
y/虽然我用“暂时”来形容禁用用户脚本，但是如果您不重新启用它，它就始终会被禁用。之所以是暂时，只因为您可以方便的启用它，而不需要
再到我的网站上来找原始脚本，而且还要重新安装。也可以用“管理用户脚本”对话框来彻底得卸载脚本。过程?1.4.?卸载 Butler在
菜单中，选择工具 (T)?→?Greasemonkey?→?管理用户脚本 (U)...。Greasemonkey 会弹出“管理用户
脚本”对话框。在左方列表栏中，选中 Butler 再点击卸载。不需要确认；用户脚本马上就被卸载掉了。第三步... 没有第三步！(感
谢 Jeff Goldblum。)先等一下，还没完呢！您也可以修改您之前安装过的用户脚本的配置。记得http://www.ttls
a.com/docs/greasemonkey/第一次安装 Butler 时看到的对话框吗，上面有两个列表：包含和排除的网站？嗯，
您可以在“管理用户脚本” 对话框中编辑这两个列表，不管是第一次安装时或者其它什么时候。好！继续。假如您觉得 Butler 不错，但
是它在http://froogle.google.com/Froogle上毫无用处。Google的商品对比网站。那么可以编辑用户脚
本的配置来排除这个网站，而让它在别的 Google 网站上仍然生效。过程?1.5.?重新配置 Butler 排除 Froogle在
菜单中，选择工具 (T)?→?Greasemonkey?→?管理用户脚本 (U).... Greasemonkey 会弹出“管理用
户脚本”对话框。在左方面板中，选择“Butler”。接着在右方面板中就会显示两个列表，一个是执行的页面(“http://.goo
gle./”)，另一个是豁免的页面(空白)。接下来在“不包含下列网页”的列表中，点击添加...。Greasemonkey 会弹
出另一个对话框：“添加网页地址”，并提示您输入新的URL。在其中输入http://froogle.google.com/然后点击
确定。回到“管理用户脚本”对话框中，豁免页面列表中现在就有了您新添的?URL?和通配符，http://froogle.google
.com/，表示 Butler?不?会在froogle.google.com站点的任何页面上执行。星号被当做通配符使用，可以在?
URL: 域名，路径或者任意?URL?schema(http://)中使用 。点击确定，退出“管理用户脚本”对话框。在 Froog
le 中搜索一下，验证下 Butler 会不会执行。但是它仍然会在普通搜索、图片搜索以及 Google 站点的其他页面中执行。第?
2?章?您的第一个用户脚本2.1.?Hello World我们步入 Greasemonkey 美妙世界的万里长征将从第一步开始，所
有读过技术手册的读者都会很熟悉这一步：让您的电脑打出“Hello world”。例?2.1.?http://www.firefox
.net.cn/dig/download/helloworld.user.jshelloworld.user.js// Hello
World! example user script// version 0.1 BETA!// 2005-04-22// Co
pyright (c) 2005, Mark Pilgrim// Released under the GPL license//
http://www.gnu.org/copyleft/gpl.html//// -----------------------
---------------------------------------------//// This is a Greas
emonkey user script.//// To install, you need Greasemonkey: http:
//greasemonkey.mozdev.org/// Then restart Firefox and revisit thi
s script.// Under Tools, there will be a new menu item to "Instal
l User Script".// Accept the default configuration and install.//
// To uninstall, go to Tools/Manage User Scripts,// select "Hello
World", and click Uninstall.//// -------------------------------
-------------------------------------//// ==UserScript==// @name
Hello World// @namespace http://diveintogreasemonkey
.org/download/// @description example script to alert "Hello wo
rld!" on every page// @include // @exclude http://di
veintogreasemonkey.org/// @exclude http://www.diveintogrea
semonkey.org/// ==/UserScript==alert(''Hello world!'');正如您所见到的，这个H
ello World脚本的大部分都是注释。有些注释，比如如何安装，没什么特殊含义；那只是对初学者的一些指导。但是，有一节注释确实有
特殊含义，下一节会有详细的解释。要看到脚本的效果，您首先要http://www.ttlsa.com/docs/greasemonk
ey/安装，然后访问一个不在diveintogreasemonkey.org域名下的网站(例如，http://www.google
.com/Google)。这个页面将会像平时一样显示出来，还会弹出一个对话框：“Hello world!”下载http://www
.firefox.net.cn/dig/download/helloworld.user.jshelloworld.user.js
2.2.?用元数据描述您的用户脚本每个用户脚本都含有一段元数据，用来向 Greasemonkey 描述这个脚本自身的信息：发行者，
执行规则等等。例?2.2.?Hello World 元数据// ==UserScript==// @name H
ello World// @namespace http://diveintogreasemonkey.org/downl
oad/// @description example script to alert "Hello world!" on e
very page// @include // @exclude http://diveintogrea
semonkey.org/// @exclude http://www.diveintogreasemonkey.o
rg/// ==/UserScript==这里有六条独立的元数据信息，作为一个整体包含在注释中。现在让我们按顺序逐条解释。首先讲
最外面的这层包装。// ==UserScript==//// ==/UserScript==上述标记很重要，必须完全吻合。Grea
semonkey 用它们来标记用户脚本的元数据段。这段注释可以放在用户脚本的任何部位，但经常会放在靠近顶部的地方。在元数据段内，第
一项是名字。// @name Hello World这是您的用户脚本的名字。它将会在您第一次安装脚本时在安装对话
框（install dialog）中显示出来。之后会显示在“管理用户脚本”对话框中。这个名字应该言简意赅。@name可选的。如果存
在，它只能被定义一次。如果不存在，将会默认显示用户脚本的去掉扩展名.user.js的文件名。下一个是命名空间(namespace)
。// @namespace http://diveintogreasemonkey.org/download/这是一个?
URL，Greasemonkey 用它来区分名称相同但是作者不同的用户脚本。如果您有一个域名，您可以使用它作命名空间。另外您也可以
用http://taguri.org/?tag:?URI。@namespace是可选的。如果存在，它只能被定义一次。如果不存在，将
会默认使用下载用户脚本的网站域名。http://www.ttlsa.com/docs/greasemonkey/元数据可以以任意次
序排列。笔者推荐使用@name，@namespace，@description，@include，最后是@exclude，但是其它
的顺序也没关系。下一项是描述。// @description example script to alert "Hello w
orld!" on every page这是关于用户脚本功能的描述。在您第一次安装脚本时，它将会在安装对话框中显示，之后会在“管理
用户脚本”对话框中显示。描述不应多于两句。@description是可选的。如果使用它，那么它只能被定义一次。如果不使用，默认会显
示为空白。http://www.ttlsa.com/docs/greasemonkey/不要忘记写@description。即使您
所写的用户脚本是给自己用的。你最后很可能会拥有很多脚本，如果没有描述的话，在“管理用户脚本”对话框中管理脚本将会成为一件令人头疼的
事。下面三行是最重要的 (从 Greasemonkey 的角度来看)：@include和@exclude?URL。// @incl
ude // @exclude http://diveintogreasemonkey.org///
@exclude http://www.diveintogreasemonkey.org/这几行让 Greasemo
nkey 知道在那些网站上执行您的用户脚本。您可以明确的指定一个?URL，或者用通配符来代替域名或路径中的部分字符。在这个例子中
，我们告诉 Greasemonkey 在除了http://diveintogreasemonkey.org/和http://www
.diveintogreasemonkey.org/的所有网站上执行。排除(Excludes)优先于包含(includes)，所以
即使http://diveintogreasemonkey.org/download/匹配?(所有网站)，它还是会被排除掉，因为
它还匹配http://diveintogreasemonkey.org/。@include和@exclude?是可选的，可以自定
义执行和豁免的?URL，但必须每条规则各占一行。如果您没有任何定义， Greasemonkey 将会对所有的网站执行您的用户脚本。
(等同于@include )。http://www.ttlsa.com/docs/greasemonkey/您需要定义非常精确的
@include和@exclude元数据。Greasemonkey 不会对域名作任何的假设，如果一个网站符合http://exam
ple.com/和http://www.example.com/，您需要把这两个网址都标示出来。参考资料http://taguri
.org/tag:?URIs2.3.?编写用户脚本代码我们的第一个用户脚本是在执行时简单地显示一条提示信息：“Hello worl
d!”。例?2.3.?显示“Hello world!”提示信息alert(''Hello world!'');尽管这段代码仿佛够用了，
而且也达到了目的。Greasemonkey 实际上在幕后做了很多的事情来确保用户脚本不会与页面所包含的原有脚本发生严重的冲突。特别
是它会自动的把您的用户脚本封装在一个匿名的函数包里。一般情况下，您可以忽视，但是终究有一天会让您遇到麻烦。所以最好现在就了解一下。
最经常遇到的麻烦之一是在用户脚本里定义的变量和函数不能被别的脚本访问。事实上，只要用户脚本运行完了，所有的变量和函数就都不能使用了
。如果您期望使用?window.setTimeout?函数，或者在链接挂上字符串式的?onclick?属性然后期望 Javascr
ipt 稍后调用您的函数，那么您会遇到问题。例如，下面这个用户脚本中定义了一个函数?helloworld， 然后尝试设置一个计数器
来在一秒后调用这个函数。例?2.4.?延迟调用函数的错误方法function helloworld() {alert(''Hello
world!'');}window.setTimeout("helloworld()", 60);这段代码没有起任何作用；不会弹出
提示窗口。如果您打开http://www.ttlsa.com/docs/greasemonkey/错误控制台，会看到一个异常：Er
ror: helloworld is not defined.这是因为当延迟结束，开始调用helloworld()时，hellow
orld函数已经不存在了。如果您需要引用用户脚本中的变量或者函数，应该显式的把它们定义为window对象的属性，它是始终存在的。例
?2.5.?延迟调用函数的更好方法window.helloworld = function() {alert(''Hello wor
ld!'');}window.setTimeout("helloworld()", 60);目的达到了！页面完成加载一秒后，一个提示
框骄傲的弹了出来，写着：“Hello world!”然而，在?window上设置属性依然不太理想；这有点像用全局变量来做局部变量该
做的事。（事实上，就是那么回事，window是全局的，可以被页面中的所有脚本访问。更实际的讲，它可能会与页面自身的脚本，甚至是其它
的用户脚本相互干扰。最佳的解决方案是定义匿名函数，把它作为第一个参数传递给?window.setTimeout。例?2.6.?延迟
调用函数的最好方法window.setTimeout(function() { alert(''Hello world!'') },
60);我在这里所做的是建立一个没有名字的函数（一个“匿名函数”)，然后直接把它传递给?window.setTimeout。这样可
以完成与上个例子相同的事，而不会留下痕迹。例如不会被其它的脚本检测到。我发现我在写用户脚本时经常使用匿名函数。它们很适合创建“一次
性”函数，然后当作参数传递给类似window.setTimeout，document.addEventListener?或者赋值给
事件句柄像?click?或?submit。参考资料http://novemberborn.net/sifr/explained/t
erminologyJavascript 中的匿名函数http://youngpup.net/2004/jsblockscopeB
lock Scope in Javascript?和?http://youngpup.net/2004/jsblockscope/
commentsassociated discussion thread2.4.?修改用户脚本对于脚本的作者来讲，“管理用户脚本”
对话框有个很实用的功能：编辑按钮可以“动态的(live)”修改已安装的脚本。过程?2.1.?编辑 Hello World 的源代码
然后观察运行结果在菜单中，选择工具 (T)?→?Greasemonkey?→?管理用户脚本 (U).... Greasemonke
y 会弹出“管理用户脚本”对话框。在左方面板中，选择 Hello World 再点击编辑。Hello World 的已安装版本将会
在你喜好的文本编辑器中打开。(否则，请检查.js文件是否已经关联到您喜好的文本编辑器上。)修改alert语句，替换显示内容为“Li
ve editing!”。在编辑器中保存所做的更改，然后回到浏览器，随意刷新某个页面来测试所做的更改，你将能立刻看到效果。你不需要
重新安装或者“刷新”用户脚本，您是在“动态”修改。http://www.ttlsa.com/docs/greasemonkey/在
“管理用户脚本”对话框中，点击编辑，您正在“动态”修改脚本的副本，它在 Firefox 的个人配置文件夹中。我形成了一个习惯，每“
动态”修改完毕，又回到编辑器，选择文件(F)?→?另存为(a)...，把用户脚本保存到另一个文件夹中。尽管这不是必须的(Greas
emonkey 只会用您配置文件夹中的那个脚本)，但是我喜欢在完成全部修改后把脚本在其它文件夹里保存一个“原本”。第?3?章?调试
用户脚本3.1.?用错误控制台追踪错误如果用户脚本好似没有正常执行，第一个要检查的地方是错误控制台，那里列出了所有与脚本有关的错误
，包括用户脚本在内。过程?3.1.?打开错误控制台在 Firefox 菜单中，选择?工具 (T)?→?错误控制台 (C)。控制台中
列出了从打开 Firefox 以来在所有页面上发生的所有错误，应该会有很多的(您会惊奇地发现，很多大的网站的脚本是那么的糟糕)。在
开始调试您的用户脚本前，请点击清空 (C)来清空列表。现在刷新页面来测试出现错误的用户脚本。如果它的确出错了，一条异常会显示在错误
控制台中。http://www.ttlsa.com/docs/greasemonkey/如果您的用户脚本出错了，错误控制台会显示一
条异常(exception)和一个行号。由于 Greasemonkey 将用户脚本插入到页面中，所以行号没有实际的用处，应该忽略这
个行号。这并不是您的用户脚本中发生异常的行号。3.2.?用?GM_log?记日志Greasemonkey 提供了一个记录用的函数，
GM_log，这个函数可以将消息写入错误控制台。这些消息在发布前应当剔出掉，不过在调试时却非常有用。此外，看调试信息比在调试用的警
告窗口中一次次点确定好得多。GM_log有一个参数：日志的字符串。在将信息输出到错误控制台后，用户脚本会一如既往地执行。例?3.1
.?记录到错误控制台然后继续(http://www.firefox.net.cn/dig/download/gmlog.user.
js?gmlog.user.js?)if (/^http:\/\/diveintogreasemonkey\.org\//.tes
t(window.location.href)) {GM_log(''running on Dive Into Greasemonk
ey site w/o www prefix'');} else {GM_log(''running elsewhere'');}GM_
log(''this line is always printed'');安装这个用户脚本后打开?http://diveintogre
asemonkey.org/http://diveintogreasemonkey.org/，这两行就会出现在错误控制台中：Gre
asemonkey: http://diveintomark.org/projects/greasemonkey//Test Lo
g:running on Dive Into Greasemonkey site w/o www prefixGreasemonk
ey: http://diveintomark.org/projects/greasemonkey//Test Log:this
line is always printed如您所见，Greasemonkey 从http://www.ttlsa.com/doc
s/greasemonkey/用户脚本元数据段中取得命名空间和脚本名称，再把作为传给GM_log的参数日志消息算进来，做为显示在错
误控制台中显示的信息。如果您访问的不是http://diveintogreasemonkey.org/http://diveint
ogreasemonkey.org/，那么下面这两条信息会显示在错误控制台中。Greasemonkey: http://divei
ntomark.org/projects/greasemonkey//Test Log:running elsewhereGrea
semonkey: http://diveintomark.org/projects/greasemonkey//Test Log
:this line is always printed我已经厌倦去挖掘日志信息的最大长度。它超过了255个字符。还有，输出的信息
在错误控制台中可以正确断行，可以向下滚动来查看日志消息其余部分。为日志着迷吧！http://www.ttlsa.com/docs/
greasemonkey/在错误控制台中可以用右键(Mac用户用 control-click)点击任意行选中，然后选择复制(C)，
将信息复制到剪贴板。参见http://www.ttlsa.com/docs/greasemonkey/GM_log3.3.?用 D
OM 查看器查看元素DOM 查看器能够查看任何页面的已解析的文档对象模型(DOM)。可以获得每个?HTML?元素、属性和文本节点的
详细信息；也可以看到每个页面样式表中的所有 CSS 规则；也可以看到每个对象的所有脚本属性。它的功能非常强大。DOM 查看器包含在
Firefox 的安装程序中，但是由您的平台而定，它可能默认没装。如果您在工具 (T)菜单中看不到DOM 查看器(N)，那么您需
要重新安装 Firefox。重新安装 Firefox 不会影响您现有的书签，设置，扩展以及用户脚本。过程?3.2.?安装 DOM
查看器运行 Firefox 的安装程序。接受用户协议后，选择定制 (C)安装。选择安装路径后，安装向导会询问安装的组件。选择开发工
具。安装结束后，运行 Firefox。您会看到工具 (T)?→?DOM 查看器 (N)。下面我们将要访问深入浅出 Greasemo
nkey的主页，让您了解 DOM 查看器的强大功能。过程?3.3.?查看和编辑深入浅出 Greasemonkey的主页访问http
://www.firefox.net.cn/dig/http://www.firefox.net.cn/dig/。在菜单中，选择工
具 (T)?→?DOM 查看器 (N)打开 DOM 查看器。在 DOM 查看器的左侧视图中，会看到 DOM 节点的树状图。如果看不
到，打开左上角的下拉菜单，选择DOM Nodes。DOM 的树状列表从 document 节点开始，标记为?#document。展
开此节点，可以看到?HTML?节点。展开?HTML?元素后可以看到三个节点：HEAD、#text?和?BODY。注意?BODY?的
?id?为?diveintogreasemonkey-org。如果没看到，调整一下列宽度。展开?BODY?可以看到五个节点：?#t
ext,?DIV id="intro",?#text,?DIV id="main"?和?#text。展开?DIV id="intr
o"?可以看到两个节点：?#text?和?DIV class="sectionInner"。展开?DIV class="secti
onInner"?可以看到两个节点：?#text?和?DIV class="sectionInner2"。展开?DIV class
="sectionInner2"?可以看到五个节点：?#text,?DIV class="s",?#text,?DIV class
="s"?和?#text。展开第一个?DIV class="s"?可以看到五个节点：?#text,?H1,?#text,?P?和?
#text。选择?H1?节点。在原始页面上(DOM 查看器后面)，?H1?元素会闪现红色的边框。在右侧面板中可以看到节点的名称(“
H1”)、命名空间?URI?(空白，因为?HTML?没有命名空间 -- 只有在页面被当作?application/xhtml+xm
l?时有效，或者显示一些其他名字空间?XML?的页面)、节点类型(1代表元素)和节点值(空白，因为标题没有值 -- 标题上的文字有
自己的节点)。在右侧面板的顶部，有个下拉菜单，在其中可以看到数个选项：DOM Node,?Box Model,?XBL Bindi
ngs,?CSS Style Rules,?Computed Style?和?Javascript Object。它们提供了当前选
中的节点的不同信息。有些是可以修改的，变更会立即反映到原始页面上。选择?Javascript Object?可以看到选中的?H1?
元素的所有可脚本控制的的属性和方法。选择?CSS Style Rules。右侧面板会分为两部分，顶部的列出了所有可以作用于这个元素
的样式(包括浏览器已有的默认样式)，下面的显示了样式所定义的属性。在右上方的视图中选中第二条规则，这条样式规则是在?http://
www.firefox.net.cn/dig/css/dig.csshttp://www.firefox.net.cn/dig/c
ss/dig.css?样式表中定义的。在右下面板中双击?font-variant?属性，然后输入新值：?normal。在原始页面中
(DOM查看器后面)，“深入浅出 Greasemonkey” 标志文字会立即从 small-caps 变为正常的大小写字母。在右下
面板中任意位置点击右键(Mac 用户 control-click)，然后选择?新建属性。会弹出一个对话框：“新样式规则”。输入属性
名称：?background-color，然后点击确定，接下来属性值：red，然后点击确定应用新属性。新属性会显示在右下面板中，并
且原始页面会立即变成红色背景。如果觉得依次展开 DOM 节点树中每层很不方便，那么我强烈推荐您使用 Inspect Element
扩展，它能迅速找到 DOM 查看器中的指定元素。http://www.ttlsa.com/docs/greasemonkey/安
装 Inspect Element 扩展前，您必须先安装 DOM 查看器，否则 Firefox 就不能正常启动。如果已经遇到了这种
情况，打开命令行窗口，进入 Firefox 的安装目录，输入?firefox -safe-mode?。Firefox 会以安全模式
启动，不加载任何扩展，然后选择工具 (T)?→?附加软件 (A)接着卸载 Inspect Element。过程?3.4.?用 In
spect Element 直接查看元素访问?https://addons.update.mozilla.org/extensio
ns/moreinfo.php?id=434Inspect Element?下载页面，然后点击?Install Now。重新启动
Firefox。再访问http://www.firefox.net.cn/dig/http://www.firefox.net.c
n/dig/。右击(Mac 用户 control-click) 标志语：深入浅出 Greasemonkey。在上下文菜单中，选择?
Inspect element。.DOM 查看器会打开，并且选中了?H1?元素，然后您可以马上开始查看和/或编辑它的属性。http
://www.ttlsa.com/docs/greasemonkey/DOM 查看器不会“跟着”您一起浏览网页。如果打开 DOM
查看器然后在原始窗口中浏览别的网页，DOM 查看器会变得非常困惑。好的做法是，去您想去的地方，查看您想查看的页面，在做别的事情前先
关闭 DOM 查看器。参考资料http://www.brownhen.com/DI.htmlDOM 查看器介绍https://ad
dons.update.mozilla.org/extensions/moreinfo.php?id=434Inspect Ele
ment 扩展http://www.projectit.com/freestuff.htmlInspector Widget 扩展
具有 Inspect Element 相同功能的扩展，它增加了一个工具条，而不是一个菜单项。3.4.?用 Javascript S
hell 计算表达式Javascript Shell 是一个 bookmarklet，可以在当前页面的内容中计算任意 Javasc
ript 表达式。过程?3.5.?安装 Javascript Shell访问?http://www.squarefree.com/
bookmarklets/webdevel.htmlJesse''s Web Development Bookmarklets。将?
Shell?bookmarklet 拖放到您的书签工具栏。访问一个网页(例如，http://www.firefox.net.cn/
dig/深入浅出 Greasemonkey?主页)，然后点击书签工具栏上的?Shell?bookmarklet。Javascrip
t Shell 窗口会在后台打开。Javascript Shell 提供了与?http://www.ttlsa.com/docs/
greasemonkey/DOM 查看器一样强大的功能，但是环境更加宽松。就把它当作 DOM 的命令行版本吧。游戏开始。例?3.2
.?Javascript Shell 介绍document.title深入浅出 Greasemonkeydocument.titl
e = ''Hello World''Hello Worldvar paragraphs = document.getElements
ByTagName(''p'')paragraphs[object HTMLCollection]paragraphs.length5
paragraphs[0][object HTMLParagraphElement]paragraphs[0].innerHTML
教老网玩新把戏paragraphs[0].innerHTML = ''Live editing, baby!''Live editin
g, baby!当输入完上面的内容后，按回车键，变更就会反映到原始网页上。我想提一下 Javascript Shell 的?pro
ps?函数。例?3.3.?获取元素属性var link = document.getElementsByTagName(''a'')[
0]props(link)Methods of prototype: blur, focusFields of prototype
: id, title, lang, dir, className, accessKey,charset, coords, hre
f, hreflang, name, rel, rev, shape, tabIndex,target, type, protoc
ol, host, hostname, pathname, search, port,hash, text, offsetTop,
offsetLeft, offsetWidth, offsetHeight,offsetParent, innerHTML, s
crollTop, scrollLeft, scrollHeight,scrollWidth, clientHeight, cli
entWidth, styleMethods of prototype of prototype of prototype: in
sertBefore,replaceChild, removeChild, appendChild, hasChildNodes,
cloneNode,normalize, isSupported, hasAttributes, getAttribute, s
etAttribute,removeAttribute, getAttributeNode, setAttributeNode,r
emoveAttributeNode, getElementsByTagName, getAttributeNS,setAttri
buteNS, removeAttributeNS, getAttributeNodeNS,setAttributeNodeNS,
getElementsByTagNameNS, hasAttribute,hasAttributeNS, addEventLis
tener, removeEventListener, dispatchEvent,compareDocumentPosition
, isSameNode, lookupPrefix, isDefaultNamespace,lookupNamespaceURI
, isEqualNode, getFeature, setUserData, getUserDataFields of prot
otype of prototype of prototype: tagName, nodeName,nodeValue, nod
eType, parentNode, childNodes, firstChild, lastChild,previousSibl
ing, nextSibling, attributes, ownerDocument, namespaceURI,prefix,
localName, ELEMENT_NODE, ATTRIBUTE_NODE, TEXT_NODE,CDATA_SECTION
_NODE, ENTITY_REFERENCE_NODE, ENTITY_NODE,PROCESSING_INSTRUCTION_
NODE, COMMENT_NODE, DOCUMENT_NODE,DOCUMENT_TYPE_NODE, DOCUMENT_FR
AGMENT_NODE, NOTATION_NODE,baseURI, textContent, DOCUMENT_POSITIO
N_DISCONNECTED,DOCUMENT_POSITION_PRECEDING, DOCUMENT_POSITION_FOL
LOWING,DOCUMENT_POSITION_CONTAINS, DOCUMENT_POSITION_CONTAINED_BY
,DOCUMENT_POSITION_IMPLEMENTATION_SPECIFICMethods of prototype of
prototype of prototype of prototype of prototype: toString“哇哦！”这
些是什么？它列出了元素??在 Javascript 中所有有效的属性和方法，并且按照 DOM 的对象层级分类。先列出的是链接
元素的特有方法和属性(比如?blur?和?focus?方法，?href?和?hreflang?属性)，然后列出了所有节点公有的方法
和属性(比如?insertBefore)，等等。此外，这和 DOM 查看器上的内容一样……只不过是多些打字多些试验，少点些鼠标。h
ttp://www.ttlsa.com/docs/greasemonkey/同?http://www.ttlsa.com/docs
/greasemonkey/DOM 查看器一样，Javascript Shell 也不会“跟着”您浏览网页。如果打开 Javasc
ript Shell 然后在原始窗口中浏览别的网页，Javascript Shell 会变得非常困惑。好的做法是，去您想去的地方，
查看您想查看的页面，在做别的事情前先关闭 Javascript Shell。3.5.?其他调试工具下面是我觉得有用的其他调试工具，
由于时间有限，我没有全部列出。参考资料http://chrispederick.com/work/firefox/webdevel
oper/Web Developer 扩展?有很多分析页面的函数。http://www.karmatics.com/aardvar
k/Aardvark?互动的显示标签名称、id?和?class?的属性。http://www.hacksrus.com/~gind
a/venkman/Venkman Javascript Debugger?完整的 Javascript 运行时调试器。http:
//www.squarefree.com/bookmarklets/webdevel.htmlWeb Development Bo
okmarklets?有一些有用的函数，可以把它们拖放到工具栏中。http://www.edwardh.com/jsunit/JS
Unit?是 Javascript 单元测试框架。http://www.crockford.com/javascript/lint
.htmljs-lint?可检查出 Javascript 代码的常见错误。第?4?章?公共模式4.1.?在域名以及它所有子域名上执
行用户脚本对于许多网站，无论是否有?www.?前缀，访问网站都是等效的。如果要为这样的站点写用户脚本，需要能匹配这两种地址。例?4
.1.?匹配域名和它所有子域名的元数据标签// ==UserScript==// @include http://example.
com/// @include http://.example.com/// ==/UserScript==实例http:/
/diveintomark.org/projects/butler/butler.user.jsButlerhttp://www.
firefox.net.cn/dig/download/salonautopass.user.jsSalon Auto-Pass4
.2.?测试 Greasemonkey 函数是否有效Greasemonkey 的新版本给用户脚本提供了新函数。如果准备发布用户脚本
，那么应该测试下所用的 Greasemonkey 函数是否存在。例?4.2.?GM_xmlhttpRequest?函数无效时警告用
户if (!GM_xmlhttpRequest) {alert(''请升级到最新版本的 Greasemonkey.'');return
;}// 使用 GM_xmlhttpRequest 的其他代码4.3.?测试页面中是否有?HTML?元素可以用?getElemen
tsByTagName?函数来测试页面中是否有?HTML?元素。例?4.3.?检查页面中是否有??元属var <br> textareas = document.getElementsByTagName(''textarea'');if (textare<br> as.length) {// 页面中有至少一个 textarea} else {// 页面中没有 textarea}实例http:<br> //www.firefox.net.cn/dig/download/betterdir.user.jsBetterDirhttp:<br> //www.firefox.net.cn/dig/download/zoomtextarea.user.jsZoom Textar<br> ea4.4.?操作所有?HTML?元素有时需要操作页面中的所有?HTML?元素。Firefox支持?getElementsByTa<br> gName('''')，它返回一个可遍历操作的元素集合。例?4.4.?遍历所有元素var allElements, thisElem<br> ent;allElements = document.getElementsByTagName('''');for (var i =<br> 0; i < allElements.length; i++) {thisElement = allElements[i];//<br> 使用 thisElement}http://www.ttlsa.com/docs/greasemonkey/只有真需要操作所有元<br> 素时才能采用这种方法。如果只要操作特定的一些元素，可使用 XPath 查询可以正确快速地得到这些元素。更多资料，请查看http:/<br> /www.ttlsa.com/docs/greasemonkey/操作所有有特定属性的元素。实例http://www.firefo<br> x.net.cn/dig/download/antidisabler.user.jsAnti-Disabler4.5.?操作特定?<br> HTML?元素的所有实例有时您需要操作页面中特定?HTML?元素的所有实例。例如改变所有?<textarea>?的字体大小。最简单<br> 的办法就是调用?getElementsByTagName(''tagname'')，它返回一个可遍历操作的元素集合。例?4.5.?获取<br> 页面上所有的 textareavar allTextareas, thisTextarea;allTextareas = docu<br> ment.getElementsByTagName(''textarea'');for (var i = 0; i < allText<br> areas.length; i++) {thisTextarea = allTextareas[i];// 使用 thisText<br> area}http://www.ttlsa.com/docs/greasemonkey/不应该用这个方法来操作页面中所有的链接，因<br> 为?<a>?元素也可以用作页面中的锚。要知道如何查找页面中所有的链接，请查看http://www.ttlsa.com/docs/g<br> reasemonkey/操作所有有特定属性的元素。实例http://www.firefox.net.cn/dig/download<br> /zoomtextarea.user.jsZoom Textarea4.6.?操作所有有特定属性的元素在 Greasemonkey<br> 的兵器库中最强悍的一个就是?evaluate?方法。利用 XPath 查询语言，它可以用来获取页面中的元素，属性以及文本。举个例<br> 子来说，如果您想获得页面中的全部链接。您也许会想到用?document.getElementsByTagName(''a'')，但是您<br> 还要检查每个元属是否具有?href?属性，因为?<a>?元属还可以用作有名称的锚。然而可以用 Firefox 内建的 XPath <br> 功能来查找具有?href?属性的?<a>?元属。例?4.6.?获取页面中的所有链接var allLinks, thisLink;a<br> llLinks = document.evaluate(''//a[@href]'',document,null,XPathResul<br> t.UNORDERED_NODE_SNAPSHOT_TYPE,null);for (var i = 0; i < allLinks<br> .snapshotLength; i++) {thisLink = allLinks.snapshotItem(i);// 使用 <br> thisLink}document.evaluate?方法是关键。它有一个代表 XPath 查询语句的字符串参数以及一些其它参数，<br> 接下来解释一下。这条 XPath 查询语句找到了具有?href?属性的?<a>?元属，用随机的次序排列后返回。(也就是说，集合中的<br> 第一个元素并一定是页面中的第一个元素。)然后您可以用?allLinks.snapshotItem(i)?方法访问找到的元素。XPa<br> th 表达式所能做到的甚至会使您惊讶。请看下面这个例子，它获取了全部具有?title?属性的元素。例?4.7.?获取所有具有?ti<br> tle?属性的元素var allElements, thisElement;allElements = document.eval<br> uate(''//[@title]'',document,null,XPathResult.UNORDERED_NODE_SNAPS<br> HOT_TYPE,null);for (var i = 0; i < allElements.snapshotLength; i+<br> +) {thisElement = allElements.snapshotItem(i);switch (thisElement<br> .nodeName.toUpperCase()) {case ''A'':// 这是链接，在这里完成您的操作break;case ''I<br> MG'':// 这是图片，在这里完成您的操作break;default:// 其他类型的 HTML 元素，在这里完成您的操作}}ht<br> tp://www.ttlsa.com/docs/greasemonkey/如果已有一个元素的引用(例如?thisElement)，<br> 可以用?thisElement.nodeName?来判断它的?HTML?标签。如果页面被当作?text/html?类型，标签名称就<br> 总是大写，不论它在原始页面是如何定义的。如果页面被当作?application/xhtml+xml类型，那么标签名称就总是小写的。<br> 我总是用?thisElement.nodeName.toUpperCase()?这样我就可以不用管这些了。这是另一个 XPath <br> 查询，它获取了具有特定?class?属性的?<div>?元素。例?4.8.?获取所有?class?为?sponsoredlink?<br> 的?<div>var allDivs, thisDiv;allDivs = document.evaluate("//div[@c<br> lass=''sponsoredlink'']",document,null,XPathResult.UNORDERED_NODE_S<br> NAPSHOT_TYPE,null);for (var i = 0; i < allDivs.snapshotLength; i+<br> +) {thisDiv = allDivs.snapshotItem(i);// 使用 thisDiv}附注：在 XPath 查询<br> 语句外使用双引号，这样在语句内就可以使用单引号了。document.evaluate?方法中有很多参数。第二个参数(在前两个例子中<br> 都是?document)可以是任意元素。XPath 查询只返回这个元素的子元素结点。如果已有一个元素的引用(比如，从?docume<br> nt.getElementById?或者?document.getElementsByTagName?数组的一项中得到的引用)，您<br> 就可以限制查询只返回这个元素的子元素。第三个参数是对名称空间解析函数的引用，只有在?application/xhtml+xml?类<br> 型页面执行的用户脚本中才会用到。即使对它不了解也没关系，因为那种类型的页面不是很多，您可能一次也遇不到。如果您很想知道它的用法，h<br> ttp://www-jcsu.jesus.cam.ac.uk/~jg307/mozilla/xpath-tutorial.html<br> Mozilla XPath 文档解释了它的用法。第四个参数是结果的返回方式。在前面的两个例子中都使用了?XPathResult.U<br> NORDERED_NODE_SNAPSHOT_TYPE，它返回的元素是随机次序的。我99%都是使用这种方式，但是，可能出于某种原因<br> ，想以在页面上出现的顺序返回结果，您可以使用?XPathResult.ORDERED_NODE_SNAPSHOT_TYPE。htt<br> p://www-jcsu.jesus.cam.ac.uk/~jg307/mozilla/xpath-tutorial.htmlMo<br> zilla XPath 文档还提供了一些其他返回方式的例子。第五个参数用来合并两次 XPath 查询的结果。传入以前调用?docu<br> ment.evaluate?结果，它将返回两次查询的合并结果。在前面的两个例子中，这个参数都用了?null，这意味着我们只想获得本<br> 次 XPath 查询的结果。现在明白了吗？XPath 既可简单，也可难，这就看您怎么用了。我强烈推荐您阅读http://www.z<br> von.org/xxl/XPathTutorial/General/examples.html这个优秀的 XPath 教程，可以学<br> 到更多的 XPath 语法。关于?document.evaluate?的其他参数， 我很少用除非您已经在这里看到他们了。事实上，您<br> 可以定义一个函数来封装它们。例?4.9.?xpath?函数function xpath(query) {return docume<br> nt.evaluate(query, document, null,XPathResult.UNORDERED_NODE_SNAP<br> SHOT_TYPE, null);}现在您可以简单的调用?xpath(''//a[@href]'')?来获得页面上的全部链接，或者用?<br> xpath(''//[@title]'')?获得具有?title?属性的元素。您仍然需要用?snapshotItem?方法访问结果中<br> 的每个元素；它不是一个规则的 Javascript 数组。实例http://www.firefox.net.cn/dig/down<br> load/accessbar.user.jsAccess Barhttp://www.firefox.net.cn/dig/dow<br> nload/betterdir.user.jsBetterDirhttp://www.firefox.net.cn/dig/dow<br> nload/blogdex-display-title.user.jsBlogdex Display Titlehttp://di<br> veintomark.org/projects/butler/butler.user.jsButlerhttp://www.fir<br> efox.net.cn/dig/download/frownies.user.jsFrownieshttp://www.firef<br> ox.net.cn/dig/download/offsiteblank.user.jsOffsite Blankhttp://ww<br> w.firefox.net.cn/dig/download/rottenreviews.user.jsRotten Reviews<br> http://www.firefox.net.cn/dig/download/stopthepresses.user.jsStop<br> The Presses参考资料http://www-jcsu.jesus.cam.ac.uk/~jg307/mozilla/xp<br> ath-tutorial.htmlMozilla XPath 文档http://www.zvon.org/xxl/XPathTut<br> orial/General/examples.htmlXPath 实例教程http://www.xulplanet.com/ref<br> erences/objref/XPathResult.htmlXPathResult 参考手册4.7.?在元素前插入内容如果已找到<br> 某个元素(不论用何种方法)，您想在它前面插入额外的内容。您可以使用?insertBefore?函数。例?4.10.?在主内容前插入<br> ?<hr>假设有个元素的 ID 为?"main"。var main, newElement;main = document.get<br> ElementById(''main'');if (main) {newElement = document.createElemen<br> t(''hr'');main.parentNode.insertBefore(newElement, main);}实例http://<br> diveintomark.org/projects/butler/butler.user.jsButlerhttp://www.f<br> irefox.net.cn/dig/download/zoomtextarea.user.jsZoom Textarea4.8.?<br> 在元素后插入内容如果已找到某个元素，您想在它后面插入额外的内容。您也可以使用?insertBefore?函数，要与?nextSib<br> ling?属性联合使用。例?4.11.?在导航条后面插入?<hr>假设有个元素的 ID 为?"navbar"。var navbar<br> , newElement;navbar = document.getElementById(''navbar'');if (navba<br> r) {newElement = document.createElement(''hr'');navbar.parentNode.i<br> nsertBefore(newElement, navbar.nextSibling);}http://www.ttlsa.com<br> /docs/greasemonkey/即使?someExistingElement?是它的父元素的最后一个孩子(在它之后没有下一个<br> 元素)，仍然可以在?someExistingElement.nextSibling?之前插入新内容。在这种情况下，someExis<br> tingElement.nextSibling?将返回一个空值，insertBefore?函数将把新内容追加到最后。(以许这对你来<br> 说没有太大意义，但我想让您知道的是，尽管这种方法似乎是不太对，但它却总是有效的。)实例http://www.firefox.net<br> .cn/dig/download/blogdex-display-title.user.jsBlogdex Display Tit<br> lehttp://diveintomark.org/projects/butler/butler.user.jsButler4.9<br> .?删除元素使用?removeChild?函数，您可以使 Greasemonkey 一下子删除页面中完整的一块。例?4.12.?删<br> 除广告侧边栏假设有个元素 ID 为?"ads"。var adSidebar = document.getElementById(''<br> ads'');if (adSidebar) {adSidebar.parentNode.removeChild(adSidebar)<br> ;}http://www.ttlsa.com/docs/greasemonkey/用removeChild?移除一个元素也会删除它<br> 里面的所有内容。例如您移除一个?<table>?元素，此时也会将表格单元格(<td>?元素)一起移除。http://www.ttl<br> sa.com/docs/greasemonkey/如果要移除广告，比起写用户脚本来，更容易的办法是安装?http://adbloc<br> k.mozdev.org/AdBlock?然后导入?http://www.geocities.com/pierceive/adbl<br> ock/最新的过滤列表。实例http://diveintomark.org/projects/butler/butler.user<br> .jsButler4.10.?替换元素为新内容如果已经获取了一个元素，可以使用?replaceChild?函数来替换它的全部内容。<br> 例?4.13.?替换图片为替代(alt)文本假设页面上有一个元素 ID 为?"annoyingsmily"。var theImag<br> e, altText;theImage = document.getElementById(''annoyingsmily'');if<br> (theImage) {altText = document.createTextNode(theImage.alt);theI<br> mage.parentNode.replaceChild(altText, theImage);}http://www.ttlsa<br> .com/docs/greasemonkey/如果要用一大段?HTML?替换一个元素，您可以构造?HTML?为一个字符串，然后ht<br> tp://www.ttlsa.com/docs/greasemonkey/设置元素的?innerHTML?属性。实例http://<br> www.firefox.net.cn/dig/download/frownies.user.jsFrownies4.11.?快速插<br> 入复杂的?HTMLThe?innerHTML?属性让您可以将?HTML?以字符串的形式表示，然后将它们直接插入到页面中。这样就不需<br> 要为每一个?HTML?元素创建单独的 DOM 对象，然后再一个一个的设置它们的属性。例?4.14.?在页面顶部加上标语var lo<br> go = document.createElement("div");logo.innerHTML = ''<div style="<br> margin: 0 auto 0 auto; '' +''border-bottom: 1px solid #000000; marg<br> in-bottom: 5px; '' +''font-size: small; background-color: #000000; <br> '' +''color: #ffffff;"><p style="margin: 2px 0 1px 0;"> '' +''YOUR TE<br> XT HERE '' +''</p></div>'';document.body.insertBefore(logo, document<br> .body.firstChild);关键的地方是第二行，在这行我将?logo.innerHTML?设置为字符串。Firefox 将<br> 这个字符串解析成?HTML?然后创建所有必需的对象，就像它重新加载一个页面一样。这样我就可以将我的新?logo?(一个?<div><br> ?包含另一个?<div>，这个?<div>?包含有一个?<p>)插入到页面的任何位置 — 页面开始，结尾或者我选择的任意元素htt<br> p://www.ttlsa.com/docs/greasemonkey/之前或http://www.ttlsa.com/docs/<br> greasemonkey/其后。总之，页面上任何位置。实例http://www.firefox.net.cn/dig/downlo<br> ad/accessbar.user.jsAccess Barhttp://diveintomark.org/projects/bu<br> tler/butler.user.jsButlerhttp://www.firefox.net.cn/dig/download/b<br> etterdir.user.jsBetterDir4.12.?在没有服务器的情况下添加图片Firefox 支持?data:?URL<br> s, 它可以把一段数据嵌入到?URL?中，而不需要单独从服务器上来获取。您也许从来都没有听说过?data:?URLs ，因为 In<br> ternet Explorer 不支持，所以几乎没人使用它们。但是在用户脚本中它们却非常有用。例?4.15.?在页面顶部添加图形 <br> logovar logo = document.createElement(''img'');logo.src = ''data:ima<br> ge/gif;base64,R0lGODlhDQAOAJEAANno6wBmZgAAAAAAACH5BAAAAAAA''+''LAAA<br> AAANAA4AQAIjjI8Iyw3GhACSQecutsFV3nzgNi7SVEbo06lZa66LRib2UQAAOw%3D<br> %3D'';document.body.insertBefore(logo, document.body.firstChild);在<br> 这个例子中，<img>?元素的?src?是?data:?URL，它以编码形式的包含了一整幅图像的信息。当这个新元素被插入到页面中时<br> ，它会像其他图片一样显示但它却不用存储在服务器上。事实上，可以在您的用户脚本中嵌入图片，它们可以和其它的代码一样发布到网上。htt<br> p://www.ttlsa.com/docs/greasemonkey/使用?http://software.hixie.ch/u<br> tilities/cgi/data/datadata:?URI?kitchen?来建立您自己的?data:?URLs。实例http<br> ://diveintomark.org/projects/butler/butler.user.jsButlerhttp://ww<br> w.firefox.net.cn/dig/download/zoomtextarea.user.jsZoom Textarea参见<br> http://software.hixie.ch/utilities/cgi/data/datadata:?URI?kitchen<br> 4.13.?添加 CSS 样式我常常发现需要在页面中添加我自己的 CSS 样式。您可以添加新样式，覆盖掉已有的样式或者样式化用户脚<br> 本插入的新元素。例?4.16.?放大段落文字function addGlobalStyle(css) {var head, sty<br> le;head = document.getElementsByTagName(''head'')[0];if (!head) { r<br> eturn; }style = document.createElement(''style'');style.type = ''tex<br> t/css'';style.innerHTML = css;head.appendChild(style);}addGlobalSt<br> yle(''p { font-size: large ! important; }'');这个函数只一个字符串参数，包含要插入到页面中<br> 的样式规则。它一成不变地把您的样式规则插入到页面?<head>?段的?<style>?元素中。Firefox 自动判别这些变化，解<br> 释样式规则，并应用到页面中。您应该把许多不同的样式规则包含到一次函数调用中；只要把连接成一个字符串然后传给函数。http://ww<br> w.ttlsa.com/docs/greasemonkey/可以使用?addGlobalStyle?函数样式化插入到页面中的元素或<br> 者部分原页面中已有的元素。然而，如果要样式化已有的元素，应该在您定义的每条规则上使用?! important?关键字，保证您的样式<br> 覆盖原页面中已定义的规则。实例http://www.firefox.net.cn/dig/download/accessbar.u<br> ser.jsAccess Barhttp://www.firefox.net.cn/dig/download/aintitread<br> able.user.jsAint It Readablehttp://www.firefox.net.cn/dig/downloa<br> d/betterdir.user.jsBetterDirhttp://diveintomark.org/projects/butl<br> er/butler.user.jsButlerhttp://www.firefox.net.cn/dig/download/cdr<br> eadable.user.jsCDReadablehttp://www.firefox.net.cn/dig/download/l<br> ip.user.jsLIP参见http://www.ttlsa.com/docs/greasemonkey/案例：Ain''t It<br> Readable4.14.?获取元素样式当多个 CSS 规则同时应用到某个元素上时，获取这个元素的实际样式有时候是有帮助的。您可<br> 能会简单的认为，通过元素的?style?属性就可以得到，这样的话您就错了。它只会返回?style?属性的内容。要获得元素的最终样式<br> （包括在外部定义的样式），您需要使用?getComputedStyle?函数。为了演示，我们创建一个简单的测试页面。它首先对页面中<br> 所有的?<p>?元素定义了同一个样式，但随后对其中的一个?<p>?元素用它的?style?属性重新定义了样式。<html><hea<br> d><title>样式测试页</title><style type="text/css">p { background-color<br> : white; color: red; }</style></head><body><p id="p1">这行是红色的。</p><br> <p id="p2" style="color: blue">这行是蓝色的。</p></body></html>例?4.17.?获<br> 取由元素的?style?属性定义的样式var p1elem, p2elem;p1elem = document.getElemen<br> tById(''p1'');p2elem = document.getElementById(''p2'');alert(p1elem.s<br> tyle.color); // 提示为空字符串alert(p2elem.style.color); // 提示 "blue"用这种<br> 方法获得的信息并不是很有用,所以您不应该再用?element.style?来获取单独的样式。 (您可以用它来设置元素的样式，详见h<br> ttp://www.ttlsa.com/docs/greasemonkey/设置元素样式。)那么您该用什么方法来取代它呢？getC<br> omputedStyle()。例?4.18.?获取元素的真实样式var p1elem, p2elem, p1style, p2st<br> yle;p1elem = document.getElementById(''p1'');p2elem = document.getE<br> lementById(''p2'');p1style = getComputedStyle(p1elem, '''');p2style =<br> getComputedStyle(p2elem, '''');alert(p1style.color); // 提示 "rgb(25<br> 5, 0, 0)"alert(p2style.color); // 提示 "rgb(0, 0, 255)"实例http://div<br> eintomark.org/projects/butler/butler.user.jsButlerhttp://www.fire<br> fox.net.cn/dig/download/zoomtextarea.user.jsZoom Textarea4.15.?设置<br> 元素样式如果只需要设置单个元素的少数样式，可以“手动地”在这个元素的?style?属性中设置多个子属性。例?4.19.?设置单个元<br> 素的样式假设有个元素 ID 为?"logo"。var logo = document.getElementById(''logo'')<br> ;logo.style.marginTop = ''2em'';logo.style.backgroundColor = ''white<br> '';logo.style.color = ''red'';http://www.ttlsa.com/docs/greasemonkey<br> /并不是每个样式的属性名称都是显然的。通常，它们有相似的模式，例如?margin-top?对应?someElement.style<br> .marginTop。但是也有例外：float?属性对应到?someElement.style.cssFloat，因为?float<br> ?是 Javascript 的保留字。实例http://www.firefox.net.cn/dig/download/acces<br> sbar.user.jsAccess Barhttp://www.firefox.net.cn/dig/download/bett<br> erdir.user.jsBetterDirhttp://www.firefox.net.cn/dig/download/blog<br> dex-display-title.user.jsBlogdex Display Titlehttp://www.firefox.<br> net.cn/dig/download/zoomtextarea.user.jsZoom Textarea参考资料http://w<br> ww.westciv.com/style_master/academy/css_tutorial/properties/CSS 属<br> 性4.16.?处理已渲染的页面由于 Firefox 保存已渲染页面的内在方式，应该在页面加载完成以后，才能对页面上的 DOM 做出<br> 大规模的改动，那么这个操作应该发生在页面完成载入之后，这是由已执行页面在 Firefox 内的存储方式决定的。您可以用?addEv<br> entListener?函数来延迟函数的执行。例?4.20.?替换全部页面为自定义的内容var newBody = ''<html><br> '' +''<head>'' +''<title>My New Page</title>'' +''</head>'' +''<body>'' +''<br> <p>This page is a complete replacement of the original.</p>'' +''</<br> body>'' +''</html>'';window.addEventListener(''load'', function() { do<br> cument.body.innerHTML = newBody; },true);仔细看这段代码，您可能自然地想知道它是怎么执行的<br> 。我声明了一个匿名函数来做为?window.addEventListener?的第二个参数传入，它访问了在这个函数外定义的变量?n<br> ewBody。这种方法称为 “闭包(closure)”， 在 Javascript 中是完全有效的。一般说来，在“外层”函数中定义<br> 的“内层”函数可以访问外层函数的所有局部变量 -- 甚至在外层函数执行结束以后。这是一个很有用的特性，可以通过它来创建事件句柄和用<br> 来在运行时建立的数据构架的其他函数。http://www.ttlsa.com/docs/greasemonkey/删除和替换?do<br> cument.body.innerHTML?并不会更改页面。原页面在?<head>?中定义的所有内容仍然是有效的，包括页面的标题，<br> CSS 样式，以及脚本。可以分开修改或者移除。实例http://www.firefox.net.cn/dig/download/a<br> ccessbar.user.jsAccess Barhttp://www.firefox.net.cn/dig/download/<br> betterdir.user.jsBetterDir4.17.?匹配大小写无关的属性值在?HTML?中，许多属性的值是大小写无关的<br> ，有的还允许首尾空格。如果想获取到所有这样的值，需要在 XPath 查询中使用一点技巧。例?4.21.?获取 method 为 "<br> POST" 或 "post" 的表单(form)var postforms = document.evaluate("//form<br> [translate(@method, ''POST '', ''post'')=''post'']",document,null,XPath<br> Result.UNORDERED_NODE_SNAPSHOT_TYPE,null);本次 XPath 查询可以获取所有以 POST<br> 方式提交的表单。首先，我们需要用?translate?函数将?method?属性的值中的字母大写变成小写。(XPath 2.0 <br> 有?lowercase?函数，但我还从来没用成功过。)其次，我们需要将首尾的空格去掉。我们可以将其整合到调用?translate?<br> 函数中，只要在第一个参数中加个额外的空格。因为在第二个参数中没有对应的字母，这样一来所有的空格就被去掉了。最后，我们就能将获得的属<br> 性值同?''post''?做比较。实例http://www.firefox.net.cn/dig/download/forceget.<br> user.jsForceGet4.18.?获取当前域名用户脚本操作多个域名(或者所有域名)时，常常需要检测当前页面的域名。可以用?<br> window.location.href?获取当前页面的完整?URL，或者用?window.location.host?只获取域名<br> 。例?4.22.?获取当前域名var href = window.location.host;实例http://www.firef<br> ox.net.cn/dig/download/offsiteblank.user.jsOffsite Blank4.19.?改写链<br> 接如果获取到页面上的链接，可以通过设置它的?href?属性来改写链接。例?4.23.?在链接末尾添加查询参数假设有个链接的 id <br> 为?"article"。var a = document.getElementById(''article'');if (a.href<br> .match(/\?/i)) {// 链接已经包含其它参数，所以添加 "&printer=1"a.href += ''&am<br> p;printer=1'';} else {// 连接没有包含任何参数，所以添加 "?printer=1"a.href += ''?p<br> rinter=1'';}实例http://www.firefox.net.cn/dig/download/rottenreviews<br> .user.jsRotten Reviewshttp://www.firefox.net.cn/dig/download/stop<br> thepresses.user.jsStop The Presses4.20.?重定向页面通过设置?window.location<br> .href?属性，您可以用 Greasemonkey 来自动重定向到指定的页面。例?4.24.?重定向一个站点到它的安全站点win<br> dow.location.href = window.location.href.replace(/^http:/, ''https<br> :'');实例http://www.firefox.net.cn/dig/download/gmailsecure.user.jsG<br> Mail Securehttp://www.firefox.net.cn/dig/download/salonautopass.u<br> ser.jsSalon Auto-Pass4.21.?俘获用户点击虽然http://www.ttlsa.com/docs/grea<br> semonkey/改写链接很简单，您也可以走的更远，使用?addEventListener?函数，俘获页面上任何地方的每次点击。(<br> 这也能俘获点击链接。)您可以考虑下怎么做：是否让可点击元素的点击操作“失效” ，或者做些完全不同的操作。例?4.25.?当用户点击<br> 页面上任意地方时做点事document.addEventListener(''click'', function(event) {//<br> event.target 是被点击的元素// 把你的代码放在这里// 如果您想阻止默认点击动作// (例如链接转向)，使用下面这<br> 两条命令：event.stopPropagation();event.preventDefault();}, true);注释：用<br> ?http://www.ttlsa.com/docs/greasemonkey/匿名函数?作为传入?document.addEve<br> ntListener?函数的一个参数。4.22.?覆盖内建的 Javascript 方法您可以用?prototype?属性 覆盖原<br> 有的对象方法。例?4.26.?当表单提交时做点事function newsubmit(event) {var target = e<br> vent ? event.target : this;// 在这里定义想做的操作alert(''Submitting form to<br> '' + target.action);// 调用真正的提交函数this._submit();}// 捕获所有表单的 onsubm<br> it 事件window.addEventListener(''submit'', newsubmit, true);// 如果脚本调用<br> someForm.submit()，onsubmit 事件不会发生，// 所以我们需要重新定义 HTMLFormElement <br> 类的 submit 方法。HTMLFormElement.prototype._submit = HTMLFormElement.<br> prototype.submit;HTMLFormElement.prototype.submit = newsubmit;在这里<br> 做了两件事。首先，我加入了一个用来捕获?submit?事件的监听函数。当用户点击表单的提交按钮时，触发?submit?事件。然而，<br> 当别的脚本调用表单的?submit()?方法时，并不会触发?submit?事件。 所以，我做的第二件事是覆盖?HTMLFormEl<br> ement?类的?submit?方法。但是等等，还有几点需要说明。事件监听函数和重新定义的方法都指向同一个函数，newsubmit<br> 。如果?newsubmit?被一个?submit?事件调用，event?参数将会被包含在事件对象中，这个事件对象包含事件的信息（例<br> 如，event.target?是被提交的表单）。然而，如果脚本手动调用了?submit?方法，event?事件会被忽略掉，但是全局<br> 变量?this?将会指向这个表单。因此，在我的?newsubmit?函数中，我先判断?event?是否为空；如果为空，就用?thi<br> s?来得到这个表单。http://www.ttlsa.com/docs/greasemonkey/正常情况下，当用户提交一个表单时<br> ，例如，点击表单中的?提交?按钮或者按?回车键），都会触发?submit?事件。但是，当脚本调用?aForm.submit()?提<br> 交表单时，却不会触发?submit?事件。因此，您必须做两件事来捕获表单的提交事件：给?submit?事件增加事件监听，并且修改?<br> HTMLFormElement?类的原型来重定向?submit()?方法到您的自定义函数上。参考资料http://www.quir<br> ksmode.org/js/events_compinfo.htmlJavascript 事件兼容性表http://www.moz<br> illa.org/docs/dom/mozilla/protodoc.htmlMozilla 中的 Javascript-DOM <br> 原型http://www.mozilla.org/docs/dom/domref/examples.html显示事件对象常量4.2<br> 3.?解析?XMLFirefox 自动将当前页面解析为 DOM，但是您也可以手动创建 DOM 而不使用任何?XML?字符串，可以是<br> 您自己建立的，也可以是您从远端主机得到的?XML。例?4.27.?将任意字符串解析为?XMLvar xmlString = ''<p<br> asswd>'' + '' <user id="101">'' +''<login>mark</login>'' + ''<group id<br> ="100"/>'' +''<displayname>Mark Pilgrim</displayname>'' + ''<homedir><br> /home/mark/</homedir>'' +''<shell>/bin/bash</shell>'' +'' </user>'' +<br> ''</passwd>''var parser = new DOMParser();var xmlDoc = parser.parse<br> FromString(xmlString, "application/xml");这里关键的地方是?DOMParser?对象，有个<br> ?parseFromString?方法。(它也有其他的方法，但在这里我们用不到。)parseFromString?方法有两个参数：<br> 解析用的?XML?字符串，和内容类型。两者都是必需的。http://www.ttlsa.com/docs/greasemonkey<br> /DOMParser?的?parseFromString?方法将内容的类型作为它的第二个参数。这个方法可以接受?applicati<br> on/xml,?application/xhtml+xml?和?text/xml。由于深究起来，理由会很荒唐，您应该始终使用?ap<br> plication/xml。这个模式非常强大，如果把它与?GM_xmlhttpRequest?函数结合起来解析远程源的?XML。例<br> ?4.28.?解析远程源的?XMLGM_xmlhttpRequest({method: ''GET'',url: ''http://gr<br> easeblog.blogspot.com/atom.xml'',headers: {''User-agent'': ''Mozilla/<br> 4.0 (compatible) Greasemonkey/0.3'',''Accept'': ''application/atom+xm<br> l,application/xml,text/xml'',},onload: function(responseDetails) {<br> var parser = new DOMParser();var dom = parser.parseFromString(res<br> ponseDetails.responseText,"application/xml");var entries = dom.ge<br> tElementsByTagName(''entry'');var title;for (var i = 0; i < entries<br> .length; i++) {title = entries[i].getElementsByTagName(''title'')[0<br> ].textContent;alert(title);}}});这段代码会载入http://greaseblog.blogspot<br> .com/atom.xmlhttp://greaseblog.blogspot.com/atom.xml的 Atom feed，把<br> 它解析为 DOM，然后查询 DOM 得到条目列表。再对每个条目做 DOM 查询，获得条目的标题(title)，然后在对话框中显示出<br> 来。参见http://www.ttlsa.com/docs/greasemonkey/操作特定?HTML?元素的所有实例http:<br> //www.ttlsa.com/docs/greasemonkey/GM_xmlhttpRequest第?5?章?实例教学5.1.<br> ?案例：GMail Secure强制网站使用安全链接GMail Secure 强制?http://gmail.google.com<br> /GMail?使用安全的链接，重定向?http://gmail.google.com/?到?https://gmail.googl<br> e.com/。Google 提供了?http://gmail.google.com/GMail，他们的 webmail 服务，可以<br> 通过非安全连接使用(http://?地址)或者通过安全连接使用(https://?地址)。我试着记着在公用场所(例如网吧)查看邮件<br> 时要用安全链接。但是为什么不让电脑帮您记着呢？我写了个用户脚本，当它检测到当我通过非安全链接访问 GMail 时，它就自动帮我重定<br> 向到安全链接。例?5.1.?重定向 GMail 到等同的?https://?地址// ==UserScript==// @name<br> GMailSecure// @namespace http://diveintogreasemonke<br> y.org/download/// @description force GMail to use secure connec<br> tion// @include http://gmail.google.com/// ==/UserScript==<br> window.location.href = window.location.href.replace(/^http:/, ''ht<br> tps:'');这个用户脚本很简单，大部分的“工作”由?@include?这行完成：// @include http:/<br> /gmail.google.com/只有匹配?@include?的时候，这个用户脚本才会执行。所以当脚本执行的时候，我就知道我写<br> 错了地址（通过非安全连接访问 GMail）。完成这一切，只要一行代码, 重定向当前页面到相同的?URL，只是用?https://?<br> 前缀替换掉?http://。window.location.href = window.location.href.replace<br> (/^http:/, ''https:'');参见http://www.ttlsa.com/docs/greasemonkey/重定向<br> 页面5.2.?案例：Bloglines Autoload自动化页面动作http://www.bloglines.com/Blogl<br> ines?是一个基于 web 的同步 feed 聚合网站。它的界面上有两个面板；左边的显示您的订阅列表，右边的显示订阅的内容。这个<br> 界面很友好；唯一不满意的是：我想每次访问 Bloglines，只看所有未读条目。在 Bloglines 中，显示所有的未读条目只需<br> 要单击一下左手边的面板中订阅列表的根级别(root level)，未读的内容就会出现在右手边的面板中。由于我每次都要这样做，因此我<br> 写了一个用户脚本来自动完成这项工作。例?5.2.?让 Bloglines 自动显示所有未读条目// ==UserScript==/<br> / @name Bloglines Autoloader// @namespace http://div<br> eintogreasemonkey.org/download/// @description Auto-display all<br> new items in Bloglines// @include http://bloglines.com/myb<br> logs// @include http://www.bloglines.com/myblogs// ==/Use<br> rScript==if (doLoadAll) {doLoadAll();}这个用户脚本相当的简单。Bloglines 定义了一个<br> 函数?doLoadAll()，当我点击订阅列表的根级别(root level)时就会执行它。调用这个函数可以显示所有的未读条目。然<br> 而，由于 Bloglines 使用了帧(frame)，而用户脚本会在每个帧中执行(因为他们都匹配我在?@include?中定义的模<br> 式)，所以首先要检查在这个帧中是否有?doLoadAll()?函数：if (doLoadAll) {如果函数存在，我就调用它。因为<br> 用户脚本就像原页面的内容一样执行，我可以调用原页面里定义的任何脚本。 doLoadAll();}下载http://www.fire<br> fox.net.cn/dig/download/bloglines-autoload.user.jsbloglines-autol<br> oad.user.js5.3.?案例：Ain''t It Readable覆盖页面样式http://aint-it-cool-new<br> s.com/Ain''t It Cool News?是一家致力于娱乐新闻报道方面的站点。我很喜欢这个站点。但是，我对网站的外观不太满<br> 意，每个新闻标题字体都太粗大了，而且在鼠标移过时还会改变颜色。所以，我写了一个用户脚本来改变我不喜欢的样式。例?5.3.??htt<br> p://www.firefox.net.cn/dig/download/aintitreadable.user.jsaintitr<br> eadable.user.js// ==UserScript==// @name Ain''t It Readab<br> le// @namespace http://diveintogreasemonkey.org/download/// @<br> description change style on aint-it-cool-news.com// @include <br> http://aint-it-cool-news.com/// @include http://.aint<br> -it-cool-news.com/// ==/UserScript==function addGlobalStyle(css)<br> {var head, style;head = document.getElementsByTagName(''head'')[0]<br> ;if (!head) { return; }style = document.createElement(''style'');st<br> yle.type = ''text/css'';style.innerHTML = css;head.appendChild(styl<br> e);}addGlobalStyle(''h1, h2, h3, h4 {'' +'' font-size: 12px ! impor<br> tant;'' +'' line-height: 14px ! important;'' +'' font-weight: norma<br> l ! important;'' +''}'' +''h1:hover, h2:hover, h3:hover, h4:hover {'' <br> +'' background-color: inherit ! important;'' +'' color: inherit ! <br> important;'' +''}'');这个用户脚本十分简单。首先，我定义了一个函数，可以把任意 CSS 添到页面中。有关此函数的信息<br> ，请阅读http://www.ttlsa.com/docs/greasemonkey/添加 CSS 样式。function add<br> GlobalStyle(css) {var head, style;head = document.getElementsByTa<br> gName(''head'')[0];if (!head) { return; }style = document.createEle<br> ment(''style'');style.type = ''text/css'';style.innerHTML = css;head.<br> appendChild(style);}接着，我调用这个函数来把 CSS 加到页面中：把标题变小一点，不那么粗，并且取消了当鼠标移<br> 过时颜色的变化。在这个案例里，页面对其中每一点都定义了样式规则，所以我用?! important?关键字，以保证我的样式规则能替换<br> 掉页面原有的规则。注释：这个函数只有一个参数：包含新增的样式规则的字符串。我把字符串排成容易阅读的格式，但是它仍然只是个字符串。a<br> ddGlobalStyle(''h1, h2, h3, h4 {'' +'' font-size: 12px ! important;<br> '' +'' line-height: 14px ! important;'' +'' font-weight: normal ! i<br> mportant;'' +''}'' +''h1:hover, h2:hover, h3:hover, h4:hover {'' +'' b<br> ackground-color: inherit ! important;'' +'' color: inherit ! impor<br> tant;'' +''}'');下载http://www.firefox.net.cn/dig/download/aintitreada<br> ble.user.jsaintitreadable.user.js参见http://www.ttlsa.com/docs/grea<br> semonkey/添加 CSS 样式5.4.?案例：Offsite Blank强制外站链接在新窗口中打开因为有人在 Greasem<br> onkey 脚本库发帖求助，我就写了 Offsite Blank。我个人喜欢在新标签页中打开链接，但是有的人更喜欢为每个站点各开一<br> 个窗口。Offsite Blank 可以帮您自动完成，强制外站链接在新窗口中打开。例?5.4.??http://www.firef<br> ox.net.cn/dig/download/offsiteblank.user.jsoffsiteblank.user.js//<br> ==UserScript==// @name Offsite Blank// @namespace h<br> ttp://diveintogreasemonkey.org/download/// @description force o<br> ffsite links to open in a new window// @include http://// <br> @include https://// ==/UserScript==var a, thisdomain, link<br> s;thisdomain = window.location.host;links = document.getElementsB<br> yTagName(''a'');for (var i = 0; i < links.length; i++) {a = links[i<br> ];if (a.host && a.host != thisdomain) {a.target = "_blank";}}首先，我<br> 声明这个用户脚本将在所有的网页上执行(但是不是全部，例如，本地机器上储存的?HTML?文档，可以从文件 (F)?→?打开 (Ope<br> n?菜单中打开)。// @include http://// @include https://这段代<br> 码分为四步实现：获得当前页面的域名。获得页面中所有链接的列表。比较每个链接的域名与当前页面的域名。如果域名不匹配，设置这个链接的目<br> 的地(target)，这样就会在新窗口中打开。获取当前页面的域名很容易。更多的信息请阅读http://www.ttlsa.com/<br> docs/greasemonkey/获取当前域名。thisdomain = window.location.host;获取页面中所<br> 有链接也一样容易，尽管我应该注意到我忽视了http://www.ttlsa.com/docs/greasemonkey/自己的建议<br> 简单地使用?document.getElementsByTagName(''a'')?而不用 XPath 查询。其实也没什么不同……l<br> inks = document.getElementsByTagName(''a'');接下来，我遍历了所有的链接(实际上是所有的?<<br> a>?元素，它们中的一些可能是链接)然后检查链接的域名和当前页面的域名是否匹配。由于一些链接可能指向非?HTTP?的?URL(例如<br> ，本地文件或者?FTP?服务器)，我需要检查?a.host?是否存在，然后再检查它与当前域名是否相等.。for (var i = <br> 0; i < links.length; i++) {a = links[i];if (a.host && a.host != t<br> hisdomain) {...}如果我找到一个包含域名的链接，但是它的域名与当前域名不相同，我只需设置它的?target?属性为?<br> "_blank"?就可以强制链接在新窗口打开了。a.target = "_blank";下载http://www.firefox.<br> net.cn/dig/download/offsiteblank.user.jsoffsiteblank.user.js参见htt<br> p://www.ttlsa.com/docs/greasemonkey/获取当前域名http://www.ttlsa.com/do<br> cs/greasemonkey/操作特定?HTML?元素的所有实例http://www.ttlsa.com/docs/grease<br> monkey/操作所有有特定属性的元素5.5.?案例：Dumb Quotes转换智能引号为原始引号DumbQuotes 是应许多网<br> 络博客的需要而生的：大多数出版软件可以自动转换直接的 ASCII 引号为 “智能引号(smart quotes)”，但是当作者在文<br> 章中复制粘贴文本时，同样是这些软件处理“智能引号”却很愚笨。常见的例子是博客想引用其他网站的一段文字。在浏览器中选中几句，粘贴到自<br> 己网站的表单中提交，这段文字却看起来完全不同，因为他们的出版软件没有处理好字符编码。当然，我不能修复世界上每个出版系统，但是我可以<br> 为自己写个用户脚本来解决，自动转换智能引号和其他有问题的高位字符为等同的7位 ASCII 字符。例?5.5.??http://ww<br> w.firefox.net.cn/dig/download/dumbquotes.user.jsdumbquotes.user.j<br> s// ==UserScript==// @name DumbQuotes// @namespace h<br> ttp://diveintogreasemonkey.org/download/// @description straigh<br> ten curly quotes and apostrophes, simplify fancy dashes, etc.// @<br> include // ==/UserScript==var replacements, regex, key, te<br> xtnodes, node, s;replacements = {"\xa0": " ","\xa9": "(c)","\xae"<br> : "(r)","\xb7": "","\u2018": "''","\u2019": "''","\u201c": ''"'',"\u<br> 201d": ''"'',"\u2026": "...","\u2002": " ","\u2003": " ","\u2009": <br> " ","\u2013": "-","\u2014": "--","\u2122": "(tm)"};regex = {};for<br> (key in replacements) {regex[key] = new RegExp(key, ''g'');}textno<br> des = document.evaluate("//text()",document,null,XPathResult.UNOR<br> DERED_NODE_SNAPSHOT_TYPE,null);for (var i = 0; i < textnodes.snap<br> shotLength; i++) {node = textnodes.snapshotItem(i);s = node.data;<br> for (key in replacements) {s = s.replace(regex[key], replacements<br> [key]);}node.data = s;}这段代码分为四个步骤：先定义字符替换规则列表，映射某些8位字符到对应的7位字符。获取<br> 当前页面中的所有文字结点。遍历文字结点清单。在每个文字结点中，替换每个8位字符为等价的7位字符。第一步其实是两步。Javascri<br> pt 的字符串替换基于正则表达式。所以要替换8位字符为等价的7位字符，需要创建一个正则表达式集合。replacements = {<br> "\xa0": " ","\xa9": "(c)","\xae": "(r)","\xb7": "","\u2018": "''"<br> ,"\u2019": "''","\u201c": ''"'',"\u201d": ''"'',"\u2026": "...","\u200<br> 2": " ","\u2003": " ","\u2009": " ","\u2013": "-","\u2014": "--",<br> "\u2122": "(tm)"};regex = {};for (key in replacements) {regex[key<br> ] = new RegExp(key, ''g'');}我使用花括号语法迅速建立了一个关联数组。等价于(但是键入更少)单独把每个关键字<br> 和值对应起来：replacements["\xa0"] = " ";replacements["\xa9"] = "(c)";re<br> placements["\xae"] = "(r)";// 等等每个8位的字符都是用十六进制值表示的，是用了逃逸语法(escapi<br> ng syntax)"\xa0"?或?"\u2018"。我们完成字符到字符串的关联数组后，我会遍历整个数组，然后建立正则表达式对象<br> 列表。每个正则表达式对象会在全局范围搜索8位字符。(第二个参数?''g''?意义为全局搜索；否则每个正则表达式只会搜索和替换第一次出现<br> 的特定8位字符，这样我可能会漏掉很多。)下一步是获取当前文档中的全部文本节点。您可以非常想说，“嗨，我只要用?document.b<br> ody.innerHTML?就得到全部页面的字符串，然后搜索替换就成了。”var tmp = document.body.inne<br> rHTML;// 在 tmp 上完成一批搜索和替换document.body.innerHTML = tmp;但这是个坏习惯，因为<br> ?innerHTML?会返回页面中的全部源代码：所有的标签、所有的脚本、所有的属性等等。在这种情况下,有可能不会造成问题(HTML<br> ?标签并不包含8位字符)，但它在其他情况下不堪设想，很难调试。你要问你自己到底要搜索和替换什么。如果答案是“原始的页面源代码”，那<br> 么就去使用?innerHTML。然而在这种情况下，答案是“全部的页面文字”，所以正确的方法是使用 XPath 查询获取所有文本节点<br> 。textnodes = document.evaluate("//text()",document,null,XPathResu<br> lt.UNORDERED_NODE_SNAPSHOT_TYPE,null);这里使用了 XPath 函数，text()，用来匹配任<br> 意文本节点。您可能对查询元素节点很熟悉了：所有?<a>?元素集，或者所有具有?alt?属性的?<img>?元素集。但是 DOM 也<br> 包含有节点中存在的文本内容。(也有其他类型的节点，例如注释和处理指令。)现在它也是我们感兴趣的文本节点。第3步是遍历所有文本节点。<br> 这完全跟遍历像?//a[@href]?XPath 查询返回的节点集一样；唯一的不同就是遍历中的是文本节点，而不是元素节点。for <br> (var i = 0; i < textnodes.snapshotLength; i++) {node = textnodes.<br> snapshotItem(i);s = node.data;// 做替换操作node.data = s;node?是循环中的当前文<br> 本节点，而?s?是?node?中存在文本的字符串变量。我打算使用?s?完成替换操作，然后把处理结果复制回原始节点中。所以现在我有了<br> 单个节点的文本，我需要完成替换操作。因为我已经建好了正则表达式列表和替换字符串列表，所以这相对简单。 for (key in re<br> placements) {s = s.replace(regex[key], replacements[key]);}下载http<br> ://www.firefox.net.cn/dig/download/dumbquotes.user.jsdumbquotes.u<br> ser.js参见http://www.ttlsa.com/docs/greasemonkey/操作所有有特定属性的元素5.6.?案<br> 例：Frownies转换图片表情为文字Frownies 是对一个玩笑的回应。http://greasemonkey.mozdev.<br> org/list.htmlGreasemonkey 邮件列表有人宣称他们开发了一个用户脚本，可以把 ASCII “表情符号” 比如<br> ?:-)?转换为与它们相同含义的图片。其他人答复道，想知道要完成逆向转换要花多久时间：转换图片表情为文本。为了创纪录，我花了大约2<br> 0分钟。大部分时间是花在研究已发布的自动转换图片表情的软件上了，然后编写了详尽的转换表。这个脚本倚赖于能自动生成表情图片的大多数软<br> 件有如下特征：这些软件会把相同含义的文字表情符号放在?<img>?元素的?alt?属性里。所以，这个脚本实际上所做的是：如果 AL<br> T 文本匹配预定义的常量列表中的某一条，就用图片的 ALT 文本来替换图片。例?5.6.??http://www.firefox.<br> net.cn/dig/download/frownies.user.jsfrownies.user.js// ==UserScri<br> pt==// @name Frownies// @namespace http://diveintogr<br> easemonkey.org/download/// @description convert graphical smili<br> es to their text equivalents// @include // ==/UserScript==<br> var smilies, images, img, replacement;smilies = [":)", ":-)" ":-(<br> ", ":(", ";-)", ";)", ":-D", ":D", ":-/",":/", ":X", ":-X", ":\"><br> ", ":P", ":-P", ":O", ":-O", "X-(","X(", ":->", ":>", "B-)", "B)"<br> , ">:)", ":((", ":(((", ":-((",":))", ":-))", ":-|", ":|", "O:-)"<br> , "O:)", ":-B", ":B", "=;","I)", "I-)", "|-)", "|)", ":-&", ":&",<br> ":-$", ":$", "[-(", ":O)",":@)", "3:-O", ":(|)", "@};-", "==",<br> "(~~)", "-:)", "8-X","8X", "=:)", "<):)", ";;)", ":", ":-", "<br> :S", ":-S", "/:)","/:-)", "8-|", "8|", "8-}", "8}", "(:|", "=P~",<br> ":-?", ":?","#-O", "#O", "=D>", "~:>", "%%-", "~O)", ":-L", ":L"<br> , "[-O<","[O<", "@-)", "@)", "$-)", "$)", ">-)", ":-\"", ":^O", "<br> B-(","B(", ":)>-", "[-X", "[X", "\\:D/", ">:D<", "(%)", "=((", "#<br> :-S","#:S", "=))", "L-)", "L)", "<:-P", "<:P", ":-SS", ":SS", ":-<br> W",":W", ":-<", ":<", ">:P", ">:-P", ">:/", ";))", ":-@", "^:)^",<br> ":-J", "()", ":GRIN:", ":-)", ":SMILE:", ":SAD:", ":EEK:",":SHOC<br> K:", ":???:", "8)", "8-)", ":COOL:", ":LOL:", ":MAD:",":RAZZ:", "<br> :OOPS:", ":CRY:", ":EVIL:", ":TWISTED:", ":ROLL:",":WINK:", ":!:"<br> , ":?:", ":IDEA:", ":ARROW:", ":NEUTRAL:",":MRGREEN:"];images = d<br> ocument.evaluate(''//img[@alt]'',document,null,XPathResult.UNORDERE<br> D_NODE_SNAPSHOT_TYPE,null);for (var i = 0; i < images.snapshotLen<br> gth; i++) {img = images.snapshotItem(i);alt = img.alt.toUpperCase<br> ();for (var j in smilies) {if (alt == smilies[j]) {replacement = <br> document.createTextNode(alt);img.parentNode.replaceChild(replacem<br> ent, img);}}}这段代码分为四个步骤：定义表情符号的列表(文本格式)。找出页面中所有含有?alt?属性的图片。对每一幅图<br> 像，检测它的 ALT 文本是否与列表中的某个 ASCII 表情符号匹配。如果匹配，就替换?<img>?元素为包含 ASCII 表情<br> 的文本节点。第一步简单的定义了一个列表，用 Javascript 的?[ ]?语法。smilies = [":)", ":-)" <br> ":-(", ":(", ";-)", ";)", ":-D", ":D", ":-/",":/", ":X", ":-X", "<br> :\">", ":P", ":-P", ":O", ":-O", "X-(","X(", ":->", ":>", "B-)", <br> "B)", ">:)", ":((", ":(((", ":-((",":))", ":-))", ":-|", ":|", "O<br> :-)", "O:)", ":-B", ":B", "=;","I)", "I-)", "|-)", "|)", ":-&", "<br> :&", ":-$", ":$", "[-(", ":O)",":@)", "3:-O", ":(|)", "@};-", "<br> ==", "(~~)", "-:)", "8-X","8X", "=:)", "<):)", ";;)", ":", ":-<br> ", ":S", ":-S", "/:)","/:-)", "8-|", "8|", "8-}", "8}", "(:|", "=<br> P~", ":-?", ":?","#-O", "#O", "=D>", "~:>", "%%-", "~O)", ":-L", <br> ":L", "[-O<","[O<", "@-)", "@)", "$-)", "$)", ">-)", ":-\"", ":^O<br> ", "B-(","B(", ":)>-", "[-X", "[X", "\\:D/", ">:D<", "(%)", "=(("<br> , "#:-S","#:S", "=))", "L-)", "L)", "<:-P", "<:P", ":-SS", ":SS",<br> ":-W",":W", ":-<", ":<", ">:P", ">:-P", ">:/", ";))", ":-@", "^:<br> )^",":-J", "()", ":GRIN:", ":-)", ":SMILE:", ":SAD:", ":EEK:",":<br> SHOCK:", ":???:", "8)", "8-)", ":COOL:", ":LOL:", ":MAD:",":RAZZ:<br> ", ":OOPS:", ":CRY:", ":EVIL:", ":TWISTED:", ":ROLL:",":WINK:", "<br> :!:", ":?:", ":IDEA:", ":ARROW:", ":NEUTRAL:",":MRGREEN:"];接下来，我在<br> 页面中使用 XPath 查询语句搜索所有的含有?alt?属性的?<img>?元素。有关 XPath 查询语句的更多信息，请阅读ht<br> tp://www.ttlsa.com/docs/greasemonkey/操作所有有特定属性的元素。images = docume<br> nt.evaluate(''//img[@alt]'',document,null,XPathResult.UNORDERED_NOD<br> E_SNAPSHOT_TYPE,null);第三步，遍历所有的?<img>元素,检验?alt?属性是否与我们定义的表情符号匹配。由<br> 于一些表情符号含有字母，我用toUpperCase()方法在比较前把?alt?属性转换为大写。for (var i = 0; i <br> < images.snapshotLength; i++) {img = images.snapshotItem(i);alt =<br> img.alt.toUpperCase())for (var j in smilies) {if (alt == smilies<br> [j]) {// ...}}}最后，我创建了一个包含文字表情符号的新文本节点，然后用它替换掉已有的?<img>?元素。更多的信息，<br> 请阅读http://www.ttlsa.com/docs/greasemonkey/替换元素为新内容。replacement = <br> document.createTextNode(alt);img.parentNode.replaceChild(replacem<br> ent, img);下载http://www.firefox.net.cn/dig/download/frownies.user.<br> jsfrownies.user.js参见http://www.ttlsa.com/docs/greasemonkey/操作所有有特<br> 定属性的元素http://www.ttlsa.com/docs/greasemonkey/替换元素为新内容5.7.?案例：Zoom<br> Textarea添加缩放 textareas 的按钮Zoom Textarea 改变了网页中的表单，在每个?<textarea><br> ?元素(用于输入多行文本)上方加上了一个工具栏。这个工具栏可以放大或缩小?<textarea>中文本的大小，而不会改变页面中其他地<br> 方的样式。这些按钮也可以完全用键盘来操作的；用 tab 移动焦点到按钮上然后按?回车键，代替鼠标点击操作。(我前面提到的是由于易用<br> 性问题(accessibility matters)，然而实际上，用起来比听起来难)例?5.7.??http://www.fire<br> fox.net.cn/dig/download/zoomtextarea.user.jszoomtextarea.user.js/<br> / ==UserScript==// @name Zoom Textarea// @namespace <br> http://diveintogreasemonkey.org/download/// @description add co<br> ntrols to zoom textareas// @include // ==/UserScript==var <br> textareas, textarea;textareas = document.getElementsByTagName(''te<br> xtarea'');if (!textareas.length) { return; }function textarea_zoom<br> _in(event) {var link, textarea, s;link = event.currentTarget;text<br> area = link._target;s = getComputedStyle(textarea, "");textarea.s<br> tyle.width = (parseFloat(s.width) 1.5) + "px";textarea.style.he<br> ight = (parseFloat(s.height) 1.5) + "px";textarea.style.fontSiz<br> e = (parseFloat(s.fontSize) + 7.0) + ''px'';event.preventDefault();<br> }function textarea_zoom_out(event) {var link, textarea, s;link = <br> event.currentTarget;textarea = link._target;s = getComputedStyle(<br> textarea, "");textarea.style.width = (parseFloat(s.width) 2.0 /<br> 3.0) + "px";textarea.style.height = (parseFloat(s.height) 2.0 <br> / 3.0) + "px";textarea.style.fontSize = (parseFloat(s.fontSize) -<br> 7.0) + "px";event.preventDefault();}function createButton(target<br> , func, title, width, height, src) {var img, button;img = documen<br> t.createElement(''img'');img.width = width;img.height = height;img.<br> style.borderTop = img.style.borderLeft = "1px solid #ccc";img.sty<br> le.borderRight = img.style.borderBottom = "1px solid #888";img.st<br> yle.marginRight = "2px";img.src = src;button = document.createEle<br> ment(''a'');button._target = target;button.title = title;button.hre<br> f = ''#'';button.onclick = func;button.appendChild(img);return butt<br> on;}for (var i = 0; i < textareas.length; i++) {textarea = textar<br> eas[i];textarea.parentNode.insertBefore(createButton(textarea,tex<br> tarea_zoom_in,''Increase textarea size'',20,20,''data:image/gif;base<br> 64,''+''R0lGODlhFAAUAOYAANPS1tva3uTj52NjY2JiY7KxtPf3%2BLOys6WkpmJiY<br> vDw8fX19vb''+''296Wlpre3uEZFR%2B%2Fv8aqpq9va3a6tr6Kho%2Bjo6bKytZqZm<br> l5eYMLBxNra21JSU3''+''Jxc3RzdXl4emJhZOvq7KamppGQkr29vba2uGBgYdLR1dL<br> S0lBPUVRTVYB%2Fgvj4%2BYK''+''Bg6SjptrZ3cPDxb69wG1tbsXFxsrJy29vccDAw<br> fT09VJRU6uqrFlZW6moqo2Mj4yLjLKy''+''s%2Fj4%2BK%2Busu7t783Nz3l4e19fX<br> 7u6vaalqNPS1MjHylZVV318ftfW2UhHSG9uccv''+''KzfHw8qqqrNPS1eXk5tvb3K%<br> 2BvsHNydeLi40pKS2JhY2hnalpZWlVVVtDQ0URDRJmZm5''+''mYm11dXp2cnm9vcFx<br> cXaOjo0pJSsC%2FwuXk6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA''+''AAAAAAAAAA<br> AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC''+''H5B<br> AAAAAAALAAAAAAUABQAAAeagGaCg4SFhoeIiYqKTSQUFwgwi4JlB0pOCkEiRQKKRx<br> M''+''gKwMGDFEqBYpPRj4GAwwLCkQsijwQBAQJCUNSW1mKSUALNiVVJzIvSIo7GRUa<br> GzUOPTpC''+''igUeMyNTIWMHGC2KAl5hCBENYDlcWC7gOB1LDzRdWlZMAZOEJl83VP<br> b3ggAfUnDo5w%2F''+''AFRQxJPj7J4aMhYWCoPyASFFRIAA7''),textarea);texta<br> rea.parentNode.insertBefore(createButton(textarea,textarea_zoom_o<br> ut,''Decrease textarea size'',20,20,''data:image/gif;base64,''+''R0lGO<br> DlhFAAUAOYAANPS1uTj59va3vDw8bKxtGJiYrOys6Wkpvj4%2BPb29%2FX19mJiY''<br> +''%2Ff3%2BKqqrLe3uLKytURDRFpZWqmoqllZW9va3aOjo6Kho4KBg729vWJhZK%2<br> BuskZF''+''R4B%2FgsLBxHNydY2Mj%2Ff396amptLS0l9fX9fW2dDQ0W1tbpmZm8DA<br> wfT09fHw8n18f''+''uLi49LR1V5eYOjo6VBPUa6tr769wEhHSNra20pJStPS1KuqrN<br> PS1ZmYm%2B7t77Kys8rJ''+''y%2Fj4%2BaSjpm9uca%2BvsMjHyqalqHRzdVJRU8PD<br> xVRTVcvKzc3Nz0pKS9rZ3evq7MC''+''%2FwsXFxp2cnnl4e1VVVu%2Fv8ba2uM7Oz2<br> 9vcbu6vZqZmnJxc9vb3PHx8uXk5mhnamJh''+''Y1xcXZGQklZVV29vcHl4eoyLjKqp<br> q6Wlpl1dXuXk6AAAAAAAAAAAAAAAAAAAAAAAAAAAA''+''AAAAAAAAAAAAAAAAAAAAA<br> AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA''+''AAACH5BAAAAAAA<br> LAAAAAAUABQAAAeZgGaCg4SFhoeIiYqKR1IWVgcyi4JMBiQqA0heQgG''+''KQTFLPQ<br> gMCVocBIoNNqMgCQoDVReKYlELCwUFI1glEYorOgopWSwiTUVfih8dLzRTKA47''+''<br> Ek%2BKBGE8GEAhFQYuPooBOWAHY2ROExBbSt83QzMbVCdQST8Ck4QtZUQe9faCABl<br> GrvD''+''rB4ALDBMU%2BvnrUuOBQkE4NDycqCgQADs%3D''),textarea);textarea<br> .parentNode.insertBefore(document.createElement(''br''),textarea);}<br> 这段代码看起来很复杂，而且它确实复杂，但是有特殊原因的。看起来很复杂是因为它中间有大段的乱码似的字符串。这些是http://www<br> .ttlsa.com/docs/greasemonkey/的?data:?URIs，它们看起来像地狱却很容易生成。真正复杂的地方还<br> 在别处。首先，我获取了页面上所有的?<textarea>?元素集。此模式的详情，请阅读http://www.ttlsa.com/d<br> ocs/greasemonkey/操作特定?HTML?元素的所有实例。如果没有，那就没必要继续了，所以?return(返回)。te<br> xtareas = document.getElementsByTagName(''textarea'');if (!textarea<br> s.length) { return; }现在，我们跑下题。我们的“工具栏”看起来像是一行按钮，但是每个按钮就是看起来可以点的某些<br> 图片，外面包上一个能执行我们的 Javascript 函数的链接。由于我们要创建多个按钮(尽管这个脚本只有两个按钮，但是您可以便利<br> 地扩展出更多功能)，我创建了一个函数来封装所有的制造按钮的逻辑。function createButton(target, fun<br> c, title, width, height, src) {The?createButton?function takes 6 <br> arguments:target元素对象，按钮控制的?<textarea>?元素func函数对象，当用户用鼠标点击或键盘激活这个按<br> 钮时，调用的 Javascript 函数title字符串，鼠标移动到按钮上显示的提示文字width整数，按钮的宽度。它应该与?sr<br> c?参数提供的图形实际宽度一致。height整数，按钮的高度。它应该与?src?参数提供的图形实际高度一致。src字符串，URL、<br> 路径或者按钮图形的?data:?URI创建一个按钮分为两个步骤：创建?<img>?元素，然后创建其外的?<a>?元素。我调用?do<br> cument.createElement?来创建?<img>?元素，并且设置了一小部分属性，包含样式的属性。关于此模式的更多信息，<br> 请阅读http://www.ttlsa.com/docs/greasemonkey/设置元素样式。img = document.c<br> reateElement(''img'');img._target = target;img.width = width;img.he<br> ight = height;img.style.borderTop = img.style.borderLeft = "1px s<br> olid #ccc";img.style.borderRight = img.style.borderBottom = "1px <br> solid #888";img.style.marginRight = "2px";img.src = src;这里有个很酷的技巧<br> ，您可以使用下面的语法同时为两个属性赋上相同的值：img.style.borderTop = img.style.borderLe<br> ft = "1px solid #ccc";OK, 继续前进。创建按钮的第二部分是创建链接(<a>?元素)，然后把?<img>?元<br> 素放在里面。button = document.createElement(''a'');button._target = targe<br> t;button.title = title;button.href = ''#'';button.onclick = func;bu<br> tton.appendChild(img);我想指出两点。第一，我需要赋给链接伪造的?href?属性，否则 Firefox 会把它<br> 当作命名锚并且不会把它加到 tab 索引中(也就是您无法通过 tab 移动它上面，也就无法通过键盘使用)。第二，我设置了?_tar<br> get?属性来保存目标?<textarea>?的引用。这在 Javascript 中是完全合法的；您只需要给新属性赋值，就可以给对<br> 象创建新属性。稍后，在?onclick?的事件句柄中，我会访问这个自定义的?_target?属性。现在，让我们跳回到?onclic<br> k?句柄。每个句柄都是一个函数，有一个参数：event。function textarea_zoom_in(event)event<br> ?对象有许多属性，现在我感兴趣的只有一个：currentTarget。link = event.currentTarget;如果您<br> 阅读过http://www.xulplanet.com/references/objref/Event.html关于?Event?<br> 对象的文档，您可以读到很多目标相关的属性，包含一个简单的：target。您可能很想使用?event.target?去获取已访问的链<br> 接，但是它表现(依我看来)不一致。当用户 tab 到按钮上然后敲回车键，event.target?是这个链接，但是当用户用鼠标点击<br> 按钮时，event.target?是链接中的图片！我想这肯定有个合理的解释，但是它超过了我对 DOM 事件模型的理解层次。无论如何<br> ，event.currentTarget?在所有情况下都返回链接，所以我使用它。下一步我取回了目前打算缩放的?<textarea><br> ?的引用，通过自定义的?_target?属性，我在创建按钮时设置了这个属性。 textarea = link._target;现在<br> 好戏刚刚开始。(您认为您已经找到乐趣了吗！)我需要获得?<textarea>?当前的长宽和字体大小，这样我就可以把它们放大。简单的<br> 从textarea.style?(textarea.style.width,?textarea.style.height?和?te<br> xtarea.style.fontSize)中获得适合的属性并不管用，因为只有在?<textarea>?的?style?属性中定义<br> 它们的时候才能得到值。这不是我想要的；我要得到真实的当前样式。我需要的是?getComputedStyle. 关于此函数的更多信息<br> ，请阅读http://www.ttlsa.com/docs/greasemonkey/获取元素样式。s = getComputed<br> Style(textarea, "");textarea.style.width = (parseFloat(s.width) <br> 1.5) + "px";textarea.style.height = (parseFloat(s.height) 1.5)<br> + "px";textarea.style.fontSize = (parseFloat(s.fontSize) + 7.0) <br> + ''px'';最后，您还记得按钮链接上为了键盘易用新而加的伪造的?href?值吗？嗯，它已经变成了烦恼，因为 Firefox 执行<br> 完?onclick?句柄后，它就会尝试跳转到这个链接。因为它指向了不存在的锚，无论按钮在什么地方，Firefox 都会跳到页面的顶<br> 端。这是件恼人的事，要阻止它，我需要在完成?onclick?句柄前调用?event.preventDefault()。event.<br> preventDefault();脚本的其余部分很简单。我遍历了所有的?<textarea>?元素，为他们各自创建缩放按钮(每个都<br> 有它自己的?onclick?句柄和按钮图片)，然后在?<textarea>?前插入缩放按钮。对于每张图片，我使用?data:?UR<br> I?来创建内嵌的图片，所以用户不需要访问远端服务器去获取按钮图片。关于此模式的更多信息，请阅读http://www.ttlsa.c<br> om/docs/greasemonkey/在元素前插入内容和http://www.ttlsa.com/docs/greasemon<br> key/在没有服务器的情况下添加图片。for (var i = 0; i < textareas.length; i++) {te<br> xtarea = textareas[i];textarea.parentNode.insertBefore(createButt<br> on(textarea,textarea_zoom_in,''Increase textarea size'',20,20,''data<br> :image/gif;base64,''+''R0lGODlhFAAUAOYAANPS1tva3uTj52NjY2JiY7KxtPf3<br> %2BLOys6WkpmJiYvDw8fX19vb''+''296Wlpre3uEZFR%2B%2Fv8aqpq9va3a6tr6Kh<br> o%2Bjo6bKytZqZml5eYMLBxNra21JSU3''+''Jxc3RzdXl4emJhZOvq7KamppGQkr29<br> vba2uGBgYdLR1dLS0lBPUVRTVYB%2Fgvj4%2BYK''+''Bg6SjptrZ3cPDxb69wG1tbs<br> XFxsrJy29vccDAwfT09VJRU6uqrFlZW6moqo2Mj4yLjLKy''+''s%2Fj4%2BK%2Busu<br> 7t783Nz3l4e19fX7u6vaalqNPS1MjHylZVV318ftfW2UhHSG9uccv''+''KzfHw8qqq<br> rNPS1eXk5tvb3K%2BvsHNydeLi40pKS2JhY2hnalpZWlVVVtDQ0URDRJmZm5''+''mY<br> m11dXp2cnm9vcFxcXaOjo0pJSsC%2FwuXk6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br> AA''+''AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br> AAAAAAAAC''+''H5BAAAAAAALAAAAAAUABQAAAeagGaCg4SFhoeIiYqKTSQUFwgwi4J<br> lB0pOCkEiRQKKRxM''+''gKwMGDFEqBYpPRj4GAwwLCkQsijwQBAQJCUNSW1mKSUALN<br> iVVJzIvSIo7GRUaGzUOPTpC''+''igUeMyNTIWMHGC2KAl5hCBENYDlcWC7gOB1LDzR<br> dWlZMAZOEJl83VPb3ggAfUnDo5w%2F''+''AFRQxJPj7J4aMhYWCoPyASFFRIAA7''),<br> textarea);textarea.parentNode.insertBefore(createButton(textarea,<br> textarea_zoom_out,''Decrease textarea size'',20,20,''data:image/gif;<br> base64,''+''R0lGODlhFAAUAOYAANPS1uTj59va3vDw8bKxtGJiYrOys6Wkpvj4%2B<br> Pb29%2FX19mJiY''+''%2Ff3%2BKqqrLe3uLKytURDRFpZWqmoqllZW9va3aOjo6Kho<br> 4KBg729vWJhZK%2BuskZF''+''R4B%2FgsLBxHNydY2Mj%2Ff396amptLS0l9fX9fW2<br> dDQ0W1tbpmZm8DAwfT09fHw8n18f''+''uLi49LR1V5eYOjo6VBPUa6tr769wEhHSNr<br> a20pJStPS1KuqrNPS1ZmYm%2B7t77Kys8rJ''+''y%2Fj4%2BaSjpm9uca%2BvsMjHy<br> qalqHRzdVJRU8PDxVRTVcvKzc3Nz0pKS9rZ3evq7MC''+''%2FwsXFxp2cnnl4e1VVV<br> u%2Fv8ba2uM7Oz29vcbu6vZqZmnJxc9vb3PHx8uXk5mhnamJh''+''Y1xcXZGQklZVV<br> 29vcHl4eoyLjKqpq6Wlpl1dXuXk6AAAAAAAAAAAAAAAAAAAAAAAAAAAA''+''AAAAAA<br> AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA''+<br> ''AAACH5BAAAAAAALAAAAAAUABQAAAeZgGaCg4SFhoeIiYqKR1IWVgcyi4JMBiQqA0<br> heQgG''+''KQTFLPQgMCVocBIoNNqMgCQoDVReKYlELCwUFI1glEYorOgopWSwiTUVf<br> ih8dLzRTKA47''+''Ek%2BKBGE8GEAhFQYuPooBOWAHY2ROExBbSt83QzMbVCdQST8C<br> k4QtZUQe9faCABlGrvD''+''rB4ALDBMU%2BvnrUuOBQkE4NDycqCgQADs%3D''),tex<br> tarea);textarea.parentNode.insertBefore(document.createElement(''b<br> r''),textarea);}下载http://www.firefox.net.cn/dig/download/zoomtexta<br> rea.user.jszoomtextarea.user.js参考资料http://www.xulplanet.com/refer<br> ences/objref/Event.htmlEvent?文档参见http://www.ttlsa.com/docs/grease<br> monkey/操作特定?HTML?元素的所有实例http://www.ttlsa.com/docs/greasemonkey/获取<br> 元素样式http://www.ttlsa.com/docs/greasemonkey/设置元素样式http://www.ttlsa<br> .com/docs/greasemonkey/在元素前插入内容http://www.ttlsa.com/docs/greasemo<br> nkey/在没有服务器的情况下添加图片5.8.?案例：Access Bar在固定状态栏中显示键盘快捷键Access Bar 可以显<br> 示出页面中已定义的快捷键。快捷键是由网页作者定义的，用来增强页面易用性的键盘快捷方式，让您可以通过键盘快速跳转到特定的链接或表单。<br> (http://diveintoaccessibility.org/day_15_defining_keyboard_shortc<br> uts.html了解快捷键。)Firefox 支持使用快捷键，但是它不会显示页面中已定义的快捷键。由此，Access Bar 诞生<br> 了。例?5.8.??http://www.firefox.net.cn/dig/download/accessbar.user.j<br> saccessbar.user.js// ==UserScript==// @name Access Bar//<br> @namespace http://diveintogreasemonkey.org/download/// @desc<br> ription show accesskeys defined on page// @include // ==<br> /UserScript==function addGlobalStyle(css) {var head, style;head =<br> document.getElementsByTagName(''head'')[0];if (!head) { return; }s<br> tyle = document.createElement(''style'');style.type = ''text/css'';st<br> yle.innerHTML = css;head.appendChild(style);}var akeys, descripti<br> ons, a, desc, label, div;akeys = document.evaluate("//[@accesske<br> y]",document,null,XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,null);<br> if (!akeys.snapshotLength) { return; }descriptions = new Array();<br> desc = '''';for (var i = 0; i < akeys.snapshotLength; i++) {a = ake<br> ys.snapshotItem(i);desctext = '''';if (a.nodeName == ''INPUT'') {labe<br> l = document.evaluate("//label[@for=''" + a.name + "'']",document,n<br> ull,XPathResult.FIRST_ORDERED_NODE_TYPE,null).singleNodeValue;if <br> (label) {desctext = label.title;if (!desctext) { desctext = label<br> .textContent; }}}if (!desctext) { desctext = a.textContent; }if (<br> !desctext) { desctext = a.title; }if (!desctext) { desctext = a.n<br> ame; }if (!desctext) { desctext = a.id; }if (!desctext) { desctex<br> t = a.href; }if (!desctext) { desctext = a.value; }desc = ''<stron<br> g>['' +a.getAttribute(''accesskey'').toUpperCase() + '']</strong> '';i<br> f (a.href) {desc += ''<a href="'' + a.href + ''">'' + desctext + ''</a<br> >'';} else {desc += desctext;}descriptions.push(desc);}description<br> s.sort();div = document.createElement(''div'');div.id = ''accessbar-<br> div-0'';desc = ''<div><ul><li class="first">'' + descriptions[0] + ''<br> </li>'';for (var i = 1; i < descriptions.length; i++) {desc = desc<br> + ''<li>'' + descriptions[i] + ''</li>'';}desc = desc + ''</ul></div><br> '';div.innerHTML = desc;document.body.style.paddingBottom = "4em";<br> window.addEventListener("load",function() {document.body.appendCh<br> ild(div);},true);addGlobalStyle(''#accessbar-div-0 {''+'' position:<br> fixed;'' +'' left: 0;'' +'' right: 0;'' +'' bottom: 0;'' +'' top: au<br> to;'' +'' border-top: 1px solid silver;'' +'' background: black;'' +<br> '' color: white;'' +'' margin: 1em 0 0 0;'' +'' padding: 5px 0 0.4e<br> m 0;'' +'' width: 100%;'' +'' font-family: Verdana, sans-serif;'' +''<br> font-size: small;'' +'' line-height: 160%;'' +''}'' +''#accessbar-di<br> v-0 a,'' +''#accessbar-div-0 li,'' +''#accessbar-div-0 span,'' +''#acce<br> ssbar-div-0 strong {'' +'' background-color: transparent;'' +'' col<br> or: white;'' +''}'' +''#accessbar-div-0 div {'' +'' margin: 0 1em 0 1e<br> m;'' +''}'' +''#accessbar-div-0 div ul {'' +'' margin-left: 0;'' +'' ma<br> rgin-bottom: 5px;'' +'' padding-left: 0;'' +'' display: inline;'' +''<br> }'' +''#accessbar-div-0 div ul li {'' +'' margin-left: 0;'' +'' paddi<br> ng: 3px 15px;'' +'' border-left: 1px solid silver;'' +'' list-style<br> : none;'' +'' display: inline;'' +''}'' +''#accessbar-div-0 div ul li.<br> first {'' +'' border-left: none;'' +'' padding-left: 0;'' +''}'');这段代码<br> 分为六个步骤：定义一个辅助函数，addGlobalStyle获取包含有?accesskey?熟悉的页面元素遍历这些元属，然后为每个<br> 元素决定最恰当的文本描述为已启用?accesskey?的元素，构建一个有序的链接列表。把这个有序列表加到页面中，使用标准的?ul?<br> 和?li?元素样式化此列表，让它看起来像一个固定在视图底部的伪状态栏首先，我需要一个辅助函数?addGlobalStyle，注入我<br> 自己的 CSS 样式(在第六步中会用到)。关于此模式的更多信息，请阅读http://www.ttlsa.com/docs/grea<br> semonkey/添加 CSS 样式。function addGlobalStyle(css) {var head, style;<br> head = document.getElementsByTagName(''head'')[0];if (!head) { retu<br> rn; }style = document.createElement(''style'');style.type = ''text/c<br> ss'';style.innerHTML = css;head.appendChild(style);}第二步，找出页面中有?acc<br> esskey?属性的全部元素。在 Firefox 的 XPath 支持下很容易办到。注释：如果 XPath 查询返回空集，我可以保<br> 证，那是因为这里没有什么需要显示的。此模式的更多信息，请阅读http://www.ttlsa.com/docs/greasemon<br> key/操作所有有特定属性的元素。var akeys, descriptions, a, i, desc, label, div;<br> akeys = document.evaluate("//[@accesskey]",document,null,XPathRe<br> sult.UNORDERED_NODE_SNAPSHOT_TYPE,null);if (!akeys.snapshotLength<br> ) { return; }第三步，构造每个启用?accesskey?元素的适当描述的清单列表，这是脚本中最复杂的一段。问题是?ac<br> cesskey?属性可以出现在许多不同的?HTML?元素中。表单中的?input?元素可以定义?accesskey。input?元<br> 素可有或可无相关联的?label，它包含与?input?域有关联的文字标签。如果有，label?可能包含?title?属性，提供关<br> 于?input?域的更多详细信息。或者?label?属性只包含文本。或者?input?元素可能没有关联的标签，这中情况下，我最好使<br> 用?input?元素的?value?属性。另一方面，label?自己也可以定义?accesskey，代替标签描述的?input?元<br> 素。再者，我会查找?label?元素的?title?属性作为描述，如果?title?不存在，就退而使用标签的文本。链接同样可以定义<br> ?accesskey?属性。如果有，选择链接的文本是理所当然的。但是如果链接不包含文本(例如，它只包含一张图片)，那么下个地方就是<br> 找链接的?title?属性。如果链接既没有文本，又没有?title，我就退而使用链接的?name?属性，要是还是不成，就用链接的?<br> id?属性。Ain''t heuristics a bitch? 这是完整的算法。记着，akeys?是一个?XPathResult?<br> 对象，所以我要调用?akeys.snapshotItem(i)?来得到每个结果。descriptions = new Array(<br> );desc = '''';for (var i = 0; i < akeys.snapshotLength; i++) {a = a<br> keys.snapshotItem(i);desctext = '''';if (a.nodeName == ''INPUT'') {la<br> bel = document.evaluate("//label[@for=''" + a.name + "'']",document<br> ,null,XPathResult.FIRST_ORDERED_NODE_TYPE,null).singleNodeValue;i<br> f (label) {desctext = label.title;if (!desctext) { desctext = lab<br> el.textContent; }}}if (!desctext) { desctext = a.textContent; }if<br> (!desctext) { desctext = a.title; }if (!desctext) { desctext = a<br> .name; }if (!desctext) { desctext = a.id; }if (!desctext) { desct<br> ext = a.href; }if (!desctext) { desctext = a.value; }desc = ''<str<br> ong>['' +a.getAttribute(''accesskey'').toUpperCase() + '']</strong> ''<br> ;if (a.href) {desc += ''<a href="'' + a.href + ''">'' + desctext + ''<<br> /a>'';} else {desc += desctext;}descriptions.push(desc);}第四步比较简单，因<br> 为 Javascript 数组有个?sort?方法，可以给数组在原地排序。descriptions.sort();第五步创建了?H<br> TML?代码，用来渲染启用?accesskey?的元素列表。我创建一个外包装?<div>，为字符串形式的快捷键列表构造?HTML，<br> 设置外包装?<div>?的?innerHTML?属性，最后把它加到页面的末尾。因为当用户脚本执行时，对页面的复杂改动应该在页面加载<br> 完成以后，所以我使用?window.addEventListener?加入?onload?事件，来向页面中加入?<div>。有关?<br> innerHTML?的用法，请阅读http://www.ttlsa.com/docs/greasemonkey/快速插入复杂的?H<br> TML， 有关?window.addEventListener?的用法，请阅读http://www.ttlsa.com/docs/<br> greasemonkey/处理已渲染的页面。div = document.createElement(''div'');div.id <br> = ''accessbar-div-0'';desc = ''<div><ul><li class="first">'' + descri<br> ptions[0] + ''</li>'';for (var i = 1; i < descriptions.length; i++)<br> {desc = desc + ''<li>'' + descriptions[i] + ''</li>'';}desc = desc +<br> ''</ul></div>'';div.innerHTML = desc;document.body.style.paddingBo<br> ttom = "4em";window.addEventListener("load",function() {document.<br> body.appendChild(div);},true);最后，第六步，为了使插入的?HTML?看起来更协调，我在页面中加入了自<br> 己的 CSS 声明。(很明显，它将作为固定的黑色工具栏出现在页面的底部。滚动页面的时候，它仍然在那个位置，这是因为 Firefox<br> 支持?position:fixed显示类型。)更多的信息，请阅读http://www.ttlsa.com/docs/grease<br> monkey/添加 CSS 样式。addGlobalStyle(''#accessbar-div-0 {''+'' position:<br> fixed;'' +'' left: 0;'' +'' right: 0;'' +'' bottom: 0;'' +'' top: au<br> to;'' +'' border-top: 1px solid silver;'' +'' background: black;'' +<br> '' color: white;'' +'' margin: 1em 0 0 0;'' +'' padding: 5px 0 0.4e<br> m 0;'' +'' width: 100%;'' +'' font-family: Verdana, sans-serif;'' +''<br> font-size: small;'' +'' line-height: 160%;'' +''}'' +''#accessbar-di<br> v-0 a,'' +''#accessbar-div-0 li,'' +''#accessbar-div-0 span,'' +''#acce<br> ssbar-div-0 strong {'' +'' background-color: transparent;'' +'' col<br> or: white;'' +''}'' +''#accessbar-div-0 div {'' +'' margin: 0 1em 0 1e<br> m;'' +''}'' +''#accessbar-div-0 div ul {'' +'' margin-left: 0;'' +'' ma<br> rgin-bottom: 5px;'' +'' padding-left: 0;'' +'' display: inline;'' +''<br> }'' +''#accessbar-div-0 div ul li {'' +'' margin-left: 0;'' +'' paddi<br> ng: 3px 15px;'' +'' border-left: 1px solid silver;'' +'' list-style<br> : none;'' +'' display: inline;'' +''}'' +''#accessbar-div-0 div ul li.<br> first {'' +'' border-left: none;'' +'' padding-left: 0;'' +''}'');下载ht<br> tp://www.firefox.net.cn/dig/download/accessbar.user.jsaccessbar.u<br> ser.js参见http://www.ttlsa.com/docs/greasemonkey/添加 CSS 样式http://ww<br> w.ttlsa.com/docs/greasemonkey/操作所有有特定属性的元素http://www.ttlsa.com/do<br> cs/greasemonkey/快速插入复杂的?HTMLhttp://www.ttlsa.com/docs/greasemonke<br> y/处理已渲染的页面第?6?章?高级话题6.1.?存取持久数据Greasemonkey 定义了两个函数，GM_setValue?和<br> ?GM_getValue，用户脚本就可以存取“私有”数据，并且只有这个用户脚本才能访问。(其他脚本无法访问这些数据，并不仅仅是用户<br> 脚本。)可以使用这两个函数存储脚本专有的配置，维护在页面之间持续的缓存，或者记持续的活动日志。http://www.ttlsa.c<br> om/docs/greasemonkey/GM_setValue?保存的和?GM_getValue?读取的数据与浏览器 cooki<br> es 很相似，但也有重要的区别。两者都存放在本地电脑中，但是 cookies 是域名专用的而且只能被创建它们的域名访问，Greas<br> emonkey 配置值是脚本专用的而且只能被创建这些参数的脚本访问(与执行用户脚本的?URL?也无关)。而且与 cookies 不<br> 同的是，配置值绝不会发送到远程服务器上去。GM_setValue?保存脚本专用配置值，GM_getValue?读取它。functi<br> on GM_setValue(key, value);function GM_getValue(key, defaultValue<br> );key?参数是没有固定格式(no fixed format)的字符串。value?可以是字符串，布尔值或者整数。GM_getV<br> alue?的?defaultValue?参数是可选的；如果设置了此参数，当查询的?key?指定的值不存在时返回此默认参数。如果不设<br> 置?defaultValue，当查询的?key指定的值不存在时，GM_getValue?会返回?undefined。这2个函数由 <br> Greasemonkey 0.3 引入。您应该http://www.ttlsa.com/docs/greasemonkey/测试它<br> 们是否存在，否则完全降低(degrade gracefully)。参考资料http://dunck.us/code/greasem<br> onkey/mypipstag.user.jsMyPIPsTag?首次运行时提示您输入用户名。http://kailasa.net<br> /prakash/greasemonkey/post-interceptor.user.jsPOST Interceptor?添加<br> 菜单项(使用?http://www.ttlsa.com/docs/greasemonkey/GM_registerMenuComm<br> and?)来切换脚本是否生效。http://blog.monstuff.com/archives/http:/mit00.0275<br> 3.com/paper/greasemonkey/images/MSDNLanguageFilter.user.jsMSDN?La<br> nguage Filter?插入设置选项到页面中。参见http://www.ttlsa.com/docs/greasemonkey<br> /GM_getValuehttp://www.ttlsa.com/docs/greasemonkey/GM_setValue6.2<br> .?在菜单栏上添加菜单项Greasemonkey 定义了一个函数，GM_registerMenuCommand，让用户脚本可添加菜<br> 单项到 Firefox 菜单栏上。当用户脚本激活时，注册的菜单项会出现在User Script?Commands?子菜单中。fun<br> ction GM_registerMenuCommand(menuText, callbackFunction);menuText<br> ?参数是一个字符串，新增的菜单项的名称。callbackFunction?参数是函数对象。选中此菜单项，callbackFunct<br> ion?函数就会被调用。这个函数由 Greasemonkey 0.2.6 引入。您应该http://www.ttlsa.com/d<br> ocs/greasemonkey/测试它是否存在，否则完全降低(degrade gracefully)。参考资料http://ka<br> ilasa.net/prakash/greasemonkey/post-interceptor.user.jsPOST Inter<br> ceptor?新增了菜单项来切换脚本是否有效。参见http://www.ttlsa.com/docs/greasemonkey/G<br> M_registerMenuCommand6.3.?整合其他网站的数据Greasemonkey 定义了一个函数，GM_xmlhtt<br> pRequest，允许用户脚本使用从任意?URL?GET?(获取)数据，或者?POST?(发送)数据到任意?URL。更多细节和示例<br> ，请阅读http://www.ttlsa.com/docs/greasemonkey/GM_xmlhttpRequest。这个函数<br> 是在 Greasemonkey 0.2.6 中引入的。您应该http://www.ttlsa.com/docs/greasemon<br> key/测试它是否存在，否则完全降低(degrade gracefully)。参考资料http://weblog.infoworl<br> d.com/udell/gems/LibraryLookup.user.jsLibraryLookup?整合?http://www<br> .amazon.com/Amazon.com?和您的本地图书馆。http://ponderer.org/download/anno<br> tate_google.user.jsAnnotate Google?整合?http://www.google.com/Googl<br> e?和?http://del.icio.us/del.icio.us。http://persistent.info/greasem<br> onkey/bloglines.user.jsBloglines Tweaks?在?http://www.bloglines.co<br> m/Bloglines?的文章汇总上添加了一个?Expand?按钮，可以获取并显示全部文章。http://lachnlone.no<br> -ip.info/greasemonkey/flick_batch.user.jsFlick Batch Enhancer?使用?<br> GM_xmlhttpRequest，利用 Flickr 自己的?REST?API，在?http://www.flickr.com/<br> Flickr?上新增功能。http://www.cs.toronto.edu/~james/greasemonkey/hide-g<br> oogle-redirects.user.jsHide Google Redirects?改编?http://www.google<br> .com/searchhistory/Google 个人搜索历史，使用普通的?<a href="...">?链接，但是仍然可以跟踪<br> 点击。在适当的跟踪?URL?上调用?GM_xmlhttpRequest。6.4.?把您的用户脚本编译为扩展想让您的用户脚本“长出”<br> Greasemonkey 的架构吗？您的用户脚本需要访问 Javascript 特许函数，本地文件，或者只有全资格的扩展才具有的<br> 其它 Firefox 特性？可以把您的用户脚本转换为全资格的?XPI，仅仅点几下就行了。感谢 Adrian Holovaty 惊人<br> 的?http://www.letitblog.com/greasemonkey-compiler/Greasemonkey 编译器<br> ！过程?6.1.?把 Butler 编译成浏览器扩展访问?http://diveintomark.org/projects/but<br> ler/butler.user.jsButler 用户脚本源代码。在菜单中，选择编辑 (E)?→?全选 (A)?(Ctrl-A)复<br> 制用户脚本源代码到剪贴板。访问http://www.letitblog.com/greasemonkey-compiler/Gre<br> asemonkey 编译器。转到 “Javascript” field. 在菜单中，选择编辑 (E)?→?粘贴 (P)?(Ctrl<br> -V)粘贴 Butler 用户脚本源代码。在 “Creator(作者)” 栏中，填入?Mark Pilgrim。在 “Versio<br> n(版本)” 栏中，填入 Butler 用户脚本的当前版本(0.3截至发稿时， 否则请检查脚本的http://www.ttlsa.<br> com/docs/greasemonkey/元数据段找到确切的版本)。打开一个新窗口或者标签，访问?http://extensio<br> ns.roachfiend.com/cgi-bin/guid.plGUID Generator(GUID 产生器)?，产生一个随机<br> 的 GUID。把这个 GUID 复制到剪贴板，包含花括号。切换回 “Greasemonkey 编译器” 页面。在 “GUID” 栏<br> 中，粘贴刚才从 GUID 产生器上获得的 GUID。在 “Homepage(主页)” 栏中，填入http://diveintoma<br> rk.org/projects/butler/。点击?Create the Firefox extension(创建 Firefo<br> x 扩展)。Firefox 会弹出一个对话框：“打开 butler.xpi”。选择保存到磁盘，并且选择下载目录好啦！您先在有 Bu<br> tler 的浏览器扩展了。在安装 Butler 扩展前，应该先http://www.ttlsa.com/docs/greasemo<br> nkey/禁用 Butler 用户脚本然后?http://www.google.com/Google?一下禁用是否生效。然后安装 <br> Butler 扩展，选择文件 (F)?→?打开... (O)然后选中用 Greasemonkey 编辑器创建的?butler.xp<br> i?文件。务必在安装完成后重新启动浏览器。.xpi?文件其实就是有确定的目录结构的 ZIP 压缩包。可以用任一 ZIP 程序(例如<br> Windows 下用?http://www.7-zip.org/7-zip?或者在 Mac OS X 下用?http://www<br> .stuffit.com/Stuffit Expander)解压缩文档，然后看下浏览器扩展是由哪些文件组成。butler.xpi|<br> +-- install.rdf|+-- chrome/|+-- butler/|+-- content/|+-- browser.<br> xul|+-- contents.rdf|+-- javascript.js这里有四个有关的文件。两个 RDF 文件是大多数 Fi<br> refox 的样板文件。其他两个包含有实现代码。install.rdf与扩展自身有关的元数据，包括名称、版本、描述和兼容的 Fir<br> efox 版本。browser.xul引导代码。检查对比当前的?URL?与脚本的?@include?和?@exclude?参数，然<br> 后注入执行脚本。contents.rdf额外的元数据，Firefox 样板文件。javascript.js原用户脚本的源代码。基本<br> 上，Greasemonkey 编译器创建了真正的 Greasemonkey 缩减版，没有用户脚本，在适当的?URL?上自动加载一个<br> 用户脚本。但是如果有所有的源文件，您可以自己创建自定义对话框、修改配置面板，或者注册User Script?Commands以外的<br> 菜单项……发狂了！参考资料http://ted.mielczarek.org/code/mozilla/extensiondev/<br> 扩展开发者的扩展，调试和测试 Firefox 扩展的无价之宝。Greasemonkey API 参考名称GM_log — 记录日志<br> 到错误控制台大纲function?GM_log?(?message?,?level?);描述GM_log?在错误控制台中输入信息。<br> 主要用于调试。level 是可选的，默认值是0。其有效的值有：0 - 信息、1 - 警告、2 - 错误。历史GM_log?由 Gr<br> easemonkey 0.3 引入。参见http://www.ttlsa.com/docs/greasemonkey/用?GM_l<br> og?记日志http://www.ttlsa.com/docs/greasemonkey/用错误控制台追踪错误名称GM_getVa<br> lue — 读取脚本专用的配置值大纲returntype?GM_getValue?(?key?,??defaultValue?);<br> 描述GM_getValue?返回一条脚本专用的配置值。返回值可以是字符串，布尔值或者整数。key?参数是没有固定格式(no fix<br> ed format)的字符串。defaultValue?参数是可选的；如果设置了此参数，当查询的?key?指定的值不存在时返回此默<br> 认参数。如果不设置?defaultValue，当查询的?key指定的值不存在时返回?undefined。Greasemonkey <br> 的配置值与浏览器 cookies 很相似，但也有重要的区别。两者都存放在本地电脑中，但是 cookies 是域名专用的而且只能被创<br> 建它们的域名访问，Greasemonkey 配置值是脚本专用的而且只能被创建这些参数的脚本访问(与执行用户脚本的地址也无关)。而且<br> 与 cookies 不同的是，配置值绝不会发送到远程服务器上去。http://www.ttlsa.com/docs/greasem<br> onkey/访问?about:config，然后再过滤器中填?greasemonkey.scriptvals?，就可以查看已存储的<br> 配置值。历史GM_getValue?由 Greasemonkey 0.3 引入。参见http://www.ttlsa.com/do<br> cs/greasemonkey/GM_setValue名称GM_setValue — 设置脚本专用的配置值大纲function?G<br> M_setValue?(?key?,?value?);描述GM_setValue?用来存储脚本专用的配置值。key?参数是无固定格<br> 式的字符串。value?参数可以是字符串，布尔值或者整数。这两个参数都是必需的。Greasemonkey 的配置值与浏览器 coo<br> kies 很相似，但也有重要的区别。两者都存放在本地电脑中，但是 cookies 是域名专用的而且只能被创建它们的域名访问，Gre<br> asemonkey 配置值是脚本专用的而且只能被创建这些参数的脚本访问(与执行用户脚本的地址也无关)。而且与 cookies 不同<br> 的是，配置值绝不会发送到远程服务器上去。历史GM_getValue?由 Greasemonkey 0.3 引入。参见http://<br> www.ttlsa.com/docs/greasemonkey/GM_getValue名称GM_registerMenuComma<br> nd — 在?用户脚本命令 (C)?子菜单中添加菜单项大纲function?GM_registerMenuCommand?(?co<br> mmandName?,??commandFunc?,??accelKey?,??accelModifiers?,??accessK<br> ey?);描述GM_registerMenuCommand?在?工具 (T)?→?Greasemonkey?→?用户脚本命令 （C<br> )?子菜单中添加菜单项。commandName?参数是一个字符串，新增的菜单项的名称。commandFunc?参数是函数对象。选中<br> 此菜单项，commandFunc?函数就会被调用。accelKey?单字符(例如：''g'')或者键盘码，用来触发命令。accelKe<br> y?字符串，列出了必须与?accelKey?同时按下的修饰键。如果多于一个功能键，用空格分开。例如，''shift'' 或者 ''ctr<br> l alt''。可用的功能键有：shift, alt, meta, control 和 accel。accessKey?单字符(例如<br> ：''g'')当菜单打开时用来跳转到命令。它最好是?commandName?中的一个字母。function?callbackFunct<br> ion?(?e?);参数?e?是菜单选择事件。我不知道这有什么用。历史GM_registerMenuCommand?由 Greas<br> emonkey 0.2.6 引入。名称GM_xmlhttpRequest — 进行任意的?HTTP?请求大纲GM_xmlhttpR<br> equest?(?details?);描述GM_xmlhttpRequest?建立任意的?HTTP?请求。?详细?参数是一个有七个<br> 域的对象。method字符串，请求使用的方法?HTTP。必需。?通常使用?GET，但也可使任一个?HTTP?动词，包含?POST,<br> ?PUT?和?DELETE。url字符串，请求使用的?URL。必需。headers这个请求包含的?HTTP?头的关联数组。可选，默<br> 认为空字符串。例如：headers: {''User-Agent'': ''Mozilla/4.0 (compatible) Greas<br> emonkey'',''Accept'': ''application/atom+xml,application/xml,text/xml<br> ''}data字符串，HTTP?请求的主体。可选，默认是空字符串。如果您在模拟提交表单(method?==?''POST'')，在?he<br> aders?域中必需有?Content-type，值为?''application/x-www-form-urlencoded''，而<br> 且在?data?域包含有?URL?编码后的表单数据。onload函数对象，请求成功完成调用的回调函数。onerror函数对象，执行<br> 请求发生错误时调用的回调函数。onreadystatechange函数对象，请求进行时反复调用的回调函数。onload?回调onl<br> oad?的回调函数，有一个变量，responseDetails。function?onloadCallback?(?respons<br> eDetails?);responseDetails?是有五个域的对象。status整数，HTTP?应答的状态代码。200?意为请<br> 求正常完成。statusText字符串，HTTP?状态文字。状态文字是依赖于服务器的。responseHeaders字符串，应答包<br> 含的?HTTP?头部。responseText字符串，应答的主体。readyState未使用onerror?回调onerror?的<br> 回调函数，有一个参数，responseDetails。function?onerrorCallback?(?responseDet<br> ails?);responseDetails?是有五个域的对象。status整数，HTTP?的错误代码。404?意为页面无法找到。<br> statusText字符串，HTTP?状态文字。状态文字是依赖于服务器的。responseHeaders字符串，应答包含的?HTT<br> P?头部。responseText字符串，应答的主体。HTTP?错误页面的主体是依赖于服务器的。readyState未使用onre<br> adystatechange?回调onreadystatechange?的回调函数，当请求正在进行时反复调用。有一个参数，resp<br> onseDetails。function?onreadystatechangeCallback?(?responseDetails<br> ?);responseDetails?是有五个域的对象。responseDetails.readyState?指示了请求当前所在的<br> 阶段。status整数，应答的?HTTP?状态代码。当?responseDetails.readyState?<?4时，这个值是0<br> 。statusText字符串，HTTP?状态文字。当?responseDetails.readyState?<?4时，这个值是空字<br> 符串。responseHeaders字符串，应答包含的?HTTP?头。当?responseDetails.readyState?<<br> ?4时，这个值是空字符串。responseText字符串， 应答的主体。当?responseDetails.readyState?<br> <?4时，这个值是空字符串。readyState整数，the stage of the?HTTP?request。1正在载入。请求<br> 已准备好。2已加载。请求准备发送到服务器，但是还什么都没发。3交互状态。请求已经发送，并且客户端等待服务器完成发送数据。4完成。请<br> 求已完成，并且其他域中的所有应答数据已可用。例子下面的代码从http://greaseblog.blogspot.com/http<br> ://greaseblog.blogspot.com/获取 Atom feed，然后用警告窗口显示结果。GM_xmlhttpReq<br> uest({method: ''GET'',url: ''http://greaseblog.blogspot.com/atom.xml<br> '',headers: {''User-agent'': ''Mozilla/4.0 (compatible) Greasemonkey''<br> ,''Accept'': ''application/atom+xml,application/xml,text/xml'',},onlo<br> ad: function(responseDetails) {alert(''Request for Atom feed retur<br> ned '' + responseDetails.status +'' '' + responseDetails.statusText <br> + ''\n\n'' +''Feed data:\n'' + responseDetails.responseText);}});Bugs<br> onreadystatechange?回调函数当?readyState?<?4时，工作不正常。注释与　XMLHttpRequest<br> ?对象不同，GM_xmlhttpRequest?并不限制与当前域名；它能够从任何?URL?GET?或者?POST?数据。历史GM_<br> xmlhttpRequest?由 Greasemonkey 0.2.6 引入。参考资料http://www.xulplanet.c<br> om/references/objref/XMLHttpRequest.htmlXMLHttpRequest?在 Mozilla <br> 中的支持http://msdn.microsoft.com/library/default.asp?url=/library/en<br> -us/xmlsdk/html/xmobjpmexmlhttprequest.aspXMLHttpRequest?在 Intern<br> et Explorer 中的支持http://developer.apple.com/internet/webcontent/xm<br> lhttpreq.htmlXMLHttpRequest?在 Safari 中的支持http://www.w3.org/Protoc<br> ols/rfc2616/rfc2616-sec10.htmlHTTP?状态代码http://www.w3.org/Protocol<br> s/rfc2616/rfc2616.htmlRFC 2616名称GM_openInTab — 在新标签中打开指定的?URL大纲fu<br> nction?GM_openInTab?(?url?);描述GM_openInTab?在新标签中打开指定的?URL。历史GM_op<br> enInTab?由 Greasemonkey 0.5 beta 引入。名称GM_addStyle — 给页面添加?CSS?样式大纲<br> function?GM_addStyle?(?css?);描述GM_addStyle?给页面添加样式。创建一个新的?<style><br> ?元素，在其中加入给定的?CSS，然后插入到?<head>?中。历史GM_addStyle?由 Greasemonkey 0.6 <br> 引入。参见http://www.ttlsa.com/docs/greasemonkey/添加 CSS 样式“参考资料”链接清单ht<br> tp://www.ttlsa.com/docs/greasemonkey/当您在本书中看到“参考资料”链接列表时，您可以点“参考资<br> 料”的标题就可以跳转到这个所有参考资料链接清单。http://dunck.us/collab/GreaseMonkeyUserSc<br> riptsGreasemonkey 脚本库有上百个 Greasemonkey 脚本。http://www.ttlsa.com/do<br> cs/greasemonkey/1.3.?安装用户脚本http://taguri.org/tag:?URIshttp://www.<br> ttlsa.com/docs/greasemonkey/2.2.?用元数据描述您的用户脚本http://novemberborn.<br> net/sifr/explained/terminologyJavascript 中的匿名函数http://www.ttlsa.c<br> om/docs/greasemonkey/2.3.?编写用户脚本代码http://youngpup.net/2004/jsbloc<br> kscopeBlock Scope in Javascript?和?http://youngpup.net/2004/jsbloc<br> kscope/commentsassociated discussion threadhttp://www.ttlsa.com/d<br> ocs/greasemonkey/2.3.?编写用户脚本代码http://www.brownhen.com/DI.htmlDOM <br> 查看器介绍http://www.ttlsa.com/docs/greasemonkey/3.3.?用 DOM 查看器查看元素htt<br> ps://addons.update.mozilla.org/extensions/moreinfo.php?id=434Insp<br> ect Element 扩展http://www.ttlsa.com/docs/greasemonkey/3.3.?用 DOM 查<br> 看器查看元素http://www.projectit.com/freestuff.htmlInspector Widget 扩展具<br> 有 Inspect Element 相同功能的扩展，它增加了一个工具条，而不是一个菜单项。http://www.ttlsa.com<br> /docs/greasemonkey/3.3.?用 DOM 查看器查看元素http://chrispederick.com/wor<br> k/firefox/webdeveloper/Web Developer 扩展?有很多分析页面的函数。http://www.ttl<br> sa.com/docs/greasemonkey/3.5.?其他调试工具http://www.karmatics.com/aard<br> vark/Aardvark?互动的显示标签名称、id?和?class?的属性。http://www.ttlsa.com/docs/<br> greasemonkey/3.5.?其他调试工具http://www.hacksrus.com/~ginda/venkman/Ve<br> nkman Javascript Debugger?完整的 Javascript 运行时调试器。http://www.ttlsa.<br> com/docs/greasemonkey/3.5.?其他调试工具http://www.squarefree.com/bookma<br> rklets/webdevel.htmlWeb Development Bookmarklets?有一些有用的函数，可以把它们拖放<br> 到工具栏中。http://www.ttlsa.com/docs/greasemonkey/3.5.?其他调试工具http://ww<br> w.edwardh.com/jsunit/JSUnit?是 Javascript 单元测试框架。http://www.ttlsa.<br> com/docs/greasemonkey/3.5.?其他调试工具http://www.crockford.com/javascr<br> ipt/lint.htmljs-lint?可检查出 Javascript 代码的常见错误。http://www.ttlsa.com<br> /docs/greasemonkey/3.5.?其他调试工具http://www-jcsu.jesus.cam.ac.uk/~jg<br> 307/mozilla/xpath-tutorial.htmlMozilla XPath 文档http://www.ttlsa.c<br> om/docs/greasemonkey/4.6.?操作所有有特定属性的元素http://www.zvon.org/xxl/XPa<br> thTutorial/General/examples.htmlXPath 实例教程http://www.ttlsa.com/do<br> cs/greasemonkey/4.6.?操作所有有特定属性的元素http://www.xulplanet.com/referen<br> ces/objref/XPathResult.htmlXPathResult 参考手册http://www.ttlsa.com/d<br> ocs/greasemonkey/4.6.?操作所有有特定属性的元素http://www.westciv.com/style_ma<br> ster/academy/css_tutorial/properties/CSS 属性http://www.ttlsa.com/d<br> ocs/greasemonkey/4.15.?设置元素样式http://www.quirksmode.org/js/events_<br> compinfo.htmlJavascript 事件兼容性表http://www.ttlsa.com/docs/greasemon<br> key/4.22.?覆盖内建的 Javascript 方法http://www.mozilla.org/docs/dom/mozi<br> lla/protodoc.htmlMozilla 中的 Javascript-DOM 原型http://www.ttlsa.com<br> /docs/greasemonkey/4.22.?覆盖内建的 Javascript 方法http://www.mozilla.or<br> g/docs/dom/domref/examples.html显示事件对象常量http://www.ttlsa.com/docs/<br> greasemonkey/4.22.?覆盖内建的 Javascript 方法http://www.xulplanet.com/re<br> ferences/objref/Event.htmlEvent?文档http://www.ttlsa.com/docs/greas<br> emonkey/5.7.?案例：Zoom Textareahttp://dunck.us/code/greasemonkey/my<br> pipstag.user.jsMyPIPsTag?首次运行时提示您输入用户名。http://www.ttlsa.com/docs/<br> greasemonkey/6.1.?存取持久数据http://kailasa.net/prakash/greasemonkey/p<br> ost-interceptor.user.jsPOST Interceptor?添加菜单项(使用?http://www.ttlsa<br> .com/docs/greasemonkey/GM_registerMenuCommand?)来切换脚本是否生效。http://w<br> ww.ttlsa.com/docs/greasemonkey/6.1.?存取持久数据http://blog.monstuff.co<br> m/archives/http:/mit00.02753.com/paper/greasemonkey/images/MSDNLa<br> nguageFilter.user.jsMSDN?Language Filter?插入设置选项到页面中。http://www.tt<br> lsa.com/docs/greasemonkey/6.1.?存取持久数据http://kailasa.net/prakash/g<br> reasemonkey/post-interceptor.user.jsPOST Interceptor?新增了菜单项来切换脚本是<br> 否有效。http://www.ttlsa.com/docs/greasemonkey/6.2.?在菜单栏上添加菜单项http://<br> weblog.infoworld.com/udell/gems/LibraryLookup.user.jsLibraryLooku<br> p?整合?http://www.amazon.com/Amazon.com?和您的本地图书馆。http://www.ttlsa.c<br> om/docs/greasemonkey/6.3.?整合其他网站的数据http://ponderer.org/download/a<br> nnotate_google.user.jsAnnotate Google?整合?http://www.google.com/Go<br> ogle?和?http://del.icio.us/del.icio.us。http://www.ttlsa.com/docs/g<br> reasemonkey/6.3.?整合其他网站的数据http://persistent.info/greasemonkey/blo<br> glines.user.jsBloglines Tweaks?在?http://www.bloglines.com/Bloglin<br> es?的文章汇总上添加了一个?Expand?按钮，可以获取并显示全部文章。http://www.ttlsa.com/docs/gr<br> easemonkey/6.3.?整合其他网站的数据http://lachnlone.no-ip.info/greasemonkey<br> /flick_batch.user.jsFlick Batch Enhancer?使用?GM_xmlhttpRequest，利用 <br> Flickr 自己的?REST?API，在?http://www.flickr.com/Flickr?上新增功能。http://w<br> ww.ttlsa.com/docs/greasemonkey/6.3.?整合其他网站的数据http://www.cs.toront<br> o.edu/~james/greasemonkey/hide-google-redirects.user.jsHide Googl<br> e Redirects?改编?http://www.google.com/searchhistory/Google 个人搜索历史，<br> 使用普通的?<a href="...">?链接，但是仍然可以跟踪点击。在适当的跟踪?URL?上调用?GM_xmlhttpReque<br> st。http://www.ttlsa.com/docs/greasemonkey/6.3.?整合其他网站的数据http://te<br> d.mielczarek.org/code/mozilla/extensiondev/扩展开发者的扩展，调试和测试 Firefox<br> 扩展的无价之宝。http://www.ttlsa.com/docs/greasemonkey/6.4.?把您的用户脚本编译为扩展<br> http://www.xulplanet.com/references/objref/XMLHttpRequest.htmlXML<br> HttpRequest?在 Mozilla 中的支持http://www.ttlsa.com/docs/greasemonkey/<br> GM_xmlhttpRequesthttp://msdn.microsoft.com/library/default.asp?ur<br> l=/library/en-us/xmlsdk/html/xmobjpmexmlhttprequest.aspXMLHttpReq<br> uest?在 Internet Explorer 中的支持http://www.ttlsa.com/docs/greasemonk<br> ey/GM_xmlhttpRequesthttp://developer.apple.com/internet/webcontent/xmlhttpreq.htmlXMLHttpRequest?在 Safari 中的支持http://www.ttlsa.com/docs/greasemonkey/GM_xmlhttpRequesthttp://www.w3.org/Protocols/rfc2616/rfc2616-sec10.htmlHTTP?状态代码http://www.ttlsa.com/docs/greasemonkey/GM_xmlhttpRequesthttp://www.w3.org/Protocols/rfc2616/rfc2616.htmlRFC 2616http://www.ttlsa.com/docs/greasemonkey/GM_xmlhttpRequest技巧清单http://www.ttlsa.com/docs/greasemonkey/当您在本书中看到技巧或者警告时，您可以点击前面的提示小图标，然后跳转到此页。您可以在http://dunck.us/collab/GreaseMonkeyUserScriptsGreasemonkey脚本库，找到许多用户脚本。尽管没人要求您必须把脚本放到那儿去，但是实际上，您可以把您的脚本共享到任何地方，这样别人就可以安装它了。甚至您根本不需要一台网络服务器，因为你可以从本地文件中安装用户脚本。http://www.ttlsa.com/docs/greasemonkey/1.3.?安装用户脚本元数据可以以任意次序排列。笔者推荐使用@name，@namespace，@description，@include，最后是@exclude，但是其它的顺序也没关系。http://www.ttlsa.com/docs/greasemonkey/2.2.?用元数据描述您的用户脚本在“管理用户脚本”对话框中，点击编辑，您正在“动态”修改脚本的副本，它在 Firefox 的个人配置文件夹中。我形成了一个习惯，每“动态”修改完毕，又回到编辑器，选择文件(F)?→?另存为(a)...，把用户脚本保存到另一个文件夹中。尽管这不是必须的(Greasemonkey 只会用您配置文件夹中的那个脚本)，但是我喜欢在完成全部修改后把脚本在其它文件夹里保存一个“原本”。http://www.ttlsa.com/docs/greasemonkey/2.4.?修改用户脚本在错误控制台中可以用右键(Mac用户用 control-click)点击任意行选中，然后选择复制(C)，将信息复制到剪贴板。http://www.ttlsa.com/docs/greasemonkey/3.2.?用?GM_log?记日志如果已有一个元素的引用(例如?thisElement)，可以用?thisElement.nodeName?来判断它的?HTML?标签。如果页面被当作?text/html?类型，标签名称就总是大写，不论它在原始页面是如何定义的。如果页面被当作?application/xhtml+xml类型，那么标签名称就总是小写的。我总是用?thisElement.nodeName.toUpperCase()?这样我就可以不用管这些了。http://www.ttlsa.com/docs/greasemonkey/4.6.?操作所有有特定属性的元素即使?someExistingElement?是它的父元素的最后一个孩子(在它之后没有下一个元素)，仍然可以在?someExistingElement.nextSibling?之前插入新内容。在这种情况下，someExistingElement.nextSibling?将返回一个空值，insertBefore?函数将把新内容追加到最后。(以许这对你来说没有太大意义，但我想让您知道的是，尽管这种方法似乎是不太对，但它却总是有效的。)http://www.ttlsa.com/docs/greasemonkey/4.8.?在元素后插入内容如果要移除广告，比起写用户脚本来，更容易的办法是安装?http://adblock.mozdev.org/AdBlock?然后导入?http://www.geocities.com/pierceive/adblock/最新的过滤列表。http://www.ttlsa.com/docs/greasemonkey/4.9.?删除元素使用?http://software.hixie.ch/utilities/cgi/data/datadata:?URI?kitchen?来建立您自己的?data:?URLs。http://www.ttlsa.com/docs/greasemonkey/4.12.?在没有服务器的情况下添加图片可以使用?addGlobalStyle?函数样式化插入到页面中的元素或者部分原页面中已有的元素。然而，如果要样式化已有的元素，应该在您定义的每条规则上使用?! important?关键字，保证您的样式覆盖原页面中已定义的规则。http://www.ttlsa.com/docs/greasemonkey/4.13.?添加 CSS 样式删除和替换?document.body.innerHTML?并不会更改页面。原页面在?<head>?中定义的所有内容仍然是有效的，包括页面的标题，CSS 样式，以及脚本。可以分开修改或者移除。http://www.ttlsa.com/docs/greasemonkey/4.16.?处理已渲染的页面正常情况下，当用户提交一个表单时，例如，点击表单中的?提交?按钮或者按?回车键），都会触发?submit?事件。但是，当脚本调用?aForm.submit()?提交表单时，却不会触发?submit?事件。因此，您必须做两件事来捕获表单的提交事件：给?submit?事件增加事件监听，并且修改?HTMLFormElement?类的原型来重定向?submit()?方法到您的自定义函数上。http://www.ttlsa.com/docs/greasemonkey/4.22.?覆盖内建的 Javascript 方法访问?about:config，然后再过滤器中填?greasemonkey.scriptvals?，就可以查看已存储的配置值。http://www.ttlsa.com/docs/greasemonkey/GM_getValue当您在本书中看到“参考资料”链接列表时，您可以点“参考资料”的标题就可以跳转到这个所有参考资料链接清单。http://www.ttlsa.com/docs/greasemonkey/“参考资料”链接清单当您在本书中看到技巧或者警告时，您可以点击前面的提示小图标，然后跳转到此页。http://www.ttlsa.com/docs/greasemonkey/技巧清单当您在本书中看到视频的链接时，点击提示??小图标，可以跳转到全部视频清单。http://www.ttlsa.com/docs/greasemonkey/步骤清单实例清单http://www.ttlsa.com/docs/greasemonkey/例?2.1.?helloworld.user.jshttp://www.ttlsa.com/docs/greasemonkey/例?2.2.?Hello World 元数据http://www.ttlsa.com/docs/greasemonkey/例?2.3.?显示“Hello world!”提示信息http://www.ttlsa.com/docs/greasemonkey/例?2.4.?延迟调用函数的错误方法http://www.ttlsa.com/docs/greasemonkey/例?2.5.?延迟调用函数的更好方法http://www.ttlsa.com/docs/greasemonkey/例?2.6.?延迟调用函数的最好方法http://www.ttlsa.com/docs/greasemonkey/例?3.1.?记录到错误控制台然后继续(?gmlog.user.js?)http://www.ttlsa.com/docs/greasemonkey/例?3.2.?Javascript Shell 介绍http://www.ttlsa.com/docs/greasemonkey/例?3.3.?获取元素属性http://www.ttlsa.com/docs/greasemonkey/例?4.1.?匹配域名和它所有子域名的元数据标签http://www.ttlsa.com/docs/greasemonkey/例?4.2.?GM_xmlhttpRequest?函数无效时警告用户http://www.ttlsa.com/docs/greasemonkey/例?4.3.?检查页面中是否有?<textarea>?元属http://www.ttlsa.com/docs/greasemonkey/例?4.4.?遍历所有元素http://www.ttlsa.com/docs/greasemonkey/例?4.5.?获取页面上所有的 textareahttp://www.ttlsa.com/docs/greasemonkey/例?4.6.?获取页面中的所有链接http://www.ttlsa.com/docs/greasemonkey/例?4.7.?获取所有具有?title?属性的元素http://www.ttlsa.com/docs/greasemonkey/例?4.8.?获取所有?class?为?sponsoredlink?的?<div>http://www.ttlsa.com/docs/greasemonkey/例?4.9.?xpath?函数http://www.ttlsa.com/docs/greasemonkey/例?4.10.?在主内容前插入?<hr>http://www.ttlsa.com/docs/greasemonkey/例?4.11.?在导航条后面插入?<hr>http://www.ttlsa.com/docs/greasemonkey/例?4.12.?删除广告侧边栏http://www.ttlsa.com/docs/greasemonkey/例?4.13.?替换图片为替代(alt)文本http://www.ttlsa.com/docs/greasemonkey/例?4.14.?在页面顶部加上标语http://www.ttlsa.com/docs/greasemonkey/例?4.15.?在页面顶部添加图形 logohttp://www.ttlsa.com/docs/greasemonkey/例?4.16.?放大段落文字http://www.ttlsa.com/docs/greasemonkey/例?4.17.?获取由元素的?style?属性定义的样式http://www.ttlsa.com/docs/greasemonkey/例?4.18.?获取元素的真实样式http://www.ttlsa.com/docs/greasemonkey/例?4.19.?设置单个元素的样式http://www.ttlsa.com/docs/greasemonkey/例?4.20.?替换全部页面为自定义的内容http://www.ttlsa.com/docs/greasemonkey/例?4.21.?获取 method 为 "POST" 或 "post" 的表单(form)http://www.ttlsa.com/docs/greasemonkey/例?4.22.?获取当前域名http://www.ttlsa.com/docs/greasemonkey/例?4.23.?在链接末尾添加查询参数http://www.ttlsa.com/docs/greasemonkey/例?4.24.?重定向一个站点到它的安全站点http://www.ttlsa.com/docs/greasemonkey/例?4.25.?当用户点击页面上任意地方时做点事http://www.ttlsa.com/docs/greasemonkey/例?4.26.?当表单提交时做点事http://www.ttlsa.com/docs/greasemonkey/例?4.27.?将任意字符串解析为?XMLhttp://www.ttlsa.com/docs/greasemonkey/例?4.28.?解析远程源的?XMLhttp://www.ttlsa.com/docs/greasemonkey/例?5.1.?重定向 GMail 到等同的?https://?地址http://www.ttlsa.com/docs/greasemonkey/例?5.2.?让 Bloglines 自动显示所有未读条目http://www.ttlsa.com/docs/greasemonkey/例?5.3.??aintitreadable.user.jshttp://www.ttlsa.com/docs/greasemonkey/例?5.4.??offsiteblank.user.jshttp://www.ttlsa.com/docs/greasemonkey/例?5.5.??dumbquotes.user.jshttp://www.ttlsa.com/docs/greasemonkey/例?5.6.??frownies.user.jshttp://www.ttlsa.com/docs/greasemonkey/例?5.7.??zoomtextarea.user.jshttp://www.ttlsa.com/docs/greasemonkey/例?5.8.??accessbar.user.js步骤清单http://www.ttlsa.com/docs/greasemonkey/当您在本书中看到视频的链接时，点击提示??小图标，可以跳转到全部视频清单。http://www.ttlsa.com/docs/greasemonkey/过程?1.1.?安装 Greasemonkey 扩展http://www.ttlsa.com/docs/greasemonkey/过程?1.2.?安装 Butler 用户脚本http://www.ttlsa.com/docs/greasemonkey/过程?1.3.?暂时禁用 Butlerhttp://www.ttlsa.com/docs/greasemonkey/过程?1.4.?卸载 Butlerhttp://www.ttlsa.com/docs/greasemonkey/过程?1.5.?重新配置 Butler 排除 Frooglehttp://www.ttlsa.com/docs/greasemonkey/过程?2.1.?编辑 Hello World 的源代码然后观察运行结果http://www.ttlsa.com/docs/greasemonkey/过程?3.1.?打开错误控制台http://www.ttlsa.com/docs/greasemonkey/过程?3.2.?安装 DOM 查看器http://www.ttlsa.com/docs/greasemonkey/过程?3.3.?查看和编辑深入浅出 Greasemonkey的主页http://www.ttlsa.com/docs/greasemonkey/过程?3.4.?用 Inspect Element 直接查看元素http://www.ttlsa.com/docs/greasemonkey/过程?3.5.?安装 Javascript Shellhttp://www.ttlsa.com/docs/greasemonkey/过程?6.1.?把 Butler 编译成浏览器扩展</td> </tr> </tbody> </table> <div id="viewerPlaceHolder" style="width: 717px; height: 700px; display: none;"> </div> </span> <table> <tbody> <tr> <td></td> </tr> </tbody> </table> </td> </tr> <tr> <td> <div class="left list" style="text-align: left; font-size: 14px;"> <div id='lastart'></div> <div id='nextart'></div> </div> </td> </tr> <tr> <td style="height: 29px;"> <div style="padding-top: 20px;"> <table style="width: 100%;" cellpadding="0" cellspacing="0"> <tbody> <tr> <td width="31%"></td> <td> <table cellpadding="0" cellspacing="0" style="margin: 0px auto;"> <tbody> <tr> <td><div class=" left" style='cursor: pointer'> <a href="javascript:void(0);" onclick="wzhit(22);SaveArt();"> <img src="http://pubimage.360doc.com/wz/tb11.gif" /></a> </div> <div class=" left xianhua" id="sendFlowerToUser" style='cursor: pointer' onclick='Showflowerlayer("sendedLayer1");'> 献花(<span id="articleflowernum">0</span>)<div id='flowernumadd' class="addtionone">+1</div> </div> </td> </tr> </tbody> </table> </td> <td width="31%" style="vertical-align: bottom; font-size: 12px;"> <div class="right" id="sharediv2"> </div> </td> </tr> </tbody> </table> </div> </td> </tr> <tr> <td> <div class="xiantao" style="padding-top: 5px;"> </div> </td> </tr> <tr> <td class="xgiambox" style="vertical-align: top; height: 30px; padding-top: 10px;"> <div class="right">(本文系<span class="name"><a target="_blank" href="http://www.360doc.com/userhome/19906446">zip11</a></span>首藏<span id="docsource"></span>)</div> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <div class="lswzbox"> <div> <table cellpadding="0" cellspacing="0"> <tbody> <tr> <td> <div class="bottom_article f_left"> <div class="str_border"> <strong>类似文章</strong> <a href='http://www.360doc.com/relevant/1054128487_more.shtml' target='_blank' class='a_more f_right' onclick='artStatistics("20-9-8");'>更多</a> </div> <ul class="barticle_list"> <li><span><a href=http://www.360doc.com/content/06/1118/00/2311_263838.shtml target=_blank onclick='artStatistics("20-9-7");'>浏览器的GreaseMonkey和Trixie插件</a></span></li> <li><span><a href=http://www.360doc.com/content/12/1211/12/7667282_253382772.shtml target=_blank onclick='artStatistics("20-9-7");'>转帖火狐使用</a></span></li> <li><span><a href=http://www.360doc.com/content/11/0501/09/1162553_113494940.shtml target=_blank onclick='artStatistics("20-9-7");'>八大Firefox油猴脚本，让Google搜索爽到死</a></span></li> <li><span><a href=http://www.360doc.com/content/10/0829/09/396937_49579073.shtml target=_blank onclick='artStatistics("20-9-7");'>推荐一些我所使用的Greasemonkey油猴脚本 - 谭霁丷的日志 - 网易博客</a></span></li> <li><span><a href=http://www.360doc.com/content/12/0824/08/21412_232026519.shtml target=_blank onclick='artStatistics("20-9-7");'>！！！UserScript（用户脚本）在Firefox、Google Chrome、Opera、IE6</a></span></li> <li><span><a href=http://www.360doc.com/content/19/0606/18/13044332_840833082.shtml target=_blank onclick='artStatistics("20-9-7");'>Greasemonkey / Tampermonkey 油猴脚本浏览器增强插件</a></span></li> <li><span><a href=http://www.360doc.com/content/08/0326/13/9936_1145131.shtml target=_blank onclick='artStatistics("20-9-7");'>Google Docs更新：工具栏再变、菜单改革</a></span></li> <li><span><a href=http://www.360doc.com/content/12/0605/00/10132207_216055293.shtml target=_blank onclick='artStatistics("20-9-7");'>油猴子</a></span></li> <li><span><a href=http://www.360doc.com/content/09/0830/19/259135_5409615.shtml target=_blank onclick='artStatistics("20-9-7");'>让IE浏览器支持GreaseMonkey,解除YOBO的禁止下载mp3 - 代码乱了(靳如...</a></span></li> </ul> </div> </td> </tr> </tbody> </table> <div id="Reflction"> <div id="360docRefTN"> </div> <div id="360docRefCT"> </div> <div id="360docRefPB" align="center"> </div> </div> <a name="sf"></a> <div id="ReflectionPart"> <div class="mainbottom"> <div class=" left"> <img src="http://pubimage.360doc.com/wz/tb22.gif" /> </div> <div class="plbox left"> <div class="plmain"> <div class="titwx">发表评论：</div> <div> <textarea name="SendRefTB" class="pltxt" id="SendRefTB" onfocus="testContent(1);" onblur="testContent(2)">