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. 保健品 保健品

    看看博主,很久没来了,最近可好啊!

  2. power cord power cord

    是chome上的一个插件应用么?

    1. Chao QU Chao QU

      @power cord
      Chrome 的 DEV 版本已经自带了

  3. Hex Bolts Hex Bolts

    有点迷茫。。。难以理解啊。。。

  4. xdgbxn xdgbxn
    1. Chao QU Chao QU

      @xdgbxn
      你好,在此页面没有找到 flash 啊?

  5. dawlen dawlen

    UI尺寸(那个三角符号)占用空间太大了,都超过原本的flash尺寸,貌似不能根据嵌入网页的flash尺寸自动调节大小?
    如果是连续多个flash并列,那整个页面都没办法看了。

    1. Chao QU Chao QU

      @dawlen
      在最新版本里我已经做了处理啊,
      小于箭头的 flash 我就等比缩放了。
      你可以试试。
      当然为了保证你可以点击,
      我也设置了 blocker 的最小限制 (16x16) 。

  6. baby stroller baby stroller

    这方面的知识不是很懂啊

  7. Hailo Hailo

    额。。。
    评论被老虎吃掉了?

    1. Chao QU Chao QU

      @Hailo
      评论设置了需要审核,
      呵呵。

      白名单下次更新会加上对通配符的支持。

      另外在 51replay 上貌似不是该脚本的问题?

      1. Chao QU Chao QU

        @Hailo
        看到了。
        建议目前将 51replay 白名单,
        这个问题与其加载 flash 的方法有关,
        改起来比较麻烦。
        如果有同类问题的网站出现较多可以考虑予以支持,
        否则会影响效率。
        :)

      2. Hailo Hailo

        点击连接进去看视频,如果白名单有51replay就可以播放,如果没有则在页面最左上角有一个缩小的图标,而flash的位置是一片空白。

  8. Hailo Hailo

    很好用,还省了一个扩展。。。
    白名单只需要简单地匹配*就OK。

    PS;貌似在这个网站(http://www.51replay.com/)上有点问题。

  9. R R

    如果有关闭功能更好了,关闭正在播放的flash,GM脚本的话,blockflash2有这个功能。

    1. Chao QU Chao QU

      @R
      关闭很容易,
      就是把节点移除。
      我先看看 blockflash2 他关闭 flash 的交互方式是怎样。

  10. dawlen dawlen

    很给力,谢谢Chappell.Wat。。
    建议弄个图标到状态栏,左键单击图标以http://www.example.com的方式添加白名单,右键以example.com的方式添加白名单,中键查看白名单。

    1. Chao QU Chao QU

      @dawlen
      如果要做这样复杂的功能,
      那么单单用我这个方法是搞不定了。
      你可以安装文中所推荐的 Flash Block 这款扩展来实现。

  11. 祝好健康品 祝好健康品

    看看,今天很冷!注意保暖!

  12. oner oner

    2011最给力脚本!终于诞生了!

  13. dawlen dawlen

    多好的功能啊,最好有白名单,再弄个图标到状态栏控制添加---完美

  14. dawlen dawlen

    http://www.xmhouse.com/
    这个网站会有问题,每个flash会多出一个“enable this flash”图标。

  15. z z

    先生, 点击载入图片能不能实现呀?

    1. Chao QU Chao QU

      @z

      白名单功能可以实现,但我还没有做;google music 无法播放的原因其实是程序的原因,
      他们从一开始就认定 flash 会同步被载入,

      所以当你解除 block 后他们就无法处理了。
      不过这个问题可以通过白名单来解决;

      图片的 block 可以实现,
      但是会更复杂点,

      因为除了 img 标签还有背景图等方式来显示图片。
      如果不想自己修改代码,
      可以去下载名为 Web Developer 的扩展来实现屏蔽图片的功能。

      1. z z

        可以的哦,或者直接把flash的底色换成灰白色.毕竟现在的网页是白底居多..
        感谢您能听取用户意见www

      2. Chao QU Chao QU

        @z
        感谢你的热心反馈。

        新的这种方案在除灰白色背景外的其它场景下,体验提升表现,和背景融为一体了。如果变色,是否能解决你说的问题?关闭功能可以考虑下次加上,这不难。
      3. z z

        现在的播放图标很容易误点.
        像这个http://acfun.cn/html/ent/20110413/190610.html
        一片白的,中间的播放按钮也不会像FX管网那个会变色.我觉的还不如上一版本直观.

        关闭功能还是很实用的.建议增加.

        白名单我觉的现在就够用了.

  16. z z

    导致GOOGLE.CN/MUSIC播放不能...

  17. z z

    可以设置白名单吗?

  18. pandora bracelet pandora bracelet

    Hello ,thanks for all the great information you have shared!

  19. computer technician computer technician

    Terrific work! This is the type of information that should be shared around the web. Shame on the search engines for not positioning this post higher!

  20. yhai yhai

    很棒的脚本,请问下怎么改成单击就播放flash,不想每次都得点两次!我也希望有白名单!谢谢!

添加新评论