2012.09.04 更新

Firefox 终于追随 Opera 和 Chrome 之后实现了 Click to Play 的功能,
启用方法是在 about:config 中将 plugins.click_to_play 设置为 true

前几天我在评论里回答 echo·falsita 朋友时说:

“原生的 Click to Play 还无法很好的管理白名单”

在这里我表示抱歉(见下图)。

The 'Click to Play' Feature in Firefox

看来本工具“阳寿已尽”,多少有点儿伤感……

2012.06.11 更新

一位名为 AyanamiRei 的同学给我写邮件询问了这个东西的开发情况,
结果我发现它目前确实无法针对 Flash 地址做白名单。
在承诺“今晚会更新”之后,我果然更新出来了。
改进如下:

  • 将白名单区分为“页面白名单”和“Flash 白名单”,
    分别匹配“包含 Flash 的页面地址”和“Flash 地址”本身。
  • 支持一个简单的通配符(*)
    事实上是参考了 Greasemonkey 对 includeexclude 字段的处理方式,

这样大家使用起来将没有学习难度。

1. 页面白名单

比如我要将优酷的视频页面加入白名单,
只需要找到 flashBlockLite.xml 中的相关代码并做如下配置:

const DOC_WHITELIST = [
    'http://v.youku.com/v_show/*', // google music
];

2. Flash 白名单

再如我要将 ZeroClipboard.swf 文件名加入白名单,
(它被用来跨浏览器操作剪贴板,一个.swf 文件会被页面引入,参看 QQ 云输入法
你只需要找到 flashBlockLite.xml 中的相关代码并做如下配置。请注意通配符的位置:

const FLASH_WHITELIST = [
    'http://*/ZeroClipboard.swf', // zero clipboard
];

插件的更新方法如下:
替换之前你所使用的 flashBlockLite.xml 文件,
并将之前的自定义规则按新的方式移到白名单里。(要记得加 * 号哦~)


2011.03.23 更新

看到有同学留言提到 Chrome 下的 FlashBlock 方案,
我想说的是 Chrome 的 Dev 版已经原生支持了本特性
开启方法如下:

  1. 在地址栏输入 about:flags
  2. 找到名为 Click to play 的那一项;
  3. 点击 Enable 并刷新包含 Flash 的页面就会看到效果。

当然,
Chrome 的这个开关是针对所有插件而设的,
所以如果是 Java 或 Silverlight 的内容也会被要求 Click to play
应该算是正中了大伙儿的下怀吧? 😄


2011.02.21 更新

谁曾想这个小东西还有不少人在使用呢?
更有热心的朋友写邮件向我报告了 Bug ,
于是上周末在家针对大家的意见做了一次更新。
主要的改进点如下:

1. 支持了简单的白名单功能,但目前仅进行地址的前缀匹配。

比如你要将谷歌音乐的播放器加入白名单,
只需要修改 flashBlockLite.xml 的如下代码:

谷歌音乐的播放器地址为 http://g.top100.cn/xxx/html/player.html

const whiteList = [
    'http://g.top100.cn/',
];

每个地址前缀占一行,被匹配到的页面即不阻拦 Flash 的加载。
考虑到大家对于白名单的理解可能各不相同,所以目前没有支持正则匹配;想要支持也并不难,
所以大家对白名单有什么具体要求,(是支持完整的正则?还是简单地仅需要 * 通配符?)
请留言或邮件给我,在收集意见后我将在下次进行更新。

2. 调整了 UI 。

由之前的纯文字修改为播放按钮(如下图):

A New UI of FlashBlockLite

图片借用Mozilla 的官网页面,
如有任何版权风险请告知我予以移除。

3. 增强了兼容性。

特别是某些用户所反应的诸如“同一个 Flash 被 Block 两次”的问题。

这个问题的出现是页面的开发者为了去兼容不同浏览器,
使用了传说中被广泛推荐的 The nested-objects method
原理是使用双层标签——

  • 外层 <object> 标签供 IE 所使用,
  • 内层 <object>/<embed> 标签则供其它浏览器所使用。

Firefox 自然是属于后者(我亦是按后者的逻辑去做的处理),
但难免会遇到特殊情况,如有遇到请留言或邮件告诉我。

所需文件分别是:userContent.cssflashBlockLite.xml
安装方法可参考下方的旧文。
正在使用 1.0 版本的朋友请直接替换 .xml 文件然后刷新页面即可,无需重启 Firefox 哦~


2010.09.30 发布

OSX 下浏览包含 Flash 的页面确实是一件相当考验忍耐力的事儿,
让我们回想一下那个谁的双膝被 MBP 烫伤时所说的话吧……

Flash 太过充分地利用了 Mac 的系统资源,
但目前它对我来说仍是上网时的不可或缺之物,
因此只能从限制它的方向去考虑问题。

自从换上 64bit 的 Firefox for MacFlash 之后,
发热的问题并没有改善,
于是我开始考虑自己想办法解决问题。

如果你不想麻烦自己每次都从 about:addons 里切换 Flash 插件的启用状态,
那么可以考虑选择 FlashBlock 这个流行的解决方案。
简单地说——
FlashBlock 的作用就是将 Flash 对象隐藏并插入一个占位层,当你点击之后才将原始的 Flash 显示出来。
应该说它非常有效地避免了浏览器去加载我们并不关心的 Flash ,一定程度减轻了资源消耗。

同类的扩展和脚本很多,
比如始祖级的 Flash Block
再比如 BlockFlash: the UserScript
要么无法兼容 Fx4 ,
要么就实现过程太过繁琐。
另外我关心的还有一点——执行的时机。
很多脚本的实现启动于 Flash 加载之后,
那就没有起到节省资源的效果了。

我的实现方式对 DIY 的能力要求稍高一点,
但优点是真正可以在 Flash 加载前将其隐藏(点击后才会看到加载过程),
而且不用担心浏览器升级造成该功能失效。

使用后的效果图如下:
Flash Block Lite"

说了这么多废话,下面是实现方法:

1. 找到你 Firefox 的 profile/chrome 目录(下称 “chrome 目录”)。

寻找方法这里不再冗述,请自行 Google 。

2. 下载我编写完成 .xml 文件

将其置于上一步你所找到的 chrome 目录中。

该文件遵循 XBL 规范
已含简单注释,了解个中蹊跷的同学可以自行修改。
(建议将 click 事件换成 dblclick
能有效降低全屏 Flash 时的误点率)

  1. chrome 目录中寻找到 userContent.css 文件。

需要注意的是如果你之前未自定义过样式,
其初始文件名将是 userContent-example.css
请自行更名。

同目录还有用来自定义 chrome 层面样式的 userChrome 其它相关文件,请勿混淆
编辑该文件,在其尾部增加如下代码:

/* 
 * ==UserContent==
 * @name          Flash Block Lite
 * @namespace     Watsilla
 * @description   Let you enable a blocked Flash by double click.
 * @copyright     2010+, Qū Chāo (http://quchao.com) <chappell.wat#gmail.com>
 * @license       GPL v3; http://www.gnu.org/copyleft/gpl.htm 
 * @include       *
 * @require       flashBlockLite.xml
 * @compatibility Firefox 1.5.0 4.0b8pre
 * @homepage      http://quchao.com/entry/how-to-write-a-flashblock-with-xbl/
 * @updateURL     https://raw.github.com/QuChao/Watsilla/master/userContent.css/userContent.css
 * @version       1.0.0
 * ==/UserContent==
 * @version       1.0.0 @ 2010.09.30: Initialize release.
 */
object[classid*=":D27CDB6E-AE6D-11cf-96B8-444553540000"],
object[codebase*="swflash.cab"],
object[data*=".swf"],
embed[type="application/x-shockwave-flash"],
embed[src*=".swf"],
object[type="application/x-shockwave-flash"],
object[src*=".swf"] {
    -moz-binding: url("flashBlockLite.xml#flashBlockLite");
}

修改完成保存并确定文件名是 userContent.css
并与第 2 步中的 flashBlockLite.xml 一起置于 chrome 目录。
嫌麻烦的同学可以直接下载我编辑好的 `userContent.css 文件

至此安装完成。
请重启 Firefox ,看看生效没?
没有请按上述步骤自行排查。

此文所述之内容不是什么新鲜的东西了,
早先在老东家的内部论坛写过一篇,
未能存档,实在可惜。

P.S. 该方法理论上支持所有平台上任何 Mozilla 的产品。

P.S. #2 启用 FlashBlockLite 后发热的情况并没有解决。 😂

标签: Mozilla, Firefox, GreaseMonkey, Chrome, UserContent

已有 113 条评论

  1. oner oner

    对了,希望作者加个白名单功能!

  2. oner oner

    没有白名单,可惜了,对有些网站兼容不好如金山词霸网http://www.iciba.com/ 充许falsh也不行,单词也没声音,dict网也不行,flashblock扩展就没问题!还是感谢!很好的脚本!

    1. Chao QU Chao QU

      这种网站属于 Flash 后于 JS 载入所发生的问题,
      我个人倒觉得这是程序的问题,
      不应该以书写顺序作为加载顺序,
      如果用回掉来通知 JS 初始化就能解决这个问题。

      白名单我后续增加吧,
      大家可以先报告一些无法使用的网站。

  3. 非主流 非主流

    拜读楼主大作,感谢分享好东西!

  4. spray gun spray gun

    这个方法还挺有创意的,我去试试。

  5. radiology technician radiology technician

    Keep posting stuff like this i really like it

  6. discount coach bags discount coach bags

    看不懂

    文章写得不错

  7. falsita falsita

    很赞的脚本啊~就是灰颜色的遮挡有时会影响到浏览——如果flash重叠在页面的图文之上。如果能把灰色改成和flashblock一样的透明的按钮就好了。

    1. Chao QU Chao QU

      透明完全可以
      修改 xm<x>l 中的 background-color: #ccc; 为 background-color: transparent; 即可。
      稍后我有空来美化一下,
      将文字替换成我目前所使用的播放按钮。
      :)

      1. falsita falsita

        十分感谢!

  8. buy uggs buy uggs

    支持博主

    文章 写得很好

  9. z z

    很好,可以轉載麼?

    1. Chao QU Chao QU

      @z
      标注原文链接的前提下可任意转载
      :)

  10. Juicy Couture Juicy Couture

    最后一句话很给力

  11. Oil Paintings Oil Paintings

    flash 会有问题吗。

    1. Chao QU Chao QU

      你是问使用上会否有问题?
      某些情况下的确会有问题,
      比如一些程序需要检测到 flash 加载成功才能执行,
      这样的功能可能无法正常使用,
      比如用 flash 访问剪贴板。

  12. Air Retro Jordan Air Retro Jordan

      人们在有所求时,语气特别不同。

  13. Air Jordan Shoes Air Jordan Shoes

      知识必须加以运用,才能产生力量。

  14. Nike SB Nike SB

      优柔寡断的人,即使做了决定,也不能贯彻到底。

  15. medical Technologist medical Technologist

    this post is very usefull thx!

  16. copper fittings copper fittings

    不错,这个功能不错,谢谢,学习了。

  17. lei lei

    背景音乐都没有呢?

  18. WWE WWE

    很强力啊!支持下!

  19. George George

    很给力的kongwei

  20. Burning Burning

    P.S.2 启用 FlashBlockLite 后发热的情况并没有解决,LOL……
    最后一句话很给力

    1. Chao QU Chao QU

      @Burning
      呵呵,因为即使是只播放一个 flash 也会很热。

添加新评论