怎样让浏览器随意修改访问中的 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       [e-mail]
// @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       [e-mail]
// @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

 

  另外：   http://userscripts.org/ 里有很多 User Script 下载。

 

  当使用 User Script 或者 Chrome 的 extentsion 有了任意修改访问的页面能力的时候， 你会想到做什么呢？ 我想到的，比如： 12306 的自动订票， taobao 上的秒杀等等。 你会想到什么？

 

评论

4 楼 gxz1989611 2012-02-07  

aoingl 写道

真的吗？ 他们怎么做的验证呢？ 怎么区分是用户按 F5 刷新和脚本的提交的呢？ 不过至少 12306 做的不怎么样， 我通过 https://github.com/zzdhidden/12306 的脚本就抢到票了， 至少今天看的话，自动刷票的功能还没问题。

这样，那是我误解你的意思了。我以为你说的只是单纯改变前端页面数据然后提交~

3 楼 lvjinhua 2012-02-06  

丈母娘驱动开发

2 楼 aoingl 2012-02-06  

真的吗？ 他们怎么做的验证呢？ 怎么区分是用户按 F5 刷新和脚本的提交的呢？ 不过至少 12306 做的不怎么样， 我通过 https://github.com/zzdhidden/12306 的脚本就抢到票了， 至少今天看的话，自动刷票的功能还没问题。

1 楼 gxz1989611 2012-02-06  

引用

当使用 User Script 或者 Chrome 的 extentsion 有了任意修改访问的页面能力的时候， 你会想到做什么呢？ 我想到的，比如： 12306 的自动订票， taobao 上的秒杀等等。 你会想到什么？

别想了，12306订票、taobao秒杀都有服务器端验证的，改了前端页面毛用都没有~