怎样让浏览器随意修改访问中的 web 页面

  丈 母娘在的那些日子， 天天玩 4399 上的 花花连连看 游戏， 明天要走了， 说要把游戏下载下来回去玩，因为她家里没有网络。我看了下这个页面， 发现是个 flash 的游戏， 心想应该能下载到本地玩。看了看页面上有个下载的连接， 点进去却发现还需要安装 4399 游戏盒。 安装软件对于丈母娘来说太难了， 我心想，直接把 flash 下载下来不就完了吗。使用 Chrome 浏览器打开游戏页面， 在那个 flash 的左边空白处右键选择： Inspect Element， 然后找到：

<embed id="flashgame1" name="flashgame" 
src="http://s1.4399.com:8080/4399swf/upload_swf/ftp/20070506/2.swf" 

quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" 
type="application/x-shockwave-flash" width="750" height="563" allowscriptaccess="nerver" 
allownetworking="internal" style="width: 639px; height: 480px; ">

OK， flash 游戏的地址就是这个了： src="http://s1.4399.com:8080/4399swf/upload_swf/ftp/20070506/2.swf"

 搞定！

   丈母娘不明白为啥下载个游戏， 我还忙活这么半天， 还打开一堆英文字符看。 让人很没有成就感， 我想了下， 干脆弄个 User Script 加载进来， 直接修改这个 web 页面， 加上一个点击下载的连接不久完了， 以后她再想下载 4399 上的小游戏， 我就方便多了。 说干就干。

   先简单介绍一些 User Script。 现在浏览器或自身或通过插件支持 User Script， IE 下通过 Trixie ， Firefox 使用 Greasemonkey ， Chrome 自身就支持 User Script。User Script 最早由 Greasemonkey 提出， 它就是一个基本的 JavaScript， 通过一些简单的 annotaion 来说明该 user script 的名字， 作用， 和能够访问的 web pages。

// ==UserScript==  
// @name         4399 game downlader
// @version		 1.0.0
// @author       [email protected]
// @namespace    https://github.com/gaol
// @description  4399 game downloader
// @include      *://www.4399.com/flash/*
// ==/UserScript== 

  上面就是写的 user script 的 annotation 描述。 具体含义， 请参考 http://greasemonkey.mozdev.org/authoring.html

  完整的脚本如下：

// ==UserScript==  
// @name         4399 game downlader
// @version		 1.0.0
// @author       [email protected]
// @namespace    https://github.com/gaol
// @description  4399 game downloader
// @include      *://www.4399.com/flash/*
// ==/UserScript== 

var gameurl = document.getElementById("flashgame1").getAttribute("src");
var divBlock = document.createElement("div");
divBlock.setAttribute("id", "download");
divBlock.setAttribute("style", "margin-top:70px;");
divBlock.setAttribute("align", "center");
divBlock.innerHTML = "&nbsp;&nbsp;<a href=\"" + gameurl + "\" id=\"downBtn\">下载游戏到本地（右键另存为）</a>";
var play = document.getElementById("play");
var before = play.nextSibling;;
document.body.insertBefore(divBlock, before);

  我们以 Chrome 为例， 使用 Chrome 浏览器访问脚本（这里注意， 脚本的文件名需要为 *.user.js , 这样 Chrome 还有 Greasemonkey 才会认为该脚本是个 User Script），左下角会有安全性提示， 点击 Continue， 在弹出对话框中选择： Install，就好了。

   请注意： User Script 只允许访问 web page 下的 DOM 对象， 不能访问 web page 下的 javascript 变量。

   现在我们再次访问下该页面， 我在使用 User Script 前后各拍一个图， 我们比较下区别：

  Chrome 除了 User Script 以外， extension 是一大亮点， 现在基于 Chrome 的 extension 迅猛增长， 相信很快就能超过 Firefox 下的 Add-on 数量。 有关 extension 的开发， 请参考官方文档： http://code.google.com/chrome/extensions/index.html

• —软件人才免语言低担保 赴美带薪读研！—