feat: force copy experimental features

WindRunnerMax · Jul 28, 2024 · 6992e85 · 6992e85
1 parent 1381747
commit 6992e85
Show file tree

Hide file tree

Showing 16 changed files with 140 additions and 23 deletions.
diff --git a/packages/copy/src/constant/event.ts b/packages/copy/src/constant/event.ts
@@ -13,6 +13,8 @@ export const SELECT_START = "selectstart";
 export const CONTEXT_MENU = "contextmenu";
 export const KEY_DOWN = "keydown";
 export const TOUCH_START = "touchstart";
+export const TOUCH_MOVE = "touchmove";
+export const TOUCH_END = "touchend";
 export const FOCUS = "focus";
 export const BLUR = "blur";
 export const FOCUS_IN = "focusin";

diff --git a/packages/force-copy/package.json b/packages/force-copy/package.json
@@ -10,6 +10,8 @@
     "dev:rollup": "cross-env NODE_ENV=development rollup -wc",
     "dev:gecko": "cross-env NODE_ENV=development PLATFORM=gecko rspack build --watch",
     "build:gecko": "rm -rf build-gecko && cross-env PLATFORM=gecko rspack build",
+    "build:zip": "mkdir -p .zip && cd build && zip -r ../.zip/chromium.zip .",
+    "build:zip:gecko": "mkdir -p .zip && cd build-gecko && zip -r ../.zip/gecko.zip .",
     "lint:ts": "../../node_modules/typescript/bin/tsc --noEmit"
   },
   "repository": {

diff --git a/packages/force-copy/src/bridge/content-inject/index.ts b/packages/force-copy/src/bridge/content-inject/index.ts
@@ -1,4 +1,4 @@
-import { decodeJSON, encodeJSON } from "laser-utils";
+import { decodeJSON, encodeJSON, isUndefined } from "laser-utils";
 import type { CIRequestType } from "./request";
 import { CONTENT_TO_INJECT_REQUEST } from "./request";
 import { EVENT_TYPE, MARK } from "./constant";
@@ -13,7 +13,7 @@ export class CIBridge {
   static onContentMessage(cb: (data: CIRequestType) => void) {
     const handler = (event: CustomEvent<string>) => {
       const data = decodeJSON<CIRequestType>(event.detail);
-      if (data && data.type && data.payload) {
+      if (data && data.type && !isUndefined(data.payload)) {
         cb(data);
       }
     };

diff --git a/packages/force-copy/src/bridge/content-inject/request.ts b/packages/force-copy/src/bridge/content-inject/request.ts
@@ -1,7 +1,14 @@
 import type { Reflex, Object } from "@/utils/types";
 import { MARK } from "./constant";
 
-const CI_REQUEST_ENUM = ["COPY_TYPE", "KEYBOARD_TYPE", "CONTEXT_MENU_TYPE"] as const;
+const CI_REQUEST_ENUM = [
+  "COPY_TYPE",
+  "KEYBOARD_TYPE",
+  "CONTEXT_MENU_TYPE",
+  "DEBUG_MOUSE_EVENT",
+  "DEBUG_FOCUS_EVENT",
+  "DEBUG_EDITABLE",
+] as const;
 export const CONTENT_TO_INJECT_REQUEST = CI_REQUEST_ENUM.reduce(
   (acc, cur) => ({ ...acc, [cur]: `__${cur}__${MARK}__` }),
   {} as { [K in typeof CI_REQUEST_ENUM[number]]: `__${K}__${typeof MARK}__` }
@@ -18,6 +25,9 @@ export type EventMap = {
   [CONTENT_TO_INJECT_REQUEST.COPY_TYPE]: CIExecutionType;
   [CONTENT_TO_INJECT_REQUEST.KEYBOARD_TYPE]: CIExecutionType;
   [CONTENT_TO_INJECT_REQUEST.CONTEXT_MENU_TYPE]: CIExecutionType;
+  [CONTENT_TO_INJECT_REQUEST.DEBUG_MOUSE_EVENT]: null;
+  [CONTENT_TO_INJECT_REQUEST.DEBUG_FOCUS_EVENT]: null;
+  [CONTENT_TO_INJECT_REQUEST.DEBUG_EDITABLE]: null;
 };
 
 export type CIRequestType = Reflex.Tuple<EventMap>;
diff --git a/packages/force-copy/src/bridge/popup-content/request.ts b/packages/force-copy/src/bridge/popup-content/request.ts
@@ -1,7 +1,15 @@
 import type { Reflex } from "@/utils/types";
 import { MARK } from "./constant";
 
-const PC_REQUEST_TYPE = ["COPY_TYPE", "KEYBOARD_TYPE", "CONTEXT_MENU_TYPE", "QUERY_STATE"] as const;
+const PC_REQUEST_TYPE = [
+  "COPY_TYPE",
+  "KEYBOARD_TYPE",
+  "CONTEXT_MENU_TYPE",
+  "QUERY_STATE",
+  "DEBUG_MOUSE_EVENT",
+  "DEBUG_FOCUS_EVENT",
+  "DEBUG_EDITABLE",
+] as const;
 export const POPUP_TO_CONTENT_REQUEST = PC_REQUEST_TYPE.reduce(
   (acc, cur) => ({ ...acc, [cur]: `__${cur}__${MARK}__` }),
   {} as { [K in typeof PC_REQUEST_TYPE[number]]: `__${K}__${typeof MARK}__` }
@@ -12,6 +20,9 @@ type EventMap = {
   [POPUP_TO_CONTENT_REQUEST.KEYBOARD_TYPE]: { checked: boolean; once: boolean };
   [POPUP_TO_CONTENT_REQUEST.CONTEXT_MENU_TYPE]: { checked: boolean; once: boolean };
   [POPUP_TO_CONTENT_REQUEST.QUERY_STATE]: null;
+  [POPUP_TO_CONTENT_REQUEST.DEBUG_MOUSE_EVENT]: null;
+  [POPUP_TO_CONTENT_REQUEST.DEBUG_FOCUS_EVENT]: null;
+  [POPUP_TO_CONTENT_REQUEST.DEBUG_EDITABLE]: null;
 };
 
 export type PCRequestType = Reflex.Tuple<EventMap>;
diff --git a/packages/force-copy/src/content/channel/popup.ts b/packages/force-copy/src/content/channel/popup.ts
@@ -8,6 +8,7 @@ import { POPUP_TO_CONTENT_REQUEST } from "@/bridge/popup-content/request";
 import { CIBridge } from "@/bridge/content-inject";
 import { CONTENT_TO_INJECT_REQUEST } from "@/bridge/content-inject/request";
 import { PC_QUERY_STATE_ENUM } from "@/bridge/popup-content/response";
+import { PCBridge } from "@/bridge/popup-content";
 
 export const onPopupMessage = (data: PCRequestType) => {
   logger.info("Content Receive Popup Message", location.host, data);
@@ -62,5 +63,26 @@ export const onPopupMessage = (data: PCRequestType) => {
         },
       };
     }
+    case PCBridge.REQUEST.DEBUG_MOUSE_EVENT: {
+      CIBridge.postToInject({
+        type: CIBridge.REQUEST.DEBUG_MOUSE_EVENT,
+        payload: null,
+      });
+      break;
+    }
+    case PCBridge.REQUEST.DEBUG_FOCUS_EVENT: {
+      CIBridge.postToInject({
+        type: CIBridge.REQUEST.DEBUG_FOCUS_EVENT,
+        payload: null,
+      });
+      break;
+    }
+    case PCBridge.REQUEST.DEBUG_EDITABLE: {
+      CIBridge.postToInject({
+        type: CIBridge.REQUEST.DEBUG_EDITABLE,
+        payload: null,
+      });
+      break;
+    }
   }
 };
diff --git a/packages/force-copy/src/inject/channel/content.ts b/packages/force-copy/src/inject/channel/content.ts
@@ -4,6 +4,9 @@ import { logger } from "@/utils/logger";
 import { DOM_STAGE } from "copy/src/constant/event";
 import type { CIRequestType } from "@/bridge/content-inject/request";
 import { CI_EXECUTION_ENUM, CONTENT_TO_INJECT_REQUEST } from "@/bridge/content-inject/request";
+import { CIBridge } from "@/bridge/content-inject";
+import { EventBus, EVENTS_ENUM } from "../utils/bus";
+import { stopNativePropagation } from "../utils/events";
 
 export const onContentMessage = (handler: WebSite) => {
   return (data: CIRequestType) => {
@@ -27,6 +30,24 @@ export const onContentMessage = (handler: WebSite) => {
           : handler.close(CONTEXT_MENU_TYPE);
         break;
       }
+      case CIBridge.REQUEST.DEBUG_MOUSE_EVENT: {
+        EventBus.on(EVENTS_ENUM.MOUSE_DOWN_CAPTURE, stopNativePropagation);
+        EventBus.on(EVENTS_ENUM.MOUSE_UP_CAPTURE, stopNativePropagation);
+        EventBus.on(EVENTS_ENUM.MOUSE_MOVE_CAPTURE, stopNativePropagation);
+        EventBus.on(EVENTS_ENUM.TOUCH_START_CAPTURE, stopNativePropagation);
+        EventBus.on(EVENTS_ENUM.TOUCH_MOVE_CAPTURE, stopNativePropagation);
+        EventBus.on(EVENTS_ENUM.TOUCH_END_CAPTURE, stopNativePropagation);
+        break;
+      }
+      case CIBridge.REQUEST.DEBUG_FOCUS_EVENT: {
+        EventBus.on(EVENTS_ENUM.FOCUS_CAPTURE, stopNativePropagation);
+        EventBus.on(EVENTS_ENUM.BLUR_CAPTURE, stopNativePropagation);
+        break;
+      }
+      case CIBridge.REQUEST.DEBUG_EDITABLE: {
+        document.body.contentEditable = "true";
+        break;
+      }
     }
   };
 };
diff --git a/packages/force-copy/src/inject/modules/qq-ppt.ts b/packages/force-copy/src/inject/modules/qq-ppt.ts
@@ -48,7 +48,6 @@ export const QQPpt: WebSite = {
   start(type) {
     if (type === COPY_TYPE) {
       win.__CAN_COPY = true;
-      console.dir(win, win.__CAN_COPY);
       styles.insertCSS(STYLE_ID, AUTO_USER_SELECT + ALLOW_PAINT);
     } else if (type === KEYBOARD_TYPE) {
       EventBus.on(EVENTS_ENUM.KEY_BOARD_CAPTURE, stopNativePropagation);

diff --git a/packages/force-copy/src/inject/utils/bus.ts b/packages/force-copy/src/inject/utils/bus.ts
@@ -18,6 +18,9 @@ const EVENTS_TYPE = [
   "TOUCH_START_CAPTURE",
   "FOCUS_CAPTURE",
   "BLUR_CAPTURE",
+  "MOUSE_MOVE_CAPTURE",
+  "TOUCH_MOVE_CAPTURE",
+  "TOUCH_END_CAPTURE",
 ] as const;
 
 export const EVENTS_ENUM = EVENTS_TYPE.reduce(
@@ -30,6 +33,7 @@ interface EventBusParams {
   [EVENTS_ENUM.MOUSE_DOWN_CAPTURE]: MouseEvent;
   [EVENTS_ENUM.MOUSE_UP_BUBBLE]: MouseEvent;
   [EVENTS_ENUM.MOUSE_DOWN_BUBBLE]: MouseEvent;
+  [EVENTS_ENUM.MOUSE_MOVE_CAPTURE]: MouseEvent;
   [EVENTS_ENUM.DOM_LOADED]: Event;
   [EVENTS_ENUM.PAGE_LOADED]: Event;
   [EVENTS_ENUM.OPEN_ACTION]: ALL_ACTION_TYPE;
@@ -42,6 +46,8 @@ interface EventBusParams {
   [EVENTS_ENUM.TOUCH_START_CAPTURE]: TouchEvent;
   [EVENTS_ENUM.FOCUS_CAPTURE]: FocusEvent;
   [EVENTS_ENUM.BLUR_CAPTURE]: FocusEvent;
+  [EVENTS_ENUM.TOUCH_MOVE_CAPTURE]: TouchEvent;
+  [EVENTS_ENUM.TOUCH_END_CAPTURE]: TouchEvent;
 }
 
 declare module "laser-utils/dist/es/event-bus" {

diff --git a/packages/force-copy/src/inject/utils/events.ts b/packages/force-copy/src/inject/utils/events.ts
@@ -8,9 +8,12 @@ import {
   FOCUS_OUT,
   KEY_DOWN,
   MOUSE_DOWN,
+  MOUSE_MOVE,
   MOUSE_UP,
   PAGE_LOADED,
   SELECT_START,
+  TOUCH_END,
+  TOUCH_MOVE,
   TOUCH_START,
 } from "copy/src/constant/event";
 import { EVENTS_ENUM, EventBus } from "./bus";
@@ -43,6 +46,9 @@ export const initBaseEvents = () => {
   window.addEventListener(FOCUS_IN, e => EventBus.emit(EVENTS_ENUM.FOCUS_CAPTURE, e), true);
   window.addEventListener(BLUR, e => EventBus.emit(EVENTS_ENUM.BLUR_CAPTURE, e), true);
   window.addEventListener(FOCUS_OUT, e => EventBus.emit(EVENTS_ENUM.FOCUS_CAPTURE, e), true);
+  window.addEventListener(MOUSE_MOVE, e => EventBus.emit(EVENTS_ENUM.MOUSE_MOVE_CAPTURE, e), true);
+  window.addEventListener(TOUCH_MOVE, e => EventBus.emit(EVENTS_ENUM.TOUCH_MOVE_CAPTURE, e), true);
+  window.addEventListener(TOUCH_END, e => EventBus.emit(EVENTS_ENUM.TOUCH_END_CAPTURE, e), true);
 };
 
 export const stopNativePropagation = (event: Event) => event.stopImmediatePropagation();

diff --git a/packages/force-copy/src/popup/components/app/index.module.scss b/packages/force-copy/src/popup/components/app/index.module.scss
@@ -15,12 +15,3 @@ body {
   background-color: var(--color-border-3);
   width: 100%;
 }
-
-.console {
-  position: relative;
-  > div {
-    margin: 10px 5px;
-    display: flex;
-    align-items: center;
-  }
-}
diff --git a/packages/force-copy/src/popup/components/app/index.tsx b/packages/force-copy/src/popup/components/app/index.tsx
@@ -16,9 +16,7 @@ export const App: FC = () => {
 
       <div className={styles.hr}></div>
 
-      <div className={styles.console}>
-        <Console i18n={i18n}></Console>
-      </div>
+      <Console i18n={i18n}></Console>
 
       <div className={styles.hr}></div>
 

diff --git a/packages/force-copy/src/popup/components/console/index.module.scss b/packages/force-copy/src/popup/components/console/index.module.scss
@@ -1,3 +1,12 @@
+.console {
+  position: relative;
+  > div {
+    margin: 10px 5px;
+    display: flex;
+    align-items: center;
+  }
+}
+
 .switch {
   display: flex;
   justify-content: center;

diff --git a/packages/force-copy/src/popup/components/console/index.tsx b/packages/force-copy/src/popup/components/console/index.tsx
@@ -1,5 +1,5 @@
 import type { FC } from "react";
-import { Fragment, useLayoutEffect, useState } from "react";
+import { useLayoutEffect, useState } from "react";
 import styles from "./index.module.scss";
 import { PCBridge } from "@/bridge/popup-content";
 import type { I18n } from "../../i18n";
@@ -56,7 +56,7 @@ export const Console: FC<{
   }, []);
 
   return (
-    <Fragment>
+    <div className={styles.console}>
       <Row className={styles.captain}>
         <Col span={8} className={styles.name}>
           {i18n.t("Captain.Modules")}
@@ -143,6 +143,6 @@ export const Console: FC<{
           />
         </Col>
       </Row>
-    </Fragment>
+    </div>
   );
 };
diff --git a/packages/force-copy/src/popup/components/footer/index.module.scss b/packages/force-copy/src/popup/components/footer/index.module.scss
@@ -25,5 +25,14 @@
     .arco-icon-refresh {
       font-size: 14px;
     }
+
+    .arco-icon-question-circle,
+    .arco-icon-refresh {
+      margin-left: -2px;
+    }
+
+    .arco-icon-experiment {
+      margin-right: 2px;
+    }
   }
 }
diff --git a/packages/force-copy/src/popup/components/tools/index.tsx b/packages/force-copy/src/popup/components/tools/index.tsx
@@ -2,6 +2,7 @@ import { Button, Grid } from "@arco-design/web-react";
 import styles from "./index.module.scss";
 import type { FC } from "react";
 import type { I18n } from "@/popup/i18n";
+import { PCBridge } from "@/bridge/popup-content";
 
 const Row = Grid.Row;
 const Col = Grid.Col;
@@ -14,15 +15,45 @@ export const Tools: FC<{
     <div className={styles.container}>
       <Row className={styles.row} gutter={10}>
         <Col span={12}>
-          <Button size="mini">{i18n.t("Tools.MouseEvent")}</Button>
+          <Button
+            size="mini"
+            onClick={() =>
+              PCBridge.postToContent({
+                type: PCBridge.REQUEST.DEBUG_MOUSE_EVENT,
+                payload: null,
+              })
+            }
+          >
+            {i18n.t("Tools.MouseEvent")}
+          </Button>
         </Col>
         <Col span={12}>
-          <Button size="mini">{i18n.t("Tools.FocusEvent")}</Button>
+          <Button
+            onClick={() =>
+              PCBridge.postToContent({
+                type: PCBridge.REQUEST.DEBUG_FOCUS_EVENT,
+                payload: null,
+              })
+            }
+            size="mini"
+          >
+            {i18n.t("Tools.FocusEvent")}
+          </Button>
         </Col>
       </Row>
       <Row className={styles.row}>
         <Col span={12}>
-          <Button size="mini">{i18n.t("Tools.Editable")}</Button>
+          <Button
+            onClick={() =>
+              PCBridge.postToContent({
+                type: PCBridge.REQUEST.DEBUG_EDITABLE,
+                payload: null,
+              })
+            }
+            size="mini"
+          >
+            {i18n.t("Tools.Editable")}
+          </Button>
         </Col>
       </Row>
     </div>