Chrome Extension实战：页面JS脚本替换

前不久有这样一个想法：怎么把第三方页面所有的GET/POST请求，重定向到我们自己的后台服务器上，然后返回一些假冒数据？

一、背景

想把站点aaa.com中web展示的数据全部替换成自定义的数据，支持可以动态修改，并且可以通过Chrome插件录入的账号返回不同的虚拟数据。

这里记录一下实现思路和遇到的一些问题。

二、实现思路

1：逆向分析目标站点，定位发送ajax请求的js文件和具体代码

打开chrome的F12调试工具，分析调用栈，必要时下断点单步调试

2： 拦截目标js文件，重定位到插件的js

重定位到我们的js文件：

return {redirectUrl: chrome.extension.getURL("js/target.js")};

我们替换的js文件都需要在manifest.json中web_accessible_resources中申明

3：在JS中修改URL

沿用第一步获取的信息，精确替换目标URL到我们后台的URL

4： 加载插件调试

三、遇到的问题

1： 跨域

要绕过 XMLHttpRequest同源策略的限制，比如可以在background.js中拦截指定URL的responseHeaders，在responseHeaders中加入Access-Control-Allow-Origin头部信息

2：http/https

目标站点是https，而被替换成http的连接，直接报错加载失败。这个好解决：http对应http、https对应https，自己的后台要支持http和https。

3：background-js和替换的js通信

我们想在重定向的URL中带上我们的一些参数，比如：账号、时间等信息，这时需要跟插件的主程序（background-js）进行通信，有两种方法：

A：在target-js中发送请求chrome.runtime.sendMessage获取参数，background-js中监听chrome.runtime.onMessage.addListener请求，并返回；

B：拦截指定的URL，在请求头中加入参数；

两种方法的对比：A方法存在严重的滞后性，有延时；B：更通用，只不过暴露了头部信息，这里我们的参数最好存一些非敏感的数据。

4：反混淆的问题

目标站点中有些js是混淆压缩的，调试时可以用F12的Pretty print工具优化输出，但是拷贝目标JS文件出来时，强烈建议拷贝混淆的代码（使用chrome优化的代码，有时你会遇到意想不到的BUG滴），使用第三方反混淆工具进行优化。反混淆

5：Chrome插件的入侵和JS文件引入的入侵有区别

四、调试

1：加载插件

更多工具 -> 扩展程序 -> 打开【开发者模式】 -> 加载已解压的扩展程序 -> 选择插件目录

2：背景页

打开背景页，切换到Sources标签，定位到background.js，可下断点调试

3：调试替换的JS

在F12页面，下正常调试

---

页面注入相关，可以参考这篇文章：自动登录GitHub

---

写的很戳，抽时间完善了，求轻喷！！！