wip: refine & fix

.prettierrc

@@ -1,5 +1,6 @@
 {
   "singleQuote": true,
   "semi": true,
-  "arrowParens": "avoid"
+  "arrowParens": "avoid",
+  "trailingComma": "all"
 }

src/Setting/Root.vue

@@ -40,7 +40,7 @@
         <div :class="`${cls}--set-domain-head`">
           <label>域名匹配规则：</label>
           <input
-            :value="it.domainTest"
+            v-model="it.domainTest"
             :class="`${cls}--set-domain-input`"
             placeholder="请输入"
           />
@@ -124,7 +124,7 @@ export default defineComponent({
       () => {
         Store.updateSetList(state.matchedSetList);
       },
-      { deep: true }
+      { deep: true },
     );
 
     watch(
@@ -134,7 +134,7 @@ export default defineComponent({
           ? Store.getSetList()
           : Store.getMatchedSetList();
       },
-      { immediate: true }
+      { immediate: true },
     );
 
     return {

src/data/index.ts

@@ -30,12 +30,12 @@ export const Store = {
   },
   getMatchedSetList(): ISet[] {
     return Store.getSetList().filter(it =>
-      isMatchUrl(it.domainTest, location.host)
+      isMatchUrl(it.domainTest, location.host),
     );
   },
   findCurrentSet(): ISet {
     const ruleSet = Store.getSetList().find(it =>
-      new RegExp(it.domainTest, 'ig').test(location.host)
+      new RegExp(it.domainTest, 'ig').test(location.host),
     ) || {
       id: uuid4(),
       domainTest: location.host,
@@ -47,10 +47,7 @@ export const Store = {
     const store = Store.getStoreObject();
     input.forEach(it => {
       const target = store[it.id];
-      if (target) {
-        return Object.assign(target, it);
-      }
-      store[it.id] = it;
+      store[it.id] = target ? Object.assign(target, it) : it;
     });
     GM_setValue(KEY_SET, store);
   }, 2000),

src/index.ts

@@ -8,6 +8,10 @@ import { render } from './Setting';
 // import(/* webpackChunkName: 'setting' */ './Setting');
 
 function bootstrap() {
+  if (vmCtx.top !== vmCtx) {
+    // 只在顶层页面展示操作
+    return;
+  }
   let handler: any;
   let isDrag = false;
   let isMove = false;

src/proxy/xhr.ts

@@ -9,22 +9,30 @@ vmCtx.XMLHttpRequest = class extends (
   #mockResponse: string;
   #url: string;
   #method: string;
-  #proxyed: boolean = false;
 
   constructor() {
     super();
 
-    ['load', 'error'].forEach(ev => {
-      this.addEventListener(ev, () => {
-        if (!this.#proxyed) return;
+    this.addEventListener('readystatechange', e => {
+      if (this.readyState !== 4) return;
 
-        GM_log(`❗️ [XHR] Response is proxyed:\n`);
-        console.table({
-          method: this.#method,
-          url: this.#url,
-          status: this.status,
-          'proxyed response': this.#mockResponse,
-        });
+      const ruleSet = Store.findCurrentSet();
+      const matchedRule = ruleSet.rules.find(it =>
+        isMatchUrl(it.apiTest, this.#url),
+      );
+
+      if (!matchedRule?.response) {
+        return;
+      }
+
+      this.#mockResponse = matchedRule.response;
+
+      GM_log(`❗️ [XHR] Response is proxyed:\n`);
+      console.table({
+        method: this.#method,
+        url: this.#url,
+        status: this.status,
+        'proxyed response': this.#mockResponse,
       });
     });
   }
@@ -47,16 +55,6 @@ vmCtx.XMLHttpRequest = class extends (
       this.#url = `${location.origin}/${url.replace(/^\//, '')}`;
     }
 
-    const ruleSet = Store.findCurrentSet();
-    const matchedRule = ruleSet.rules.find(it =>
-      isMatchUrl(it.apiTest, this.#url)
-    );
-
-    if (matchedRule?.response) {
-      this.#mockResponse = matchedRule.response;
-      this.#proxyed = true;
-    }
-
     // @ts-ignore
     return super.open(method, url, ...rest);
   }