fix bug

.env

@@ -1,7 +1,7 @@
 GENERATE_SOURCEMAP=false
 
 REACT_APP_NAME=KISS Translator
-REACT_APP_VERSION=1.3.3
+REACT_APP_VERSION=1.3.5
 REACT_APP_HOMEPAGE=https://github.com/fishjar/kiss-translator
 REACT_APP_OPTIONSPAGE=https://kiss-translator.rayjar.com/options
 REACT_APP_OPTIONSPAGE2=https://fishjar.github.io/kiss-translator/options.html

config-overrides.js

@@ -4,6 +4,8 @@ const { WebpackManifestPlugin } = require("webpack-manifest-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const webpack = require("webpack");
 
+console.log("process.env.REACT_APP_CLIENT", process.env.REACT_APP_CLIENT);
+
 // 扩展
 const extWebpack = (config, env) => {
   const isEnvProduction = env === "production";
@@ -126,11 +128,17 @@ const webWebpack = (config, env) => {
 
   config.entry = {
     main: paths.appSrc + "/userscriptIndex.js",
-    options: paths.appSrc + "/userscriptOptions.js",
+    options:
+      paths.appSrc +
+      (env === "development" ? "/options.js" : "/userscriptOptions.js"),
   };
 
+  if (env === "development") {
+    config.entry.content = paths.appSrc + "/userscript.js";
+  }
+
   config.output.filename = "[name].js";
-  config.output.publicPath = "./";
+  config.output.publicPath = env === "development" ? "/" : "./";
 
   config.plugins = config.plugins.filter(
     (plugin) => !names.includes(plugin.constructor.name)
@@ -151,6 +159,17 @@ const webWebpack = (config, env) => {
     })
   );
 
+  if (env === "development") {
+    config.plugins.push(
+      new HtmlWebpackPlugin({
+        inject: true,
+        chunks: ["content"],
+        template: paths.appPublic + "/content.html",
+        filename: "content.html",
+      })
+    );
+  }
+
   return config;
 };
 

dist/chrome/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "__MSG_app_name__",
   "description": "__MSG_app_description__",
-  "version": "1.3.3",
+  "version": "1.3.5",
   "default_locale": "zh",
   "author": "Gabe<yugang2002@gmail.com>",
   "homepage_url": "https://github.com/fishjar/kiss-translator",

dist/edge/chrome/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "__MSG_app_name__",
   "description": "__MSG_app_description__",
-  "version": "1.3.3",
+  "version": "1.3.5",
   "default_locale": "zh",
   "author": "Gabe<yugang2002@gmail.com>",
   "homepage_url": "https://github.com/fishjar/kiss-translator",

dist/firefox/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "__MSG_app_name__",
   "description": "__MSG_app_description__",
-  "version": "1.3.3",
+  "version": "1.3.5",
   "default_locale": "zh",
   "author": "Gabe<yugang2002@gmail.com>",
   "homepage_url": "https://github.com/fishjar/kiss-translator",

dist/userscript/kiss-translator.user.js

@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name          KISS Translator
 // @namespace     https://github.com/fishjar/kiss-translator
-// @version       1.3.3
+// @version       1.3.5
 // @description   A minimalist bilingual translation extension.
 // @author        Gabe<yugang2002@gmail.com>
 // @homepageURL   https://github.com/fishjar/kiss-translator
@@ -54567,8 +54567,10 @@ var Fab = /*#__PURE__*/react.forwardRef(function Fab(inProps, ref) {
 /* harmony default export */ var Fab_Fab = (Fab);
 // EXTERNAL MODULE: ./node_modules/@mui/icons-material/Translate.js
 var Translate = __webpack_require__(3578);
+;// CONCATENATED MODULE: ./src/libs/mobile.js
+var isMobile=("ontouchstart"in document.documentElement);
 ;// CONCATENATED MODULE: ./src/views/Action/Draggable.js
-function Draggable(props){var _useState=(0,react.useState)(null),_useState2=(0,slicedToArray/* default */.Z)(_useState,2),origin=_useState2[0],setOrigin=_useState2[1];var _useState3=(0,react.useState)({x:props.left,y:props.top}),_useState4=(0,slicedToArray/* default */.Z)(_useState3,2),position=_useState4[0],setPosition=_useState4[1];var handlePointerDown=function handlePointerDown(e){e.target.setPointerCapture(e.pointerId);props===null||props===void 0?void 0:props.onStart();setOrigin({x:position.x,y:position.y,px:e.clientX,py:e.clientY});};var handlePointerMove=function handlePointerMove(e){props===null||props===void 0?void 0:props.onMove();if(origin){var dx=e.clientX-origin.px;var dy=e.clientY-origin.py;var x=origin.x+dx;var y=origin.y+dy;var _props$windowSize=props.windowSize,w=_props$windowSize.w,h=_props$windowSize.h;x=limitNumber(x,0,w-props.width);y=limitNumber(y,0,h-props.height);setPosition({x:x,y:y});}};var handlePointerUp=function handlePointerUp(e){setOrigin(null);};var handleClick=function handleClick(e){e.stopPropagation();};(0,react.useEffect)(function(){var _props$windowSize2=props.windowSize,w=_props$windowSize2.w,h=_props$windowSize2.h;setPosition(function(_ref){var x=_ref.x,y=_ref.y;return{x:limitNumber(x,0,w-props.width),y:limitNumber(y,0,h-props.height)};});},[props.windowSize,props.width,props.height]);return/*#__PURE__*/(0,jsx_runtime.jsxs)("div",{style:{position:"fixed",left:position.x,top:position.y,zIndex:2147483647},onClick:handleClick,children:[/*#__PURE__*/(0,jsx_runtime.jsx)("div",{onPointerDown:handlePointerDown,onPointerMove:handlePointerMove,onPointerUp:handlePointerUp,children:props.handler}),/*#__PURE__*/(0,jsx_runtime.jsx)("div",{children:props.children})]});}
+function Draggable(props){var _useState=(0,react.useState)(null),_useState2=(0,slicedToArray/* default */.Z)(_useState,2),origin=_useState2[0],setOrigin=_useState2[1];var _useState3=(0,react.useState)({x:props.left,y:props.top}),_useState4=(0,slicedToArray/* default */.Z)(_useState3,2),position=_useState4[0],setPosition=_useState4[1];var handlePointerDown=function handlePointerDown(e){!isMobile&&e.target.setPointerCapture(e.pointerId);props===null||props===void 0?void 0:props.onStart();var _ref=isMobile?e.targetTouches[0]:e,clientX=_ref.clientX,clientY=_ref.clientY;setOrigin({x:position.x,y:position.y,px:clientX,py:clientY});};var handlePointerMove=function handlePointerMove(e){props===null||props===void 0?void 0:props.onMove();var _ref2=isMobile?e.targetTouches[0]:e,clientX=_ref2.clientX,clientY=_ref2.clientY;if(origin){var dx=clientX-origin.px;var dy=clientY-origin.py;var x=origin.x+dx;var y=origin.y+dy;var _props$windowSize=props.windowSize,w=_props$windowSize.w,h=_props$windowSize.h;x=limitNumber(x,0,w-props.width);y=limitNumber(y,0,h-props.height);setPosition({x:x,y:y});}};var handlePointerUp=function handlePointerUp(e){setOrigin(null);};var handleClick=function handleClick(e){e.stopPropagation();};var touchProps=isMobile?{onTouchStart:handlePointerDown,onTouchMove:handlePointerMove,onTouchEnd:handlePointerUp}:{onPointerDown:handlePointerDown,onPointerMove:handlePointerMove,onPointerUp:handlePointerUp};(0,react.useEffect)(function(){var _props$windowSize2=props.windowSize,w=_props$windowSize2.w,h=_props$windowSize2.h;setPosition(function(_ref3){var x=_ref3.x,y=_ref3.y;return{x:limitNumber(x,0,w-props.width),y:limitNumber(y,0,h-props.height)};});},[props.windowSize,props.width,props.height]);return/*#__PURE__*/(0,jsx_runtime.jsxs)("div",{style:{position:"fixed",left:position.x,top:position.y,zIndex:2147483647},onClick:handleClick,children:[/*#__PURE__*/(0,jsx_runtime.jsx)("div",_objectSpread2(_objectSpread2({style:{touchAction:"none"}},touchProps),{},{children:props.handler})),/*#__PURE__*/(0,jsx_runtime.jsx)("div",{children:props.children})]});}
 // EXTERNAL MODULE: ./node_modules/@mui/icons-material/Close.js
 var icons_material_Close = __webpack_require__(1198);
 ;// CONCATENATED MODULE: ./node_modules/@mui/material/FormControlLabel/formControlLabelClasses.js

docs/manifest.firefox.json

@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "__MSG_app_name__",
   "description": "__MSG_app_description__",
-  "version": "1.3.3",
+  "version": "1.3.5",
   "default_locale": "zh",
   "author": "Gabe<yugang2002@gmail.com>",
   "homepage_url": "https://github.com/fishjar/kiss-translator",

docs/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "__MSG_app_name__",
   "description": "__MSG_app_description__",
-  "version": "1.3.3",
+  "version": "1.3.5",
   "default_locale": "zh",
   "author": "Gabe<yugang2002@gmail.com>",
   "homepage_url": "https://github.com/fishjar/kiss-translator",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "kiss-translator",
   "description": "A simple translator extension",
-  "version": "1.3.3",
+  "version": "1.3.5",
   "author": "Gabe<yugang2002@gmail.com>",
   "private": true,
   "dependencies": {

public/manifest.firefox.json

@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "__MSG_app_name__",
   "description": "__MSG_app_description__",
-  "version": "1.3.3",
+  "version": "1.3.5",
   "default_locale": "zh",
   "author": "Gabe<yugang2002@gmail.com>",
   "homepage_url": "https://github.com/fishjar/kiss-translator",

public/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "__MSG_app_name__",
   "description": "__MSG_app_description__",
-  "version": "1.3.3",
+  "version": "1.3.5",
   "default_locale": "zh",
   "author": "Gabe<yugang2002@gmail.com>",
   "homepage_url": "https://github.com/fishjar/kiss-translator",

src/libs/mobile.js

@@ -0,0 +1 @@
+export const isMobile = "ontouchstart" in document.documentElement;

src/views/Action/Draggable.js

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { limitNumber } from "../../libs/utils";
+import { isMobile } from "../../libs/mobile";
 
 export default function Draggable(props) {
   const [origin, setOrigin] = useState(null);
@@ -9,21 +10,23 @@ export default function Draggable(props) {
   });
 
   const handlePointerDown = (e) => {
-    e.target.setPointerCapture(e.pointerId);
+    !isMobile && e.target.setPointerCapture(e.pointerId);
     props?.onStart();
+    const { clientX, clientY } = isMobile ? e.targetTouches[0] : e;
     setOrigin({
       x: position.x,
       y: position.y,
-      px: e.clientX,
+      px: clientX,
-      py: e.clientY,
+      py: clientY,
     });
   };
 
   const handlePointerMove = (e) => {
     props?.onMove();
+    const { clientX, clientY } = isMobile ? e.targetTouches[0] : e;
     if (origin) {
-      const dx = e.clientX - origin.px;
+      const dx = clientX - origin.px;
-      const dy = e.clientY - origin.py;
+      const dy = clientY - origin.py;
       let x = origin.x + dx;
       let y = origin.y + dy;
       const { w, h } = props.windowSize;
@@ -41,6 +44,18 @@ export default function Draggable(props) {
     e.stopPropagation();
   };
 
+  const touchProps = isMobile
+    ? {
+        onTouchStart: handlePointerDown,
+        onTouchMove: handlePointerMove,
+        onTouchEnd: handlePointerUp,
+      }
+    : {
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerUp,
+      };
+
   useEffect(() => {
     const { w, h } = props.windowSize;
     setPosition(({ x, y }) => ({
@@ -60,9 +75,10 @@ export default function Draggable(props) {
       onClick={handleClick}
     >
       <div
-        onPointerDown={handlePointerDown}
+        style={{
-        onPointerMove={handlePointerMove}
+          touchAction: "none",
-        onPointerUp={handlePointerUp}
+        }}
+        {...touchProps}
       >
         {props.handler}
       </div>