From a0716f555a88f3d92763feb10c93d88c9f7a5300 Mon Sep 17 00:00:00 2001
From: cilame <opaquism@hotmail.com>
Date: Wed, 27 Oct 2021 23:17:09 +0800
Subject: [PATCH] add

---
 options.html | 29 +++++++++++++++++++++++------
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/options.html b/options.html
index ed5f45a..08ad469 100644
--- a/options.html
+++ b/options.html
@@ -110,13 +110,30 @@
             <div id="funcs" style="float: left"></div>
         </section>
         <section class="tab">
-            <label>Fetch.enable</label>
-            <div>功能还没有做完，这里希望做成的功能是可以用插件的方式 hook 住代码，直接用插件的形式使用 ast 将原始的代码修改成期望的样子</div>
-            <div>能直接用插件的方式实现 ast 修改代码，用处还是非常大的。</div>
+            <div>这里的功能：在目标网页上右键菜单选择 “打开 v_jstools 动态调试” 即可开启，使用用插件的方式 hook 住目标页面的所有代码，像是在 node 里面一样使用 ast 将原始的代码修改成期望的样子</div>、
+            <div>这里的 hook 功能在一定的扩展之后，能 hook 住 script 链接中的 js 代码，也能 hook 到 html 内的 js 代码。</div>
+            <div>*能直接用插件的方式实现 ast 修改代码，用处还是非常大的。不过目前感觉功能稍微有点干瘪，因为暂时还在想有什么 ast 修改模板代码会更好的捕捉代码信息，让代码更方便的调试。</div>
             <HR>
-            <div>
-              请定义一个名字为 fetch_hook 函数，接受参数为 1.代码 2.url，return 修改后的代码
-            </div>
+            <div>请定义一个名字为 fetch_hook 函数，接受参数为 1.代码 2.url，return 修改后的代码</div>
+            <div>在代码里面你可以直接使用四个对象，你可以像是在 node 里面一样用这四个对象操作和修改 ast 的结构并重新生成新的代码。对象如下：</div>
+            <div>parser = require("@babel/parser");</div>
+            <div>traverse = require("@babel/traverse").default;</div>
+            <div>t = require("@babel/types");</div>
+            <div>generator = require("@babel/generator").default;</div>
+            <HR>
+            <div>你可以实现挂钩修改所有的 script 代码，所有 script 代码都会被下面的函数挂钩，你可以使用 ast 清除掉里面所有的 debugger。</div>
+            <div>一个使用 ast 删除代码中的 debugger 的代码示例，代码如下：</div>
+            <div>function fetch_hook(code, url){</div>
+            <div>  function removedebugger(path){</div>
+            <div>    path.replaceWith(t.identifier("/*debugger*/"))</div>
+            <div>  }</div>
+            <div>  var ast = parser.parse(code);</div>
+            <div>  traverse(ast, {DebuggerStatement: removedebugger});</div>
+            <div>  var { code } = generator(ast, { jsescOption: { minimal: true, } });</div>
+            <div>  return code</div>
+            <div>}</div>
+            <HR>
+            <div>code:</div>
             <textarea id='fetch_hook' data-key="config-fetch_hook" style="width: 100%; height: 500px"></textarea>
         </section>
         <section class="tab">