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. Leniy Leniy

    我又来了,当初11年wopus的管理员给我的测试站点就是你的。
    不过一年不更新,估计你也看不到这篇留言了

    1. Chao QU Chao QU

      @Leniy
      这不是看到了嘛…… :)

  2. z z

    firefox nightly 下失效了

  3. 奶茶 奶茶

    实现起来还是要时间的呢。

  4. 兰诺儿 兰诺儿

    很不错,学习下了

  5. echo·falsita echo·falsita

    现在ff15原生支持click to play了,就是被它拦截的flash上黑漆漆的一片遮挡网页内容,不知道能不能把这个脚本的css样式用在ff原生的flash拦截按钮上呢?

    1. Chao QU Chao QU

      @echo·falsita
      目前原生的 click to play 还无法很好的管理白名单,
      所以我仍旧在使用 flashBlockLite 。

      要改它的样式是可以的,
      但通过 userContent.css 是肯定做不到的。

  6. 咫尺天亚 咫尺天亚

    几大主流搜索引擎的MP3都不能播放啊,比如百度,搜搜,谷歌。

  7. 蛋蛋的忧伤 蛋蛋的忧伤

    百度mp3,soso MP3
    搜出来的歌曲一直显示连接中,无法播放

  8. 超菜 超菜

    使用firefox14,在hoopchina的观看视频,弹出来的小窗口播放视频,点击播放后白屏,firefox11中正常

    1. Chao QU Chao QU

      @超菜
      您太前卫了,
      我目前还用 11。

      能否给个 hoopchina 视频页的具体地址我来看看。

      不过这种基础功能,
      应该不会跟随版本升级发生大的变化。

  9. 新加坡投资移民 新加坡投资移民

    这些代码还是很好用的,不错不错,谢谢博主分享

  10. 病医生 病医生

    添加白名单translate.googleapis.com无效呀,这个是谷歌页面翻译,我很需要这个,扩展版本就可以添加,谢谢作者能解决一下吗?十分感谢了

  11. Firefox去除优酷黑屏高招| 不落哥

    [...]合并以下两大技术 使用 XBL 为 Firefox 简单实现 FlashBlock[...]

  12. 蘑菇街网站 蘑菇街网站

    很不错,学习下了

  13. 非主流网名 非主流网名

    还没用到,先留言后看看效果如何

  14. Andy Andy

    很好~终于找到个UC的了...以前一直用GM的脚本.

    PS:建议加个停止功能...

  15. 哪里有羽绒被 哪里有羽绒被

    好像看到bug了。

  16. Peter Pan Peter Pan

    用了很久这个block flash 的方法,原来出自这里,还更新过了,图片比之前的文字好!非常感谢您啊!!!

  17. 比利时光 比利时光

    不得不顶, 这么简洁的风格我找了很久

  18. falsita falsita

    这个脚本在新浪博客上失效几率很高,虽说一旦发生flash不被拦截状况,重启次浏览器就能解决问题,不过每当浏览新浪博客之时总频繁发生这样的情况,还是让人心里不免有些在意

  19. z z
  20. 宁波纹身 宁波纹身

    有点深奥

添加新评论