wip: refine

.gitignore

@@ -127,7 +127,7 @@ build
 # !admins/unified-certification/build
 apollo.config.js
 *.out
-dist
+dist/*
 !dist/index.js
 lib
 

README.md

@@ -1,3 +1,24 @@
+## GM Response Proxy
+
+一款代理了请求响应的油猴脚本，可以设置请求返回的内容。
+
+Vue3 的尝试、油猴脚本的开发尝试，简陋的功能和 UI。
+
+插件启用后，页面左上角会出现一个小按钮，点击可打开操作面板。
+
+`域名匹配规则` 和 `Api 匹配规则` 默认以字符串子串的形式去匹配，若头、尾是 `/` 则以正则的形式去匹配，如 `/(bilibili)|(baidu)\.com/`。
+
+日志会直接在控制台输出。
+
+## TODO
+
+- [x] 支持 XHR
+- [x] 支持 fetch
+- [ ] 界面（Vue）异步加载
+- [ ] iframe 的情况
+
+## 笔记
+
 ### 调试、自动刷新
 
 起个本地服务托管 `dist`，如 `live-server --port=777`，之后在油猴脚本中写入以下代码，当源码更新后可自动刷新：

config/index.ts

@@ -81,7 +81,7 @@ const config: Configuration = {
           'https://cdn.jsdelivr.net/gh/daief/gm-response-proxy@main/dist/index.js',
         ],
         ['run-at', `document-start`],
-        ['noframes', ''],
+        // ['noframes', ''],
         ['grant', 'unsafeWindow'],
         ['grant', 'GM_setValue'],
         ['grant', 'GM_getValue'],

src/Setting/Root.vue

@@ -39,7 +39,11 @@
         </Button>
         <div :class="`${cls}--set-domain-head`">
           <label>域名匹配规则：</label>
-          <input :value="it.domainTest" :class="`${cls}--set-domain-input`" />
+          <input
+            :value="it.domainTest"
+            :class="`${cls}--set-domain-input`"
+            placeholder="请输入"
+          />
           <Button type="primary" @click="() => handleAddRule(idx)" size="small">
             添加 Api 规则
           </Button>
@@ -67,15 +71,25 @@
             <div>
               Api 匹配规则：
               <br />
-              <input v-model="rule.apiTest" style="width: 100%; padding: 8px" />
+              <input
+                v-model="rule.apiTest"
+                style="width: 100%; padding: 8px"
+                placeholder="请输入"
+              />
             </div>
             <div>
               Mock Response（仅 JSON）：
               <br />
               <textarea
                 v-model="rule.response"
+                placeholder="请输入"
                 rows="6"
-                style="width: 100%; max-width: 100%; padding: 8px"
+                style="
+                  width: 100%;
+                  max-width: 100%;
+                  padding: 8px;
+                  resize: vertical;
+                "
               />
             </div>
           </div>

src/common/utils.ts

@@ -23,9 +23,9 @@ export function uuid4() {
 }
 
 export function isMatchUrl(matchRule: string, url: string): boolean {
-  if (url.includes(matchRule)) {
-    return true;
+  if (/^\/.*\/$/.test(matchRule)) {
+    return new RegExp(matchRule, 'ig').test(url);
   }
 
-  return new RegExp(matchRule, 'ig').test(url);
+  return url.includes(matchRule);
 }

src/index.ts

@@ -77,11 +77,6 @@ function bootstrap() {
 
   document.body.appendChild(el);
   document.body.appendChild(elForMount);
-
-  if (process.env.NODE_ENV === 'development') {
-    // TODO rm
-    onClickEl({} as any);
-  }
 }
 
 if (document.readyState === 'loading') {