GreaseMonkey这个插件大家都早已熟悉了。最近我遇到一个问题：需要让页面在调用完某个函数之后自动执行我的函数。 其实这个并不难，写个函数替换原有的函数即可：

function hook() {
  var f = unsafeWindow.foo;         // 保存旧函数
  unsafeWindow.foo = function() {   // 定义新函数
    alert("Hello!");                // 先执行我们的处理
    f();                            // 再执行旧函数
  }
}

然后加载到页面上：

setTimeout(hook, 1000);

这样，页面再执行foo函数时，就会先执行我们的alert("Hello!")了。

不过这个函数还有很大的问题。比如，原有函数的参数不能正确传给foo，返回值无法取出来，无法应用到对象中的方法，通用性不好等。 下面来一个个解决。

返回值的问题比较好办，让它return一下就行了：

function hook() {
  var f = unsafeWindow.foo;         // 保存旧函数
  unsafeWindow.foo = function() {   // 定义新函数
    alert("Hello!");                // 先执行我们的处理
    return f();                     // 再执行旧函数
}

对象方法的意思是，如果要hook的函数不是全局函数，而是某个对象的方法的话，上述函数就无法正确执行。

var object = {
  value: 10,
  foo: function () { alert("Foo!" + this.value); }
};
object.foo();

此时如果只是简单修改一下最初的GreaseMonkey脚本，改成这样的话：

// 注意这种实现方法是错误的！
function hook() {
  var f = unsafeWindow.object.foo;         // 保存旧函数
  unsafeWindow.object.foo = function() {   // 定义新函数
    alert("Hello!");                       // 先执行我们的处理
    return f();                            // 再执行旧函数
  }
}

那么执行foo()时你会发现，本应输出"Foo!10"，但实际输出结果变成了"Foo!undefined"。 这是因为临时保存下来的 f 函数在执行时没有绑定到unsafeWindow.object上，因此找不到this.value。

解决方法是在调用 f 时使用 apply：

// 正确的方法
function hook() {
  var f = unsafeWindow.object.foo;         // 保存旧函数
  unsafeWindow.object.foo = function() {   // 定义新函数
    alert("Hello!");                       // 先执行我们的处理
    return f.apply(unsafeWindow.object);   // 再执行旧函数
  }
}

有了apply，参数问题也迎刃而解：

function hook() {
  var f = unsafeWindow.object.foo;                    // 保存旧函数
  unsafeWindow.object.foo = function() {              // 定义新函数
    alert("Hello!");                                  // 先执行我们的处理
    return f.apply(unsafeWindow.object, arguments);   // 再执行旧函数
  }
}

最后的问题就是这个函数通用性还不好。代码中把要hook的函数(unsafeWindow.object.foo)写死了， 这样每hook一个函数都要写专用的函数才行。下面试着让它通用一些：

/**
 * hook系统中的已有函数
 * @param object {Object} 要hook的函数所在的对象
 * @param name {String} 要hook的函数名称
 * @param pre {Function} 原函数执行前要执行的动作
 * @param post {Function} 原函数执行后要执行的动作
 * @return 旧函数的返回值
 */
function hook(object, func, pre, post) {
  var f = object[func];                       // 保存旧函数
  object[func] = function() {                 // 定义新函数
    if (pre) pre.apply(window, arguments);    // 旧函数执行前执行的自定义函数
    var ret = f.apply(object, arguments);     // 执行旧函数
    if (post) post.apply(window, arguments);  // 旧函数执行后执行的自定义函数
    return ret;
  }
}

这样这个函数就相当通用了。在hook时需要执行以下代码：

setTimeout(function() {
  hook(unsafeWindow.object, 
       "foo", 
       function(){alert("pre")}, 
       function(){alert("post")}
  );
}, 1000);

当然上述函数还有可以改进的地方。如调用pre和post时直接apply到了window上， 这样如果在hook时给出的pre和post不是全局函数而是某个对象的方法的话， 函数就无法正常执行了。不过对于一般的应用来说，上面的方法已经足够了吧。

Firefox的工具菜单中有个非常有用的功能：清除隐私数据，快捷键是Ctrl-Shift-Del。 经常做Web开发的人对这个功能一定非常熟悉，修改完一点代码看看效果时，都需要 Ctrl-Shift-Del然后按回车。

不过这个功能有个很郁闷的地方。Firefox 2中，默认是不清除网站登录信息的， 比如你登录了Gmail并选择下次无需输入密码，在Firefox 2中直接按Ctrl-Shift-Del再回车， 是不会清除Gmail上记忆的密码的。但是在Firefox 3中添加了一个很讨厌的选项， 清除“已通过验证的会话”，而且是默认选中的，这样直接Ctrl-Shift-Del再回车， Gmail上记住的密码也就没有了，下次进入Gmail还得再点一次登录。

幸好，通过about:config可以修改清除隐私数据对话框的默认值。 在地址栏中输入about:config，然后查找 privacy.item， 把 privacy.item.sessions 改为false就可以了。 这样再按 Ctrl-Shift-Del，“已通过验证的会话”选项就是默认不选中了。

最近Firefox的行为很奇怪，出现了许多以前一直没见过的现象。回想一下似乎是升级了delicious bookmarks 2.0.58版导致的。

目前发现的问题如下：

• 历史菜单内的前进、后退按钮失效，工具栏的前进、后退、刷新按钮失效，右键菜单中相应菜单也失效，但用快捷键和鼠标手势可以正常浏览；
• 不论访问什么网页，地址栏总是显示第一次手工输入的地址，而不会随着当前页面的变化而更新；
• Ctrl-Tab切换Tab时，松手后屏幕中间显示的切换菜单不会自动消失；
• 按一下Ctrl-Tab无法在所有Tab中依次切换，只能在当前Tab和上一个Tab之间切换；
• Ctrl-PageUp和Ctrl-PageDown的功能会反过来，即Ctrl-PageUp变成“下一个Tab”，而Ctrl-PageDown变成“上一个Tab”。

这些现象在禁用delicious bookmarks后消失。但delicious bookmarks又不能不用，于是卸载之后从官方插件站点上重新安装了一次，目前还未发生上述问题。

2008-6-20更新：

今天delicious bookmarks 2.0.64版发布了，更新内容包括：

This release fixes several issues with FF2 and FF3 GA.

• Fixes for "Organize Bookmarks" performance on FF3
• Fixes for strange tab behavior in FF2
• Fixes for sync issues on startup and login
• Removing status bar icons now frees up space on the status bar
• Classic mode has been simplified to remove the Delicious menu and work via bookmarklet interface
• Cleaned up Delicious Bookmarks Options UI

其中第二条就是解决标签切换行为异常的。

这篇文章分析了Firefox插件对浏览速度的影响。我个人也一直很奇怪 为什么我的Firefox打开新窗口时速度要比别人慢很多，后来发现 是自己装了很多插件的原因。原文在这里。

大部分Web程序开发者都喜欢Firefox，首要原因是因为它有丰富的插件， 像All-in-One Gestures、User Agent Switcher、Firebug、Greasemonkey、 WebDeveloper、ScrapBook等。

但是随着插件的增加，启动时间、页面显示时间也会变慢，其首要原因 就是插件，特别是部分插件会严重影响浏览速度。

那么，究竟是哪些插件影响了速度？能否通过数字进行比较？ 这里给出了显示时间的测试结果。

1. 验证

测试环境：操作系统 XP SP2 Pro、Vista Ultimate，CPU Pentium D820 2.8GHz， 内存为三星DDR2-667 1G x 2 5.0-5-5-13。

测试方法：使用多重表格和脚本进行测试。

• Table6：六层表格(4096个)，http://c130.client.jp/bin/brbench/
• Table7：七层表格(16384个)，http://c130.client.jp/bin/brbench2/
• JS-CPU：脚本测试，http://c130.client.jp/bin/cpubench/

测试结果如下（数值为页面显示时间，单位秒）：

IE7的显示速度居然非常快，而β版Safari也非常快。 Firefox（插件调整前）要慢上5倍之多。

2. 插件对显示速度的影响

3. 调整

经过以下的调整之后，显示速度得到很大改善。Linkification、Google Toolbar for Firefox、 bbs2chreader设置为无效。

1. 用Text Link替换Linkification
2. 用IEView替换IETab
3. 用Googlebar Lite代替Google Toolbar for Firefox
4. bbs2chreader不用时禁用
5. 用McAfeeSiteAdvisor代替noScript，或者将Javascript改为手动设置
6. Firebug不用时禁用
7. Greasemonkey不用时禁用

若想改变网站外观(如去广告等)，使用Stylish等插件改变CSS要比使用脚本类插件块。

其他的插件一般不会影响速度。禁用上述插件之后重启动Firefox。

默认速度（无插件）：1.469秒、6.079秒
调整前：7.890秒、28.797秒
调整后：1.485秒、6.225秒

4. 结论

影响Firefox速度的首要原因就是插件。

5. about:config设置

通过地址栏输入about:config可以修改设定值。

据说关闭IPv6支持可加快浏览速度（在地址栏中输入about:config然后 将network.dns.disableIPv6设置为true），但实际上并没有太大改观， 甚至会影响浏览速度。

IPv6-false（默认）：1.406、7.265、3.706
IPv6-true（禁用）：1.656、7.672、5.881

6. 插件的选用

为什么有的插件会影响速度？最近的插件使用大量的脚本，插件间的兼容性 有可能导致速度变慢。

浏览器的本来目的是浏览网站，而现在Ajax的普及使得浏览器从单纯的浏览软件 变成了高性能的客户端软件。禁用插件虽然可以加速浏览， 但是实际上那些优秀的插件，明知会影响速度也很难放弃。

解决这个问题也许可以同时使用多种浏览器来解决，通过GoogleBrowserSync等 工具进行同步等。

优秀的浏览器不仅要具备标签浏览、安全、检索等功能，更要追求高速的响应、 优美的字体等显示性能。而插件则是为浏览器增加新功能的自由软件。 因此为了避免浏览器速度变慢，安装插件之前先确认性能的变化情况， 再根据使用目的来选用插件。

或许很多人已经知道这个插件了吧，Tab Effect。它能让你的Firefox在切换标签时使用类似于Linux下的Compiz的3D效果。看看下面的截图。

装上以后感觉原来的设置切换速度有点慢，打开插件目录下 content/javascript.js，寻找这一段代码：

if(TabEffect.currentTab != gBrowser.selectedTab){
    var back = currentTabIndex > gBrowser.mTabContainer.selectedIndex || currentTabIndex == -1;
    TabEffect.xpcomObj.translateToNextTab(back, 24);
    TabEffect.currentTab = gBrowser.selectedTab;
}

将 translateToNextTab(back, 24)中的24改成12，重新启动Firefox，可以看到旋转速度快了许多。不过在切换页面时有明显的延迟，使这个插件减色不少。不过总的来说，这个插件还是值得推荐的，它带来了插件开发的一个新思路。

该最新版本为1.1，仅有Windows版，需要DirectX 8支持。

ps. 如何找到插件目录？我使用的是Mr Tech Local Install，安装该插件之后，在插件管理面板上选中想要查看的插件点右键，选择浏览安装目录就可以了。要是没有安装该插件，那就在 C:\Documents and Settings\用户名\Application Data\Mozilla\Firefox\Profiles\nnnnnn.default\extensions 目录下一个个找吧。

Firebug开发小组终于发布了激动人心的Firebug 1.0 Beta版。 与当初的Firebug 0.4版相比，这次的正式发布版已经不仅仅是简单的Javascript控制台， 而是集控制台、调试器、DOM查看/编辑器、网络监视器于一身的强大调试工具。 而使用者也不再限于Javascript开发者，内置的Box模型查看功能让网页设计师也受益匪浅。 下面我们来看看它的新功能吧。

可随时启用或禁用

开发时需要Firebug，但平时上网时启用Firebug又会影响脚本执行速度。 正式版的Firebug可以随时启用或禁用而不需要重新启动Firefox， 甚至可以仅在浏览指定网站时启动Firefox。

Javascript控制台

控制台和0.4版的控制台功能基本相同，可以直接执行Javascript语句， 也可以通过输入变量名来查看变量内容。出现脚本错误时，可以显示backtrace（函数调用历史）。 在选项中打开Show XMLHttpRequests可以查看XMLHttpRequests对象的通信情况， 这在Ajax开发时十分有用。

正式版的一个小改进是，选项中打开Larger Command Line，可以打开一个多行的命令行， 方便输入大量的代码。

强大的HTML查看器

正式版的HTML代码查看器不仅可以直接修改HTML代码的内容，还可以查看元素的CSS属性和CSS的继承关系。

打开Layout标签，可以看到box模型中 margin、padding、border 的大小。 将鼠标放在box模型中，相应元素的周围会出现标尺，这为网页设计者提供了极大的方便。

CSS编辑器

CSS编辑器可以编辑、添加、删除属性，也可以临时禁止属性。这样做设计时就不必每次刷新页面， 而只要在编辑器中调整CSS即可。

脚本调试器

正式版的脚本调试器已经可以设置断点并中断程序执行，也可以单步调试，甚至连Watch窗口都有， 俨然一个真正的脚本调试器。只可惜尚不能调试 eval 代码。

网络监视器

网络监视器可以监视所有的请求，查看其内容，并可以统计请求消耗的时间，用于调试性能。

Firefox 拥有强大的插件功能是众所周知的，而面对众多琳琅满目的插件， 初学者往往不知道应该如何选择。这里show一下我常用的 Firefox 插件， 一来是给大家提供一点参考，二来是做个备份，重装系统时不必再逐个查找了。

Web 开发工具

Firebug

评价：★★★★★ 下载地址：https://addons.mozilla.org/firefox/1843/

Firebug，有史以来最强大的 Javascript 控制台 + 调试器，五颗星当之无愧。 它强大的DOM查看器、方便的控制台以及 XMLHTTPRequest 监视功能， 使之成为Javascript特别是 Ajax 开发者的必备工具。常用的功能包括：

• 为DOM添加 window.console 对象，脚本中可以利用 window.console.log 来输出调试信息
• 控制台可执行 Javascript 语句并可以方便地查看执行结果
• 查看任意对象的值
• 查看DOM结构，迅速定位光标处的DOM元素
• 监视DOM事件的发生
• 动态改变DOM元素的属性（例如可以通过动态改变style值来微调界面，而不必每次更改页面内容再刷新）
• 监视脚本的 XMLHTTPRequest 请求和应答

Tamper Data

评价：★★★★★ 下载地址：https://addons.mozilla.org/firefox/966/

可监视 HTTP 请求并记录下每个请求所耗费的时间， 并能够任意修改浏览器发出的 HTTP 请求的头的内容。 可利用修改请求头的功能来调试程序、寻找安全漏洞， 也利用监视功能找出应用程序瓶颈。

JSView

评价：★★★★ 下载地址：https://addons.mozilla.org/firefox/2076/

可以查看页面引用的外部 css 和 js 文件，免去了从源代码中一个个复制粘贴的麻烦。

MeasureIt

评价：★★★★ 下载地址：https://addons.mozilla.org/firefox/539/

顾名思义，可以量出页面上两点间的距离。微调页面布局时很有用。

ColorZilla

评价：★★★★ 下载地址：https://addons.mozilla.org/firefox/271/

使用滴管工具吸取页面上的颜色。

User Agent Switcher

评价：★★★ 下载地址：https://addons.mozilla.org/firefox/59/

修改 HTTP 请求头中的 User-Agent 值。虽然通过 Tamper Data 也能做到， 但是这个插件可以将常用的 User-Agent 值定义为菜单项，方便切换。 当Web应用程序需要根据不同的 User-Agent 做出不同反应时，这个插件就十分有用。

HTML Validator

评价：★★★ 下载地址：https://addons.mozilla.org/firefox/2318/

可以检查 HTML 代码是否符合w3c规定的标准。如果你很在意“标准化”这个字眼， 推荐使用这个工具来修正 HTML 中的错误。推荐 Ajax 开发者使用。

Fasterfox

评价：★★★ 下载地址：https://addons.mozilla.org/firefox/1269/

本来是一个 Firefox 加速软件，不过我按照默认的设置并没有感觉到快到哪里去。 不过这个软件能够在状态栏中显示页面的加载时间，做粗略的性能测试时十分方便。

日常应用

Mouse Gestures

评价：★★★★★ 下载地址：https://addons.mozilla.org/firefox/39/

鼠标手势功能。支持常见手势（后退、前进、关闭等等），并且能够自定义手势， 支持鼠标轨迹。

FlashGot

评价：★★★★★ 下载地址：https://addons.mozilla.org/firefox/220/

使 Firefox 支持 FlashGet 等下载工具。

del.icio.us

评价：★★★★ 下载地址：https://addons.mozilla.org/firefox/1532/

del.icio.us的官方插件。在工具栏中添加“我的书签”和“添加书签”两个按钮。 del.icio.us用户必备插件。

MR Tech Local Install

评价：★★★★ 下载地址：https://addons.mozilla.org/firefox/421/

增强型的 Firefox 插件管理程序。最看好的一点，是它能够去掉安装插件时的 6 秒钟等待。

SmoothWheel

评价：★★★ 下载地址：https://addons.mozilla.org/firefox/357/

使用鼠标滚轮滚动页面时，使滚动平滑。

Tab Control

评价：★★★ 下载地址：https://addons.mozilla.org/firefox/1480/

控制标签页的打开方式。常用的功能包括：

• 在标签页中打开页面上的新建窗口链接，而不是默认的新的浏览器窗口中。
• 在当前标签页的右侧新建标签页，避免找不到标签页的情况。

Internote

评价：★★★ 下载地址：https://addons.mozilla.org/firefox/2011/

可以在页面的任意位置粘贴便笺。

今天在调试程序时发现一个很奇怪的错误，查到最后发现原来是 Firefox 的一个bug。 window.open 打开的页面中，通过 prototype 定义的属性不会被对象所继承。 最明显的例子就是 Function.prototype（我也只测试了这一个）， 通过 window.open 打开的页面中的函数不能继承 Function.prototype 定义的属性。

可以通过下面的代码来测试。

<html>
<head>
  <script>
var windowName = "_childWindow";

  function openWindow(url) {
    var w = window.open(url, windowName);
    return w;
  }

  function $log(msg) {
    var logwin = document.getElementById("log");
    logwin.innerHTML += msg + "<br/>";
  }

  function doTest() {
    Function.prototype.f = "Foo";
    a = function() {};

    for (i in Function.prototype) { $log("Function.prototype."+i+" = "+Function.prototype[i]); }
    for (i in a ) { $log("a."+i+" = "+a[i]); }
    $log("-----------------------------");
  }

  </script>
</head>

<body>
  <input type="button" onclick="javascript:openWindow('function-test.html')" value="open">
  <input type="button" onclick="doTest()" value="test">
<br/>
<br/>

<div id="log" style="width:600px; border: solid 1px black"></div>

</body>
</html>

保存该段代码为 function-test.html 文件，使用 Firefox 2.0 打开。 单击 test 按钮的结果如下：

Function.prototype.f = Foo
Function.prototype.prototype = [object Object]
a.prototype = [object Object]
a.f = Foo
-----------------------------

而单击 open，在打开的新窗口中单击 test 的结果如下：

Function.prototype.f = Foo
Function.prototype.prototype = [object Object]
a.prototype = [object Object]
-----------------------------

可见，Function.prototype.f 并没有被 a 继承。

这个 bug 被定义为#357947和 #355161，并已经在未发布的 Firefox 2.0.0.1 中得到解决。

【参考】

继承是面向对象JavaScript中的一个概念，它通过定义对象的 prototype 属性来实现 类似于 Java 的类的概念。例如，JavaScript 中所有的函数都是 Function 对象， 所以可以通过定义 Function.prototype 来扩展函数的功能，例如

Function.prototype.myfunc = function() { alert("Hello!"); }
var f = function() {};   // 定义函数 f，f是一个Function对象，所以继承 myfunc 属性
f.myfunc();              // 将执行 alert("Hello!")

在Firefox的地址栏里面输入 about:config，即可进入Firefox的详细设置页面，在这里可以修改许许多多隐藏的参数。

Thunderbird也有这个页面，不过不能直接访问。首先在下面这个URL上安装AboutConfig插件： http://extensionroom.mozdev.org/list.php/Thunderbird/config#aboutconfig 安装之后重新启动Thunderbird，即可在Tools菜单中找到about:config项，使用它即可进入详细设置页了。