深入浅出Greasemonkey

2015/10/7深入浅出Greasemonkeyhttp://old.sebug.net/paper/books/greasemonkey/1/92深入浅出GREASEMONKEY版权©2005MarkPilgrimisebugpaper这本书、及其样例代码和视频文件都是自由软件。在“GNU通用公共许可证(自由软件基金会)(版本2以及更新版本)”许可下，您可以随意的再分发和/或修改它们。我们发行这本书、及其样例代码和视频文件，希望它能对您有所帮助。但是我们并没有提供任何担保！请查阅GNU通用公共许可证获取更多细节。目录1.开始1.1.Greasemonkey是什么？1.2.安装Greasemonkey1.3.安装用户脚本1.4.管理用户脚本2.您的第一个用户脚本2.1.HelloWorld2.2.用元数据描述您的用户脚本2.3.编写用户脚本代码2.4.修改用户脚本3.调试用户脚本3.1.用错误控制台追踪错误3.2.用GM_log记日志3.3.用DOM查看器查看元素3.4.用JavascriptShell计算表达式3.5.其他调试工具4.公共模式4.1.在域名以及它所有子域名上执行用户脚本4.2.测试Greasemonkey函数是否有效4.3.测试页面中是否有HTML元素4.4.操作所有HTML元素4.5.操作特定HTML元素的所有实例4.6.操作所有有特定属性的元素4.7.在元素前插入内容4.8.在元素后插入内容4.9.删除元素4.10.替换元素为新内容4.11.快速插入复杂的HTML2015/10/7深入浅出Greasemonkeyhttp://old.sebug.net/paper/books/greasemonkey/2/924.12.在没有服务器的情况下添加图片4.13.添加CSS样式4.14.获取元素样式4.15.设置元素样式4.16.处理已渲染的页面4.17.匹配大小写无关的属性值4.18.获取当前域名4.19.改写链接4.20.重定向页面4.21.俘获用户点击4.22.覆盖内建的Javascript方法4.23.解析XML5.实例教学5.1. 案例 全员育人导师制案例信息技术应用案例心得信息技术教学案例综合实践活动案例我余额宝案例 ：GMailSecure5.2.案例：BloglinesAutoload5.3.案例：Ain'tItReadable5.4.案例：OffsiteBlank5.5.案例：DumbQuotes5.6.案例：Frownies5.7.案例：ZoomTextarea5.8.案例：AccessBar6.高级话题6.1.存取持久数据6.2.在菜单栏上添加菜单项6.3.整合其他网站的数据6.4.把您的用户脚本编译为扩展GreasemonkeyAPI参考GM_log- 记录 混凝土 养护记录下载土方回填监理旁站记录免费下载集备记录下载集备记录下载集备记录下载 日志到错误控制台GM_getValue-读取脚本专用的配置值GM_setValue-设置脚本专用的配置值GM_registerMenuCommand-在用户脚本命令(C)子菜单中添加菜单项GM_xmlhttpRequest-进行任意的HTTP请求GM_openInTab-在新标签中打开指定的URLGM_addStyle-给页面添加CSS样式“参考资料”链接清单技巧清单实例清单步骤清单修订历史2015/10/7深入浅出Greasemonkeyhttp://old.sebug.net/paper/books/greasemonkey/3/92关于本书GNU通用公共许可证1.序言2.有关复制，发布和修改的条款和条件3.如何将这些条款用到你的新程序第1章开始1.1.Greasemonkey是什么？Greasemonkey是一个Firefox扩展，它具有通过编写脚本来改变被访问网页的功能。使用它，能使您访问的网站更便于阅读或者更便于使用。使用它，您能修复网页渲染的缺陷，而无须烦扰网站管理员。使用它，您能让网页更好地使用残疾人援助技术，清楚响亮地说出网页内容，或者将网页内容变为盲文。使用它，您能自动地获得其它网站的数据，从而使两个网站更好地相互链接起来。然而Greasemonkey本身并没有作这些事。实际上，在您安装它之后，您注意到根本没有任何变动...直到您开始安装一种叫做“用户脚本”的东西。用户脚本(userscript)就是一大块Javascript代码，还有些附加信息，用来告诉Greasemonkey脚本应该在何时何地运行。每个用户脚本能够针对具体页面，具体网站，或者一批网站。用户脚本能做到您在Javascript中可做到的任何事情。实际上，它能做得更多，因为Greasemonkey提供了专供用户脚本使用的函数。这里是Greasemonkey脚本库含了上百个用户脚本，这些都是用户为了满足自己的需要而写的。一旦您写了自己的用户脚本，只要您认为别人也许发现它有用，您可以把它添加到脚本库中。您也可以自己使用，因为从编写过程中获得知识，获得满足感，才是更重要的。这是Greasemonkey的邮件列表，您可以在那里提问，发表用户脚本，和讨论新特性的想法。Greasemonkey开发人员常去这个邮件列表;他们也许会回答您的问题!为什么写这本书？深入浅出Greasemonkey是从Greasemonkey邮件列表中的用户讨论和作者本人编写用户脚本的经验中发展而来。仅仅一个星期，作者就发现，新用户经常会提出重复的问题，而这些问题是被回答过的。此外，在写了几个用户脚本以后，作者发现，一些常用的模式，以及可以解决某一类问题的成块的可重用代码会反复出现。因此，作者开始整理这些有用的模式，解释编程思路，同时作者也从中写作中得到不少锻炼。如果没有Greasemonkey的开发者AaronBoodman和JeremyDunck的大力帮助，没有那些对我的初稿提出宝贵的反馈建议的用户，就不会有现在的这本书。谢谢大家。1.2.安装Greasemonkey2015/10/7深入浅出Greasemonkeyhttp://old.sebug.net/paper/books/greasemonkey/4/921.2.安装Greasemonkey要写用户脚本，您首先要安装Greasemonkey扩展，0.3或以上版本。过程1.1.安装Greasemonkey扩展1.访问Greasemonkey的主页。2.点击名为“InstallGreasemonkey”的链接。3.Firefox会显示(可能在浏览器窗口的上方)阻止网站安装软件的信息。点击编辑选项...打开“允许的站点”对话框，点击允许，将Greasemonkey的网站添加到允许安装软件的网站列表中。点击确定，关闭“允许的站点”对话框。4.再次点击名为“InstallGreasemonkey”的链接。5.将弹出安装对话框，确定您要安装。几秒钟后，安装按钮变亮，点击安装。6.重新启动Firefox。当您重新启动了Firefox后，选择工具(T)单。您应该看到四个菜单项：启用(E)、管理用户脚本(U)...、新建用户脚本(N)...和用户脚本命令(C)。只要管理用户脚本(U)...可以使用，那么就装好了。其他的两个要在特殊情况下才能使用。一般来说，安装好Greasemonkey，(除了四个菜单项外)并不会给浏览器添加任何功能。但是它能让您添加别的东西，名叫“用户脚本”，用户脚本可以用来定制指定的网页。1.3.安装用户脚本2015/10/7深入浅出Greasemonkeyhttp://old.sebug.net/paper/books/greasemonkey/5/921.3.安装用户脚本Greasemonkey“用户脚本”是用Javascript编写的独立文件，用来定制一个或多个网页。您可以在Greasemonkey脚本库，找到许多用户脚本。尽管没人要求您必须把脚本放到那儿去，但是实际上，您可以把您的脚本共享到任何地方，这样别人就可以安装它了。甚至您根本不需要一台网络服务器，因为你可以从本地文件中安装用户脚本。用户脚本的文件名必须以.user.js结尾。我写的第一个用户脚本叫做“Butler”。它增强了Google的搜索结果的功能。过程1.2.安装Butler用户脚本1.访问Butler的主页，可看到有关Butler的功能简述。(并不是所有的用户脚本都有主页，Greasemonkey只要有用户脚本就够了。)2.点击“Downloadversion...”链接(0.3截至发稿时)。3.弹出一个标题为“Greasemonkey安装过程”的对话框，其中显示了将要安装的用户脚本名称，简介以及作用与排除的页面列表。所有这些信息都包含在脚本之中；以后您会在用元数据描述您的用户脚本学到定义的方法。4.点击确定安装用户脚本。没有意外的话，Greasemonkey会在状态栏滑出一个提示，“'Butler'安装成功”。现在，可以在Google中任意搜索一些东西。在搜索结果页面的顶部会有一行文字：“Tryyoursearchon:Yahoo,AskJeeves,AlltheWeb,...”。在其下面会有一个标签：“EnhancedbyButler”。这些都是由Butler用户脚本加进去的。参考资料Greasemonkey脚本库有上百个Greasemonkey脚本。1.4.管理用户脚本如果愿意可以安装很多个Greasemonkey脚本。Greasemonkey带有配置对话框来管理用户脚本：暂时禁用，改变配置或卸载脚本。过程1.3.暂时禁用Butler2015/10/7深入浅出Greasemonkeyhttp://old.sebug.net/paper/books/greasemonkey/6/921.在菜单中，选择工具(T)→Greasemonkey→管理用户脚本(U)...，Greasemonkey会弹出一个对话框：“管理用户脚本”。2.在对话框左方一栏中列出了已安装的所有用户脚本(如果您从本文开始一步步来的话，这里只有一个脚本：Butler。)3.选中列表中的Butler，然后取消启用复选框。左方列表中的“Butler”就会由黑色转为灰色。(当它还是选中状态的时候，看起来比较费劲，但是当安装了很多脚本的时候，这个特性就非常有用了。)4.点击确定，退出“管理用户脚本”对话框。现在Butler已经安装，但是未被启用。您在Google上随便搜索下就会发现确实如此。在页面顶端的“EnhancedbyButler”应该没有了。您可以在“管理用户脚本”对话框中重复刚才的步骤，重新选中Butler，重新启用启用复选框。虽然我用“暂时”来形容禁用用户脚本，但是如果您不重新启用它，它就始终会被禁用。之所以是暂时，只因为您可以方便的启用它，而不需要再到我的网站上来找原始脚本，而且还要重新安装。也可以用“管理用户脚本”对话框来彻底得卸载脚本。过程1.4.卸载Butler1.在菜单中，选择工具(T)→Greasemonkey→管理用户脚本(U)...。Greasemonkey会弹出“管理用户脚本”对话框。2.在左方列表栏中，选中Butler再点击卸载。不需要确认；用户脚本马上就被卸载掉了。3.第三步...没有第三步！(感谢JeffGoldblum。)先等一下，还没完呢！您也可以修改您之前安装过的用户脚本的配置。记得第一次安装Butler时看到的对话框吗，上面有两个列表：包含和排除的网站？嗯，您可以在“管理用户脚本”对话框中编辑这两个列表，不管是第一次安装时或者其它什么时候。好！继续。假如您觉得Butler不错，但是它在Froogle上毫无用处。Google的商品对比网站。那么可以编辑用户脚本的配置来排除这个网站，而让它在别的Google网站上仍然生效。过程1.5.重新配置Butler排除Froogle2015/10/7深入浅出Greasemonkeyhttp://old.sebug.net/paper/books/greasemonkey/7/921.在菜单中，选择工具(T)→Greasemonkey→管理用户脚本(U)....Greasemonkey会弹出“管理用户脚本”对话框。2.在左方面板中，选择“Butler”。接着在右方面板中就会显示两个列表，一个是执行的页面(“http://*.google.*/*”)，另一个是豁免的页面(空白)。3.接下来在“不包含下列网页”的列表中，点击添加...。4.Greasemonkey会弹出另一个对话框：“添加网页地址”，并提示您输入新的URL。在其中输入http://froogle.google.com/*然后点击确定。5.回到“管理用户脚本”对话框中，豁免页面列表中现在就有了您新添的URL和通配符，http://froogle.google.com/*，表示Butler不会在froogle.google.com站点的任何页面上执行。星号被当做通配符使用，可以在URL:域名，路径或者任意URLschema(http://)中使用。6.点击确定，退出“管理用户脚本”对话框。在Froogle中搜索一下，验证下Butler会不会执行。但是它仍然会在普通搜索、图片搜索以及Google站点的其他页面中执行。第2章您的第一个用户脚本2.1.HelloWorld我们步入Greasemonkey美妙世界的万里长征将从第一步开始，所有读过技术手册的读者都会很熟悉这一步：让您的电脑打出“Helloworld”。例2.1.helloworld.user.js//HelloWorld!exampleuserscript//version0.1BETA!//2005-04-22//Copyright(c)2005,MarkPilgrim//ReleasedundertheGPLlicense//http://www.gnu.org/copyleft/gpl.html////--------------------------------------------------------------------////ThisisaGreasemonkeyuserscript.////Toinstall,youneedGreasemonkey:http://greasemonkey.mozdev.org/2015/10/7深入浅出Greasemonkeyhttp://old.sebug.net/paper/books/greasemonkey/8/92//ThenrestartFirefoxandrevisitthisscript.//UnderTools,therewillbeanewmenuitemto"InstallUserScript".//Acceptthedefaultconfigurationandinstall.////Touninstall,gotoTools/ManageUserScripts,//select"HelloWorld",andclickUninstall.////--------------------------------------------------------------------////==UserScript==//@nameHelloWorld//@namespacehttp://diveintogreasemonkey.org/download///@descriptionexamplescripttoalert"Helloworld!"oneverypage//@include*//@excludehttp://diveintogreasemonkey.org/*//@excludehttp://www.diveintogreasemonkey.org/*//==/UserScript==alert('Helloworld!');正如您所见到的，这个HelloWorld脚本的大部分都是注释。有些注释，比如如何安装，没什么特殊含义；那只是对初学者的一些指导。但是，有一节注释确实有特殊含义，下一节会有详细的解释。要看到脚本的效果，您首先要安装，然后访问一个不在diveintogreasemonkey.org域名下的网站(例如，Google)。这个页面将会像平时一样显示出来，还会弹出一个对话框：“Helloworld!”下载helloworld.user.js2.2.用元数据描述您的用户脚本每个用户脚本都含有一段元数据，用来向Greasemonkey描述这个脚本自身的信息：发行者，执行 规则 编码规则下载淘宝规则下载天猫规则下载麻将竞赛规则pdf麻将竞赛规则pdf 等等。例2.2.HelloWorld元数据//==UserScript==//@nameHelloWorld//@namespacehttp://diveintogreasemonkey.org/download/2015/10/7深入浅出Greasemonkeyhttp://old.sebug.net/paper/books/greasemonkey/9/92//@descriptionexamplescripttoalert"Helloworld!"oneverypage//@include*//@excludehttp://diveintogreasemonkey.org/*//@excludehttp://www.diveintogreasemonkey.org/*//==/UserScript==这里有六条独立的元数据信息，作为一个整体包含在注释中。现在让我们按顺序逐条解释。首先讲最外面的这层包装。//==UserScript==////==/UserScript==上述标记很重要，必须完全吻合。Greasemonkey用它们来标记用户脚本的元数据段。这段注释可以放在用户脚本的任何部位，但经常会放在靠近顶部的地方。在元数据段内，第一项是名字。//@nameHelloWorld这是您的用户脚本的名字。它将会在您第一次安装脚本时在安装对话框（installdialog）中显示出来。之后会显示在“管理用户脚本”对话框中。这个名字应该言简意赅。@name可选的。如果存在，它只能被定义一次。如果不存在，将会默认显示用户脚本的去掉扩展名.user.js的文件名。下一个是命名空间(namespace)。//@namespacehttp://diveintogreasemonkey.org/download/这是一个URL，Greasemonkey用它来区分名称相同但是作者不同的用户脚本。如果您有一个域名，您可以使用它作命名空间。另外您也可以用tag:URI。@namespace是可选的。如果存在，它只能被定义一次。如果不存在，将会默认使用下载用户脚本的网站域名。元数据可以以任意次序排列。笔者推荐使用@name，@namespace，@description，@include，最后是@exclude，但是其它的顺序也没关系。2015/10/7深入浅出Greasemonkeyhttp://old.sebug.net/paper/books/greasemonkey/10/92下一项是描述。//@descriptionexamplescripttoalert"Helloworld!"oneverypage这是关于用户脚本功能的描述。在您第一次安装脚本时，它将会在安装对话框中显示，之后会在“管理用户脚本”对话框中显示。描述不应多于两句。@description是可选的。如果使用它，那么它只能被定义一次。如果不使用，默认会显示为空白。不要忘记写@description。即使您所写的用户脚本是给自己用的。你最后很可能会拥有很多脚本，如果没有描述的话，在“管理用户脚本”对话框中管理脚本将会成为一件令人头疼的事。下面三行是最重要的(从Greasemonkey的角度来看)：@include和@excludeURL。//@include*//@excludehttp://diveintogreasemonkey.org/*//@excludehttp://www.diveintogreasemonkey.org/*这几行让Greasemonkey知道在那些网站上执行您的用户脚本。您可以明确的指定一个URL，或者用通配符*来代替域名或路径中的部分字符。在这个例子中，我们告诉Greasemonkey在除了http://diveintogreasemonkey.org/和http://www.diveintogreasemonkey.org/的所有网站上执行。排除(Excludes)优先于包含(includes)，所以即使http://diveintogreasemonkey.org/download/匹配*(所有网站)，它还是会被排除掉，因为它还匹配http://diveintogreasemonkey.org/*。@include和@exclude是可选的，可以自定义执行和豁免的URL，但必须每条规则各占一行。如果您没有任何定义，Greasemonkey将会对所有的网站执行您的用户脚本。(等同于@include*)。您需要定义非常精确的@include和@exclude元数据。Greasemonkey不会对域名作任何的假设，如果一个网站符合http://example.com/和http://www.example.com/，您需要把这两个网址都标示出来。参考资料2015/10/7深入浅出Greasemonkeyhttp://old.sebug.net/paper/books/greasemonkey/11/92tag:URIs2.3.编写用户脚本代码我们的第一个用户脚本是在执行时简单地显示一条提示信息：“Helloworld!”。例2.3.显示“Helloworld!”提示信息alert('Helloworld!');尽管这段代码仿佛够用了，而且也达到了目的。Greasemonkey实际上在幕后做了很多的事情来确保用户脚本不会与页面所包含的原有脚本发生严重的冲突。特别是它会自动的把您的用户脚本封装在一个匿名的函数包里。一般情况下，您可以忽视，但是终究有一天会让您遇到麻烦。所以最好现在就了解一下。最经常遇到的麻烦之一是在用户脚本里定义的变量和函数不能被别的脚本访问。事实上，只要用户脚本运行完了，所有的变量和函数就都不能使用了。如果您期望使用window.setTimeout函数，或者在链接挂上字符串式的onclick属性然后期望Javascript稍后调用您的函数，那么您会遇到问题。例如，下面这个用户脚本中定义了一个函数helloworld，然后尝试设置一个计数器来在一秒后调用这个函数。例2.4.延迟调用函数的错误方法functionhelloworld(){alert('Helloworld!');}window.setTimeout("helloworld()",60);这段代码没有起任何作用；不会弹出提示窗口。如果您打开错误控制台，会看到一个异常：Error:helloworldisnotdefined.这是因为当延迟结束，开始调用helloworld()时，helloworld函数已经不存在了。如果您需要引用用户脚本中的变量或者函数，应该显式的把它们定义为window对象的属性，它是始终存在的。例2.5.延迟调用函数的更好方法window.helloworld=function(){alert('Helloworld!');2015/10/7深入浅出Greasemonkeyhttp://old.sebug.net/paper/books/greasemonkey/12/92}window.setTimeout("helloworld()",60);目的达到了！页面完成加载一秒后，一个提示框骄傲的弹了出来，写着：“Helloworld!”然而，在window上设置属性依然不太理想；这有点像用全局变量来做局部变量该做的事。（事实上，就是那么回事，window是全局的，可以被页面中的所有脚本访问。更实际的讲，它可能会与页面自身的脚本，甚至是其它的用户脚本相互干扰。最佳的解决 方案 气瓶 现场处置方案 .pdf气瓶 现场处置方案 .doc见习基地管理方案.doc关于群访事件的化解方案建筑工地扬尘治理专项方案下载 是定义匿名函数，把它作为第一个参数传递给window.setTimeout。例2.6.延迟调用函数的最好方法window.setTimeout(function(){alert('Helloworld!')},60);我在这里所做的是建立一个没有名字的函数（一个“匿名函数”)，然后直接把它传递给window.setTimeout。这样可以完成与上个例子相同的事，而不会留下痕迹。例如不会被其它的脚本检测到。我发现我在写用户脚本时经常使用匿名函数。它们很适合创建“一次性”函数，然后当作参数传递给类似window.setTimeout，document.addEventListener或者赋值给事件句柄像click或submit。参考资料Javascript中的匿名函数BlockScopeinJavascript和associateddiscussionthread2.4.修改用户脚本对于脚本的作者来讲，“管理用户脚本”对话框有个很实用的功能：编辑按钮可以“动态的(live)”修改已安装的脚本。过程2.1.编辑HelloWorld的源代码然后观察运行结果1.在菜单中，选择工具(T)→Greasemonkey→管理用户脚本(U)....Greasemonkey会弹出“管理用户脚本”对话框。2.在左方面板中，选择HelloWorld再点击编辑。HelloWorld的已安装版2015/10/7深入浅出Greasemonkeyhttp://old.sebug.net/paper/books/greasemonkey/13/92本将会在你喜好的文本编辑器中打开。(否则，请检查.js文件是否已经关联到您喜好的文本编辑器上。)3.修改alert语句，替换显示内容为“Liveediting!”。4.在编辑器中保存所做的更改，然后回到浏览器，随意刷新某个页面来测试所做的更改，你将能立刻看到效果。你不需要重新安装或者“刷新”用户脚本，您是在“动态”修改。在“管理用户脚本”对话框中，点击编辑，您正在“动态”修改脚本的副本，它在Firefox的个人配置文件夹中。我形成了一个习惯，每“动态”修改完毕，又回到编辑器，选择文件(F)→另存为(a)...，把用户脚本保存到另一个文件夹中。尽管这不是必须的(Greasemonkey只会用您配置文件夹中的那个脚本)，但是我喜欢在完成全部修改后把脚本在其它文件夹里保存一个“原本”。第3章调试用户脚本3.1.用错误控制台追踪错误如果用户脚本好似没有正常执行，第一个要检查的地方是错误控制台，那里列出了所有与脚本有关的错误，包括用户脚本在内。过程3.1.打开错误控制台1.在Firefox菜单中，选择工具(T)→错误控制台(C)。2.控制台中列出了从打开Firefox以来在所有页面上发生的所有错误，应该会有很多的(您会惊奇地发现，很多大的网站的脚本是那么的糟糕)。在开始调试您的用户脚本前，请点击清空(C)来清空列表。现在刷新页面来测试出现错误的用户脚本。如果它的确出错了，一条异常会显示在错误控制台中。如果您的用户脚本出错了，错误控制台会显示一条异常(exception)和一个行号。由于Greasemonkey将用户脚本插入到页面中，所以行号没有实际的用处，应该忽略这个行号。这并不是您的用户脚本中发生异常的行号。3.2.用GM_log记日志2015/10/7深入浅出Greasemonkeyhttp://old.sebug.net/paper/books/greasemonkey/14/92Greasemonkey提供了一个记录用的函数，GM_log，这个函数可以将消息写入错误控制台。这些消息在发布前应当剔出掉，不过在调试时却非常有用。此外，看调试信息比在调试用的警告窗口中一次次点确定好得多。GM_log有一个参数：日志的字符串。在将信息输出到错误控制台后，用户脚本会一如既往地执行。例3.1.记录到错误控制台然后继续(gmlog.user.js)if(/^http:\/\/diveintogreasemonkey\.org\//.test(window.location.href)){GM_log('runningonDiveIntoGreasemonkeysitew/owwwprefix');}else{GM_log('runningelsewhere');}GM_log('thislineisalwaysprinted');安装这个用户脚本后打开http://diveintogreasemonkey.org/，这两行就会出现在错误控制台中：Greasemonkey:http://diveintomark.org/projects/greasemonkey//TestLog:runningonDiveIntoGreasemonkeysitew/owwwprefixGreasemonkey:http://diveintomark.org/projects/greasemonkey//TestLog:thislineisalwaysprinted如您所见，Greasemonkey从用户脚本元数据段中取得命名空间和脚本名称，再把作为传给GM_log的参数日志消息算进来，做为显示在错误控制台中显示的信息。如果您访问的不是http://diveintogreasemonkey.org/，那么下面这两条信息会显示在错误控制台中。Greasemonkey:http://diveintomark.org/projects/greasemonkey//TestLog:runningelsewhereGreasemonkey:http://diveintomark.org/projects/greasemonkey//TestLog:thislineisalwaysprinted我已经厌倦去挖掘日志信息的最大长度。它超过了255个字符。还有，输出的信息在错误控制台中可以正确断行，可以向下滚动来查看日志消息其余部分。为日志着迷吧！在错误控制台中可以用右键(Mac用户用control-click)点击任意行选中，然后选择复制(C)，将信息复制到剪贴板。2015/10/7深入浅出Greasemonkeyhttp://old.sebug.net/paper/books/greasemonkey/15/92参见GM_log3.3.用DOM查看器查看元素DOM查看器能够查看任何页面的已解析的文档对象模型(DOM)。可以获得每个HTML元素、属性和文本节点的详细信息；也可以看到每个页面样式表中的所有CSS规则；也可以看到每个对象的所有脚本属性。它的功能非常强大。DOM查看器包含在Firefox的安装程序中，但是由您的平台而定，它可能默认没装。如果您在工具(T)菜单中看不到DOM查看器(N)，那么您需要重新安装Firefox。重新安装Firefox不会影响您现有的书签，设置，扩展以及用户脚本。过程3.2.安装DOM查看器1.运行Firefox的安装程序。2.接受用户 协议 离婚协议模板下载合伙人协议 下载渠道分销协议免费下载敬业协议下载授课协议下载 后，选择定制(C)安装。3.选择安装路径后，安装向导会询问安装的组件。选择开发工具。4.安装结束后，运行Firefox。您会看到工具(T)→DOM查看器(N)。下面我们将要访问深入浅出Greasemonkey的主页，让您了解DOM查看器的强大功能。过程3.3.查看和编辑深入浅出Greasemonkey的主页1.访问http://www.firefox.net.cn/dig/。2.在菜单中，选择工具(T)→DOM查看器(N)打开DOM查看器。3.在DOM查看器的左侧视图中，会看到DOM节点的树状图。如果看不到，打开左上角的下拉菜单，选择DOMNodes。4.DOM的树状列表从document节点开始，标记为#document。展开此节点，可以看到HTML节点。5.展开HTML元素后可以看到三个节点：HEAD、#text和BODY。注意BODY的id为diveintogreasemonkey-org。如果没看到，调整一下列宽度。6.展开BODY可以看到五个节点：#text,DIVid="intro",#text,DIVid="main"和#text。2015/10/7深入浅出Greasemonkeyhttp://old.sebug.net/paper/books/greasemonkey/16/927.展开DIVid="intro"可以看到两个节点：#text和DIVclass="sectionInner"。8.展开DIVclass="sectionInner"可以看到两个节点：#text和DIVclass="sectionInner2"。9.展开DIVclass="sectionInner2"可以看到五个节点：#text,DIVclass="s",#text,DIVclass="s"和#text。10.展开第一个DIVclass="s"可以看到五个节点：#text,H1,#text,P和#text。11.选择H1节点。在原始页面上(DOM查看器后面)，H1元素会闪现红色的边框。在右侧面板中可以看到节点的名称(“H1”)、命名空间URI(空白，因为HTML没有命名空间--只有在页面被当作application/xhtml+xml时有效，或者显示一些其他名字空间XML的页面)、节点类型(1代表元素)和节点值(空白，因为标题没有值--标题上的文字有自己的节点)。12.在右侧面板的顶部，有个下拉菜单，在其中可以看到数个选项：DOMNode,BoxModel,XBLBindings,CSSStyleRules,ComputedStyle和JavascriptObject。它们提供了当前选中的节点的不同信息。有些是可以修改的，变更会立即反映到原始页面上。选择JavascriptObject可以看到选中的H1元素的所有可脚本控制的的属性和方法。13.选择CSSStyleRules。右侧面板会分为两部分，顶部的列出了所有可以作用于这个元素的样式(包括浏览器已有的默认样式)，下面的显示了样式所定义的属性。14.在右上方的视图中选中第二条规则，这条样式规则是在http://www.firefox.net.cn/dig/css/dig.css样式表中定义的。15.在右下面板中双击font-variant属性，然后输入新值：normal。在原始页面中(DOM查看器后面)，“深入浅出Greasemonkey”标志文字会立即从small-caps变为正常的大小写字母。16.在右下面板中任意位置点击右键(Mac用户control-click)，然后选择新建属性。会弹出一个对话框：“新样式规则”。输入属性名称：background-color，然后点击确定，接下来属性值：red，然后点击确定应用新属性。新属性会显示在右下面板中，并且原始页面会立即变成红色背景。如果觉得依次展开DOM节点树中每层很不方便，那么我强烈推荐您使用InspectElement扩展，它能迅速找到DOM查看器中的指定元素。2015/10/7深入浅出Greasemonkeyhttp://old.sebug.net/paper/books/greasemonkey/17/92安装InspectElement扩展前，您必须先安装DOM查看器，否则Firefox就不能正常启动。如果已经遇到了这种情况，打开命令行窗口，进入Firefox的安装目录，输入firefox-safe-mode。Firefox会以安全模式启动，不加载任何扩展，然后选择工具(T)→附加软件(A)接着卸载InspectElement。过程3.4.用InspectElement直接查看元素1.访问InspectElement下载页面，然后点击InstallNow。2.重新启动Firefox。3.再访问http://www.firefox.net.cn/dig/。4.右击(Mac用户control-click)标志语：深入浅出Greasemonkey。5.在上下文菜单中，选择Inspectelement。.DOM查看器会打开，并且选中了H1元素，然后您可以马上开始查看和/或编辑它的属性。DOM查看器不会“跟着”您一起浏览网页。如果打开DOM查看器然后在原始窗口中浏览别的网页，DOM查看器会变得非常困惑。好的做法是，去您想去的地方，查看您想查看的页面，在做别的事情前先关闭DOM查看器。参考资料DOM查看器介绍InspectElement扩展InspectorWidget扩展具有InspectElement相同功能的扩展，它增加了一个工具条，而不是一个菜单项。3.4.用JavascriptShell计算表达式JavascriptShell是一个bookmarklet，可以在当前页面的内容中计算任意Javascript表达式。过程3.5.安装JavascriptShell1.访问Jesse'sWebDevelopmentBookmarklets。2.将Shellbookmarklet拖放到您的书签工具栏。3.访问一个网页(例如，深入浅出Greasemonkey主页)，然后点击书签工具2015/10/7深入浅出Greasemonkeyhttp://old.sebug.net/paper/books/greasemonkey/18/92栏上的Shellbookmarklet。JavascriptShell窗口会在后台打开。JavascriptShell提供了与DOM查看器一样强大的功能，但是环境更加宽松。就把它当作DOM的命令行版本吧。游戏开始。例3.2.JavascriptShell介绍document.title深入浅出Greasemonkeydocument.title='HelloWorld'HelloWorldvarparagraphs=document.getElementsByTagName('p')paragraphs[objectHTMLCollection]paragraphs.length5paragraphs[0][objectHTMLParagraphElement]paragraphs[0].innerHTML教老网玩新把戏paragraphs[0].innerHTML='Liveediting,baby!'Liveediting,baby!当输入完上面的内容后，按回车键，变更就会反映到原始网页上。我想提一下JavascriptShell的props函数。例3.3.获取元素属性varlink=document.getElementsByTagName('a')[0]props(link)Methodsofprototype:blur,focusFieldsofprototype:id,title,lang,dir,className,accessKey,charset,coords,href,hreflang,name,rel,rev,shape,tabIndex,target,type,protocol,host,hostname,pathname,search,port,hash,text,offsetTop,offsetLeft,offsetWidth,offsetHeight,offsetParent,innerHTML,scrollTop,scrollLeft,scrollHeight,scrollWidth,clientHeight,clientWidth,styleMethodsofprototypeofprototypeofprototype:insertBefore,replaceChild,removeChild,appendChild,hasChildNodes,cloneNode,normalize,isSupported,hasAttributes,getAttribute,setAttribute,2015/10/7深入浅出Greasemonkeyhttp://old.sebug.net/paper/books/greasemonkey/19/92removeAttribute,getAttributeNode,setAttributeNode,removeAttributeNode,getElementsByTagName,getAttributeNS,setAttributeNS,removeAttributeNS,getAttributeNodeNS,setAttributeNodeNS,getElementsByTagNameNS,hasAttribute,hasAttributeNS,addEventListener,removeEventListener,dispatchEvent,compareDocumentPosition,isSameNode,lookupPrefix,isDefaultNamespace,lookupNamespaceURI,isEqualNode,getFeature,setUserData,getUserDataFieldsofprototypeofprototypeofprototype:tagName,nodeName,nodeValue,nodeType,parentNode,childNodes,firstChild,lastChild,previousSibling,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_FRAGMENT_NODE,NOTATION_NODE,baseURI,textContent,DOCUMENT_POSITION_DISCONNECTED,DOCUMENT_POSITION_PRECEDING,DOCUMENT_POSITION_FOLLOWING,DOCUMENT_POSITION_CONTAINS,DOCUMENT_POSITION_CONTAINED_BY,DOCUMENT_POSITION_IMPLEMENTATION_SPECIFICMethodsofprototypeofprototypeofprototypeofprototypeofprototype:toString“哇哦！”这些是什么？它列出了元素<a>在Javascript中所有有效的属性和方法，并且按照DOM的对象层级分类。先列出的是链接元素的特有方法和属性(比如blur和focus方法，href和hreflang属性)，然后列出了所有节点公有的方法和属性(比如insertBefore)，等等。此外，这和DOM查看器上的内容一样……只不过是多些打字多些试验，少点些鼠标。同DOM查看器一样，JavascriptShell也不会“跟着”您浏览网页。如果打开JavascriptShell然后在原始窗口中浏览别的网页，JavascriptShell会变得非常困惑。好的做法是，去您想去的地方，查看您想查看的页面，在做别的事情前先关闭JavascriptShell。3.5.其他调试工具下面是我觉得有用的其他调试工具，由于时间有限，我没有全部列出。参考资料2015/10/7深入浅出Greasemonkeyhttp://old.sebug.net/paper/books/greasemonkey/20/92WebDeveloper扩展有很多分析页面的函数。Aardvark互动的显示标签名称、id和class的属性。VenkmanJavascriptDebugger完整的Javascript运行时调试器。WebDevelopmentBookmarklets有一些有用的函数，可以把它们拖放到工具栏中。JSUnit是Javascript单元测试框架。js-lint可检查出Javascript代码的常见错误。第4章公共模式4.1.在域名以及它所有子域名上执行用户脚本对于许多网站，无论是否有www.前缀，访问网站都是等效的。如果要为这样的站点写用户脚本，需要能匹配这两种地址。例4.1.匹配域名和它所有子域名的元数据标签//==UserScript==//@includehttp://example.com/*//@includehttp://*.example.com/*//==/UserScript==实例ButlerSalonAuto-Pass4.2.测试Greasemonkey函数是否有效Greasemonkey的新版本给用户脚本提供了新函数。如果准备发布用户脚本，那么应该测试下所用的Greasemonkey函数是否存在。例4.2.GM_xmlhttpRequest函数无效时警告用户if(!GM_xmlhttpRequest){alert('请升级到最新版本的Greasemonkey.');return;}//使用GM_xmlhttpRequest的其他代码4.3.测试页面中是否有HTML元素2015/10/7深入浅出Greasemonkeyhttp://old.sebug.net/paper/books/greasemonkey/21/92可以用getElementsByTagName函数来测试页面中是否有HTML元素。例4.3.检查页面中是否有