v1.7.16

fix: move clear_cache button to bottom of popup
fix: tranbox shortcut in usserscript
2024-01-04 15:55:28 +08:00 · 2024-01-04 15:41:20 +08:00 · 2024-01-04 12:18:36 +08:00 · 2024-01-04 10:49:44 +08:00 · 2024-01-04 10:39:40 +08:00 · 2024-01-04 10:34:12 +08:00
26 changed files with 471 additions and 156 deletions
--- a/.env
+++ b/.env
@@ -2,7 +2,7 @@ GENERATE_SOURCEMAP=false

 REACT_APP_NAME=KISS Translator
 REACT_APP_NAME_CN=简约翻译
-REACT_APP_VERSION=1.7.15
+REACT_APP_VERSION=1.7.16

 REACT_APP_HOMEPAGE=https://github.com/fishjar/kiss-translator

--- a/README.en.md
+++ b/README.en.md
@@ -84,3 +84,7 @@ pnpm build
 ## Discussion

 - Join [Telegram Group](https://t.me/+RRCu_4oNwrM2NmFl)
+
+## Appreciate
+
+![appreciate](https://github.com/fishjar/kiss-translator/assets/1157624/ebaecabe-2934-4172-8085-af236f5ee399)
--- a/README.md
+++ b/README.md
@@ -84,3 +84,7 @@ pnpm build
 ## 交流

 - 加入 [Telegram 群](https://t.me/+RRCu_4oNwrM2NmFl)
+
+## 赞赏
+
+![appreciate](https://github.com/fishjar/kiss-translator/assets/1157624/ebaecabe-2934-4172-8085-af236f5ee399)
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "kiss-translator",
  "description": "A minimalist bilingual translation Extension & Greasemonkey Script",
-  "version": "1.7.15",
+  "version": "1.7.16",
  "author": "Gabe<yugang2002@gmail.com>",
  "private": true,
  "dependencies": {
--- a/public/content.html
+++ b/public/content.html
@@ -64,6 +64,45 @@
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root">
+      <p>You need to enable <code>JavaScript</code> to run <span>this app.</span></p>
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
+      <br />
      <div id="content">
        <p>You need to enable JavaScript to run <span>this app.</span></p>
        The <span>embargo</span> has just lifted to confirm that AmpereOne is
--- a/public/manifest.firefox.json
+++ b/public/manifest.firefox.json
@@ -2,7 +2,7 @@
  "manifest_version": 2,
  "name": "__MSG_app_name__",
  "description": "__MSG_app_description__",
-  "version": "1.7.15",
+  "version": "1.7.16",
  "default_locale": "en",
  "author": "Gabe<yugang2002@gmail.com>",
  "homepage_url": "https://github.com/fishjar/kiss-translator",
@@ -28,6 +28,12 @@
      },
      "description": "__MSG_toggle_translate__"
    },
+    "openTranbox": {
+      "suggested_key": {
+        "default": "Alt+S"
+      },
+      "description": "__MSG_open_tranbox__"
+    },
    "toggleStyle": {
      "suggested_key": {
        "default": "Alt+C"
@@ -35,9 +41,6 @@
      "description": "__MSG_toggle_style__"
    },
    "openOptions": {
-      "suggested_key": {
-        "default": "Alt+O"
-      },
      "description": "__MSG_open_options__"
    }
  },
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -2,7 +2,7 @@
  "manifest_version": 3,
  "name": "__MSG_app_name__",
  "description": "__MSG_app_description__",
-  "version": "1.7.15",
+  "version": "1.7.16",
  "default_locale": "en",
  "author": "Gabe<yugang2002@gmail.com>",
  "homepage_url": "https://github.com/fishjar/kiss-translator",
@@ -29,6 +29,12 @@
      },
      "description": "__MSG_toggle_translate__"
    },
+    "openTranbox": {
+      "suggested_key": {
+        "default": "Alt+S"
+      },
+      "description": "__MSG_open_tranbox__"
+    },
    "toggleStyle": {
      "suggested_key": {
        "default": "Alt+C"
@@ -36,9 +42,6 @@
      "description": "__MSG_toggle_style__"
    },
    "openOptions": {
-      "suggested_key": {
-        "default": "Alt+O"
-      },
      "description": "__MSG_open_options__"
    }
  },
--- a/src/background.js
+++ b/src/background.js
@@ -31,27 +31,27 @@ function addContextMenus() {
  browser.contextMenus.create({
    id: CMD_TOGGLE_TRANSLATE,
    title: browser.i18n.getMessage("toggle_translate"),
-    contexts: ["all"],
+    contexts: ["page", "selection"],
  });
  browser.contextMenus.create({
    id: CMD_TOGGLE_STYLE,
    title: browser.i18n.getMessage("toggle_style"),
-    contexts: ["all"],
+    contexts: ["page", "selection"],
  });
  browser.contextMenus.create({
    id: CMD_OPEN_TRANBOX,
    title: browser.i18n.getMessage("open_tranbox"),
-    contexts: ["all"],
+    contexts: ["page", "selection"],
  });
  browser.contextMenus.create({
    id: "options_separator",
    type: "separator",
-    contexts: ["all"],
+    contexts: ["page", "selection"],
  });
  browser.contextMenus.create({
    id: CMD_OPEN_OPTIONS,
    title: browser.i18n.getMessage("open_options"),
-    contexts: ["all"],
+    contexts: ["page", "selection"],
  });
 }

@@ -154,6 +154,9 @@ browser.commands.onCommand.addListener((command) => {
    case CMD_TOGGLE_TRANSLATE:
      sendTabMsg(MSG_TRANS_TOGGLE);
      break;
+    case CMD_OPEN_TRANBOX:
+      sendTabMsg(MSG_OPEN_TRANBOX);
+      break;
    case CMD_TOGGLE_STYLE:
      sendTabMsg(MSG_TRANS_TOGGLE_STYLE);
      break;
--- a/src/common.js
+++ b/src/common.js
@@ -20,7 +20,7 @@ import { touchTapListener } from "./libs/touch";
 import { debounce, genEventName } from "./libs/utils";
 import { handlePing, injectScript } from "./libs/gm";
 import { browser } from "./libs/browser";
-import { runWebfix } from "./libs/webfix";
+import { matchFixer } from "./libs/webfix";
 import { matchRule } from "./libs/rules";
 import { trySyncAllSubRules } from "./libs/subRules";
 import { isInBlacklist } from "./libs/blacklist";
@@ -112,10 +112,6 @@ function runIframe(setting) {
 */
 async function showFab(translator) {
  const fab = await getFabWithDefault();
-  if (fab.isHide) {
-    return;
-  }
-
  const $action = document.createElement("div");
  $action.setAttribute("id", APP_LCNAME);
  document.body.parentElement.appendChild($action);
@@ -256,11 +252,11 @@ export async function run(isUserscript = false) {
    }

    // 不规范网页修复
-    await runWebfix(setting);
+    const fixerSetting = await matchFixer(href, setting);

    // 翻译网页
    const rule = await matchRule(href, setting);
-    const translator = new Translator(rule, setting);
+    const translator = new Translator(rule, setting, fixerSetting);

    // 监听消息
    windowListener(rule);
--- a/src/config/i18n.js
+++ b/src/config/i18n.js
@@ -356,8 +356,8 @@ export const I18N = {
    en: `Follow the syntax of "CSS"`,
  },
  setting: {
-    zh: `设置 (Alt+O)`,
-    en: `Setting (Alt+O)`,
+    zh: `设置`,
+    en: `Setting`,
  },
  pattern: {
    zh: `匹配网址`,
@@ -387,6 +387,14 @@ export const I18N = {
    zh: `选择器`,
    en: `Selector`,
  },
+  keep_selector: {
+    zh: `保留元素选择器`,
+    en: `Keep unchanged selector`,
+  },
+  keep_selector_helper: {
+    zh: `1、遵循CSS选择器语法。2、留空表示采用全局设置。`,
+    en: `1. Follow CSS selector syntax. 2. Leave blank to adopt the global setting.`,
+  },
  root_selector: {
    zh: `根选择器`,
    en: `Root Selector`,
@@ -707,4 +715,8 @@ export const I18N = {
    zh: `添加右键菜单`,
    en: `Add Context Menus`,
  },
+  mulkeys_help: {
+    zh: `支持英文逗号隔开多个KEY轮寻调用。`,
+    en: `Supports multiple KEY round calling calls separated by English commas.`,
+  },
 };
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -1,5 +1,6 @@
 import {
  DEFAULT_SELECTOR,
+  DEFAULT_KEEP_SELECTOR,
  GLOBAL_KEY,
  REMAIN_KEY,
  SHADOW_KEY,
@@ -321,6 +322,7 @@ export const DEFAULT_COLOR = "#209CEE"; // 默认高亮背景色/线条颜色
 export const GLOBLA_RULE = {
  pattern: "*",
  selector: DEFAULT_SELECTOR,
+  keepSelector: DEFAULT_KEEP_SELECTOR,
  translator: OPT_TRANS_MICROSOFT,
  fromLang: "auto",
  toLang: "zh-CN",
--- a/src/config/rules.js
+++ b/src/config/rules.js
@@ -1,4 +1,5 @@
 export const DEFAULT_SELECTOR = `:is(li, p, h1, h2, h3, h4, h5, h6, dd, blockquote)`;
+export const DEFAULT_KEEP_SELECTOR = `code, img, svg`;

 export const GLOBAL_KEY = "*";
 export const REMAIN_KEY = "-";
@@ -8,6 +9,7 @@ export const SHADOW_KEY = ">>>";
 export const DEFAULT_RULE = {
  pattern: "",
  selector: "",
+  keepSelector: "",
  translator: GLOBAL_KEY,
  fromLang: GLOBAL_KEY,
  toLang: GLOBAL_KEY,
@@ -41,65 +43,154 @@ export const DEFAULT_OW_RULE = {
 };

 const RULES_MAP = {
-  "www.google.com/search": `h3, .IsZvec, .VwiC3b`,
-  "news.google.com": `[role="link"], .DY5T1d, .ifw3f, ${DEFAULT_SELECTOR}`,
-  "www.foxnews.com": `h1, h2, .title, .sidebar [data-type="Title"], .article-content ${DEFAULT_SELECTOR}; [data-spotim-module="conversation"]>div >>> [data-spot-im-class="message-text"] p,  [data-spot-im-class="message-text"]`,
-  "bearblog.dev, www.theverge.com, www.tampermonkey.net/documentation.php": `${DEFAULT_SELECTOR}`,
-  "themessenger.com": `.leading-tight, .leading-tighter, .my-2 p, .font-body p, article ${DEFAULT_SELECTOR}`,
-  "www.telegraph.co.uk, go.dev/doc/": `article ${DEFAULT_SELECTOR}`,
-  "www.theguardian.com": `.show-underline, .dcr-hup5wm div, .dcr-7vl6y8 div, .dcr-12evv1c, figcaption, article ${DEFAULT_SELECTOR}, [data-cy="mostviewed-footer"] h4`,
-  "www.semafor.com": `${DEFAULT_SELECTOR}, .styles_intro__IYj__, [class*="styles_description"]`,
-  "www.noemamag.com": `.splash__title, .single-card__title, .single-card__type, .single-card__topic, .highlighted-content__title, .single-card__author, article ${DEFAULT_SELECTOR}, .quote__text, .wp-caption-text div`,
-  "restofworld.org": `${DEFAULT_SELECTOR}, .recirc-story__headline, .recirc-story__dek`,
-  "www.axios.com": `.h7, ${DEFAULT_SELECTOR}`,
-  "www.newyorker.com": `.summary-item__hed, .summary-item__dek, .summary-collection-grid__dek, .dqtvfu, .rubric__link, .caption, article ${DEFAULT_SELECTOR}, .HEhan ${DEFAULT_SELECTOR}, .ContributorBioBio-fBolsO`,
-  "time.com": `h1, h3, .summary, .video-title, #article-body ${DEFAULT_SELECTOR}, .image-wrap-container .credit.body-caption, .media-heading`,
-  "www.dw.com": `.ts-teaser-title a, .news-title a, .title a, .teaser-description a, .hbudab h3, .hbudab p, figcaption ,article ${DEFAULT_SELECTOR}`,
-  "www.bbc.com": `h1, h2, .media__link, .media__summary, article ${DEFAULT_SELECTOR}, .ssrcss-y7krbn-Stack, .ssrcss-17zglt8-PromoHeadline, .ssrcss-18cjaf3-Headline, .gs-c-promo-heading__title, .gs-c-promo-summary, .media__content h3, .article__intro`,
-  "www.chinadaily.com.cn": `h1, .tMain [shape="rect"], .cMain [shape="rect"], .photo_art [shape="rect"], .mai_r [shape="rect"], .lisBox li, #Content ${DEFAULT_SELECTOR}`,
-  "www.facebook.com": `[role="main"] [dir="auto"]`,
-  "www.reddit.com": `[slot="title"], [slot="text-body"] ${DEFAULT_SELECTOR}, #-post-rtjson-content p`,
-  "www.quora.com": `.qu-wordBreak--break-word`,
-  "edition.cnn.com": `.container__title, .container__headline, .headline__text, .image__caption, [data-type="Title"], .article__content ${DEFAULT_SELECTOR}`,
-  "www.reuters.com": `#main-content [data-testid="Heading"], #main-content [data-testid="Body"], .article-body__content__17Yit ${DEFAULT_SELECTOR}`,
-  "www.bloomberg.com": `[data-component="headline"], [data-component="related-item-headline"], [data-component="title"], article ${DEFAULT_SELECTOR}`,
-  "deno.land, docs.github.com": `main ${DEFAULT_SELECTOR}`,
-  "doc.rust-lang.org": `.content ${DEFAULT_SELECTOR}`,
-  "www.indiehackers.com": `h1, h3, .content ${DEFAULT_SELECTOR}, .feed-item__title-link`,
-  "platform.openai.com/docs": `.docs-body ${DEFAULT_SELECTOR}`,
-  "en.wikipedia.org": `h1, .mw-parser-output ${DEFAULT_SELECTOR}`,
-  "stackoverflow.com": `h1, .s-prose p, .comment-body .comment-copy`,
-  "www.npmjs.com/package, developer.chrome.com/docs, medium.com, developers.cloudflare.com, react.dev, create-react-app.dev, pytorch.org": `article ${DEFAULT_SELECTOR}`,
-  "news.ycombinator.com": `.title, .commtext`,
-  "github.com": `.markdown-body ${DEFAULT_SELECTOR}, .repo-description p, .Layout-sidebar .f4, .container-lg .py-4 .f5, .container-lg .my-4 .f5, .Box-row .pr-4, .Box-row article .mt-1, [itemprop="description"], .markdown-title, bdi, .ws-pre-wrap, .status-meta, span.status-meta, .col-10.color-fg-muted, .TimelineItem-body, .pinned-item-list-item-content .color-fg-muted, .markdown-body td, .markdown-body th`,
-  "twitter.com": `[data-testid="tweetText"]`,
-  "m.youtube.com": `.slim-video-information-title .yt-core-attributed-string, .media-item-headline .yt-core-attributed-string, .comment-text .yt-core-attributed-string, .typography-body-2b .yt-core-attributed-string, #ytp-caption-window-container .ytp-caption-segment`,
-  "www.youtube.com": `h1, #video-title, #content-text, #title, yt-attributed-string>span>span, #ytp-caption-window-container .ytp-caption-segment`,
-  "bard.google.com": `.query-content ${DEFAULT_SELECTOR}, message-content ${DEFAULT_SELECTOR}`,
-  "www.bing.com": `.b_algoSlug, .rwrl_padref; .cib-serp-main >>> .ac-textBlock ${DEFAULT_SELECTOR}, .text-message-content div`,
-  "www.phoronix.com": `article ${DEFAULT_SELECTOR}`,
-  "wx2.qq.com": `.js_message_plain`,
-  "app.slack.com/client/": `.p-rich_text_section, .c-message_attachment__text, .p-rich_text_list li`,
-  "discord.com/channels/": `div[id^=message-content]`,
-  "t.me/s/": `.js-message_text ${DEFAULT_SELECTOR}`,
-  "web.telegram.org/k/": `.message, .bot-commands-list-element-description, .reply-markup-button-text`,
-  "web.telegram.org/a/": `.message, .text-content, .bot-commands-list-element-description, .reply-markup-button-text`,
-  "chromereleases.googleblog.com": `.title, .publishdate, p, i, .header-desc, .header-title, .text`,
-  "www.instagram.com/": `h1, article span[dir=auto] > span[dir=auto], ._ab1y`,
-  "www.instagram.com/p/,www.instagram.com/reels/": `h1, div[class='x9f619 xjbqb8w x78zum5 x168nmei x13lgxp2 x5pf9jr xo71vjh x1uhb9sk x1plvlek xryxfnj x1c4vz4f x2lah0s xdt5ytf xqjyukv x1cy8zhl x1oa3qoh x1nhvcw1'] > span[class='x1lliihq x1plvlek xryxfnj x1n2onr6 x193iq5w xeuugli x1fj9vlw x13faqbe x1vvkbs x1s928wv xhkezso x1gmr53x x1cpjm7i x1fgarty x1943h6x x1i0vuye xvs91rp xo1l8bm x5n08af x10wh9bi x1wdrske x8viiok x18hxmgj'], span[class='x193iq5w xeuugli x1fj9vlw x13faqbe x1vvkbs xt0psk2 x1i0vuye xvs91rp xo1l8bm x5n08af x10wh9bi x1wdrske x8viiok x18hxmgj']`,
-  "mail.google.com": `${DEFAULT_SELECTOR}, h2[data-thread-perm-id], span[data-thread-id], div[data-message-id] div[class=''], .messageBody, #views`,
-  "web.whatsapp.com": `.copyable-text > span`,
-  "chat.openai.com": `div[data-message-author-role] > div ${DEFAULT_SELECTOR}`,
-  "forum.ru-board.com": `.tit, .dats, span.post ${DEFAULT_SELECTOR}`,
-  "education.github.com": `${DEFAULT_SELECTOR}, a, summary, span.Button-content`,
-  "blogs.windows.com": `${DEFAULT_SELECTOR}, .c-uhf-nav-link, figcaption`,
-  "developer.apple.com/documentation/": `#main ${DEFAULT_SELECTOR}, #main .abstract .content, #main .abstract.content, #main .link span`,
+  "www.google.com/search": [`h3, .IsZvec, .VwiC3b`],
+  "news.google.com": [`[role="link"], .DY5T1d, .ifw3f, ${DEFAULT_SELECTOR}`],
+  "www.foxnews.com": [
+    `h1, h2, .title, .sidebar [data-type="Title"], .article-content ${DEFAULT_SELECTOR}; [data-spotim-module="conversation"]>div >>> [data-spot-im-class="message-text"] p,  [data-spot-im-class="message-text"]`,
+  ],
+  "bearblog.dev, www.theverge.com, www.tampermonkey.net/documentation.php": [
+    `${DEFAULT_SELECTOR}`,
+  ],
+  "themessenger.com": [
+    `.leading-tight, .leading-tighter, .my-2 p, .font-body p, article ${DEFAULT_SELECTOR}`,
+  ],
+  "www.telegraph.co.uk, go.dev/doc/": [`article ${DEFAULT_SELECTOR}`],
+  "www.theguardian.com": [
+    `.show-underline, .dcr-hup5wm div, .dcr-7vl6y8 div, .dcr-12evv1c, figcaption, article ${DEFAULT_SELECTOR}, [data-cy="mostviewed-footer"] h4`,
+  ],
+  "www.semafor.com": [
+    `${DEFAULT_SELECTOR}, .styles_intro__IYj__, [class*="styles_description"]`,
+  ],
+  "www.noemamag.com": [
+    `.splash__title, .single-card__title, .single-card__type, .single-card__topic, .highlighted-content__title, .single-card__author, article ${DEFAULT_SELECTOR}, .quote__text, .wp-caption-text div`,
+  ],
+  "restofworld.org": [
+    `${DEFAULT_SELECTOR}, .recirc-story__headline, .recirc-story__dek`,
+  ],
+  "www.axios.com": [`.h7, ${DEFAULT_SELECTOR}`],
+  "www.newyorker.com": [
+    `.summary-item__hed, .summary-item__dek, .summary-collection-grid__dek, .dqtvfu, .rubric__link, .caption, article ${DEFAULT_SELECTOR}, .HEhan ${DEFAULT_SELECTOR}, .ContributorBioBio-fBolsO, .BaseText-ewhhUZ`,
+  ],
+  "time.com": [
+    `h1, h3, .summary, .video-title, #article-body ${DEFAULT_SELECTOR}, .image-wrap-container .credit.body-caption, .media-heading`,
+  ],
+  "www.dw.com": [
+    `.ts-teaser-title a, .news-title a, .title a, .teaser-description a, .hbudab h3, .hbudab p, figcaption ,article ${DEFAULT_SELECTOR}`,
+  ],
+  "www.bbc.com": [
+    `h1, h2, .media__link, .media__summary, article ${DEFAULT_SELECTOR}, .ssrcss-y7krbn-Stack, .ssrcss-17zglt8-PromoHeadline, .ssrcss-18cjaf3-Headline, .gs-c-promo-heading__title, .gs-c-promo-summary, .media__content h3, .article__intro, .lx-c-summary-points>li`,
+  ],
+  "www.chinadaily.com.cn": [
+    `h1, .tMain [shape="rect"], .cMain [shape="rect"], .photo_art [shape="rect"], .mai_r [shape="rect"], .lisBox li, #Content ${DEFAULT_SELECTOR}`,
+  ],
+  "www.facebook.com": [`[role="main"] [dir="auto"]`],
+  "www.reddit.com": [
+    `div:is(.tbIApBd2DM_drfZQJjIum, ._1zPvgKHteTOub9dKkvrOl4,.ULWj94BYSOqoJDetxgcnU),a:is([class^="_334yl59"],[class^="_2GrMpxD"]),h1,h2,h3,h4,h5,h6,p,button`,
+  ],
+  "www.quora.com": [`.qu-wordBreak--break-word`],
+  "edition.cnn.com": [
+    `.container__title, .container__headline, .headline__text, .image__caption, [data-type="Title"], .article__content ${DEFAULT_SELECTOR}`,
+  ],
+  "www.reuters.com": [
+    `#main-content [data-testid="Heading"], #main-content [data-testid="Body"], .article-body__content__17Yit ${DEFAULT_SELECTOR}`,
+  ],
+  "www.bloomberg.com": [
+    `[data-component="headline"], [data-component="related-item-headline"], [data-component="title"], article ${DEFAULT_SELECTOR}`,
+  ],
+  "deno.land, docs.github.com": [`main ${DEFAULT_SELECTOR}`, `code, img, svg`],
+  "doc.rust-lang.org": [`.content ${DEFAULT_SELECTOR}`, `code, img, svg`],
+  "www.indiehackers.com": [
+    `h1, h3, .content ${DEFAULT_SELECTOR}, .feed-item__title-link`,
+  ],
+  "platform.openai.com/docs": [
+    `.docs-body ${DEFAULT_SELECTOR}`,
+    `code, img, svg`,
+  ],
+  "en.wikipedia.org": [
+    `h1, .mw-parser-output ${DEFAULT_SELECTOR}`,
+    `.mwe-math-element`,
+  ],
+  "stackoverflow.com": [
+    `h1, .s-prose p, .comment-body .comment-copy`,
+    `code, img, svg`,
+  ],
+  "www.npmjs.com/package, developer.chrome.com/docs, medium.com, developers.cloudflare.com, react.dev, create-react-app.dev, pytorch.org":
+    [`article ${DEFAULT_SELECTOR}`],
+  "news.ycombinator.com": [`.title, .commtext`],
+  "github.com": [
+    `.markdown-body ${DEFAULT_SELECTOR}, .repo-description p, .Layout-sidebar .f4, .container-lg .py-4 .f5, .container-lg .my-4 .f5, .Box-row .pr-4, .Box-row article .mt-1, [itemprop="description"], .markdown-title, bdi, .ws-pre-wrap, .status-meta, span.status-meta, .col-10.color-fg-muted, .TimelineItem-body, .pinned-item-list-item-content .color-fg-muted, .markdown-body td, .markdown-body th`,
+    `code, img, svg`,
+  ],
+  "twitter.com": [
+    `[data-testid="tweetText"], [data-testid="birdwatch-pivot"]>div.css-1rynq56`,
+    `img, a, .r-18u37iz, .css-175oi2r`,
+  ],
+  "m.youtube.com": [
+    `.slim-video-information-title .yt-core-attributed-string, .media-item-headline .yt-core-attributed-string, .comment-text .yt-core-attributed-string, .typography-body-2b .yt-core-attributed-string, #ytp-caption-window-container .ytp-caption-segment`,
+  ],
+  "www.youtube.com": [
+    `h1, #video-title, #content-text, #title, yt-attributed-string>span>span, #ytp-caption-window-container .ytp-caption-segment`,
+  ],
+  "bard.google.com": [
+    `.query-content ${DEFAULT_SELECTOR}, message-content ${DEFAULT_SELECTOR}`,
+  ],
+  "www.bing.com": [
+    `.b_algoSlug, .rwrl_padref; .cib-serp-main >>> .ac-textBlock ${DEFAULT_SELECTOR}, .text-message-content div`,
+  ],
+  "www.phoronix.com": [`article ${DEFAULT_SELECTOR}`],
+  "wx2.qq.com": [`.js_message_plain`],
+  "app.slack.com/client/": [
+    `.p-rich_text_section, .c-message_attachment__text, .p-rich_text_list li`,
+  ],
+  "discord.com/channels/": [
+    `li[id^=chat-messages] div[id^=message-content], div[class^=headerText], div[class^=name_], section[aria-label='Search Results'] div[id^=message-content]`,
+  ],
+  "t.me/s/": [`.js-message_text ${DEFAULT_SELECTOR}`],
+  "web.telegram.org/k/": [
+    `.message, .bot-commands-list-element-description, .reply-markup-button-text`,
+  ],
+  "web.telegram.org/a/": [
+    `.message, .text-content, .bot-commands-list-element-description, .reply-markup-button-text`,
+  ],
+  "chromereleases.googleblog.com": [
+    `.title, .publishdate, p, i, .header-desc, .header-title, .text`,
+  ],
+  "www.instagram.com/": [`h1, article span[dir=auto] > span[dir=auto], ._ab1y`],
+  "www.instagram.com/p/,www.instagram.com/reels/": [
+    `h1, div[class='x9f619 xjbqb8w x78zum5 x168nmei x13lgxp2 x5pf9jr xo71vjh x1uhb9sk x1plvlek xryxfnj x1c4vz4f x2lah0s xdt5ytf xqjyukv x1cy8zhl x1oa3qoh x1nhvcw1'] > span[class='x1lliihq x1plvlek xryxfnj x1n2onr6 x193iq5w xeuugli x1fj9vlw x13faqbe x1vvkbs x1s928wv xhkezso x1gmr53x x1cpjm7i x1fgarty x1943h6x x1i0vuye xvs91rp xo1l8bm x5n08af x10wh9bi x1wdrske x8viiok x18hxmgj'], span[class='x193iq5w xeuugli x1fj9vlw x13faqbe x1vvkbs xt0psk2 x1i0vuye xvs91rp xo1l8bm x5n08af x10wh9bi x1wdrske x8viiok x18hxmgj']`,
+  ],
+  "mail.google.com": [
+    `${DEFAULT_SELECTOR}, h2[data-thread-perm-id], span[data-thread-id], div[data-message-id] div[class=''], .messageBody, #views`,
+  ],
+  "web.whatsapp.com": [`.copyable-text > span`],
+  "chat.openai.com": [
+    `div[data-message-author-role] > div ${DEFAULT_SELECTOR}`,
+  ],
+  "forum.ru-board.com": [`.tit, .dats, span.post, .lgf ${DEFAULT_SELECTOR}`],
+  "education.github.com": [
+    `${DEFAULT_SELECTOR}, a, summary, span.Button-content`,
+  ],
+  "blogs.windows.com": [`${DEFAULT_SELECTOR}, .c-uhf-nav-link, figcaption`],
+  "developer.apple.com/documentation/": [
+    `#main ${DEFAULT_SELECTOR}, #main .abstract .content, #main .abstract.content, #main .link span`,
+    `code, img, svg`,
+  ],
+  "greasyfork.org": [
+    `h2, .script-link, .script-description, #additional-info ${DEFAULT_SELECTOR}`,
+  ],
+  "www.fmkorea.com": [`#container ${DEFAULT_SELECTOR}`],
+  "forum.arduino.cc": [
+    `.top-row>.title, .featured-topic>.title, .link-top-line>.title, .category-description, .topic-excerpt, .fancy-title, .cooked ${DEFAULT_SELECTOR}`,
+  ],
+  "docs.arduino.cc": [`[class^="tutorial-module--left"] ${DEFAULT_SELECTOR}`],
+  "www.historydefined.net": [`.wp-element-caption, ${DEFAULT_SELECTOR}`],
 };

 export const BUILTIN_RULES = Object.entries(RULES_MAP)
  .sort((a, b) => a[0].localeCompare(b[0]))
-  .map(([pattern, selector]) => ({
+  .map(([pattern, [selector, keepSelector = ""]]) => ({
    ...DEFAULT_RULE,
    pattern,
    selector,
+    keepSelector,
  }));
--- a/src/libs/req.js
+++ b/src/libs/req.js
@@ -21,6 +21,26 @@ import { msAuth } from "./auth";
 import { genDeeplFree } from "../apis/deepl";
 import { genBaidu } from "../apis/baidu";

+const keyMap = new Map();
+
+// 轮询key
+const keyPick = (translator, key = "") => {
+  const keys = key
+    .split(",")
+    .map((item) => item.trim())
+    .filter(Boolean);
+
+  if (keys.length === 0) {
+    return "";
+  }
+
+  const preIndex = keyMap.get(translator) ?? -1;
+  const curIndex = (preIndex + 1) % keys.length;
+  keyMap.set(translator, curIndex);
+
+  return keys[curIndex];
+};
+
 /**
 * 构造缓存 request
 * @param {*} request
@@ -257,6 +277,17 @@ const genCustom = ({ text, from, to, url, key }) => {
 */
 export const newTransReq = ({ translator, text, from, to }, apiSetting) => {
  const args = { text, from, to, ...apiSetting };
+
+  switch (translator) {
+    case OPT_TRANS_DEEPL:
+    case OPT_TRANS_OPENAI:
+    case OPT_TRANS_GEMINI:
+    case OPT_TRANS_CLOUDFLAREAI:
+      args.key = keyPick(translator, args.key);
+      break;
+    default:
+  }
+
  switch (translator) {
    case OPT_TRANS_GOOGLE:
      return genGoogle(args);
--- a/src/libs/rules.js
+++ b/src/libs/rules.js
@@ -66,6 +66,7 @@ export const matchRule = async (
  }

  rule.selector = rule.selector?.trim() || globalRule.selector;
+  rule.keepSelector = rule.keepSelector?.trim() || globalRule.keepSelector;
  if (rule.textStyle === GLOBAL_KEY) {
    rule.textStyle = globalRule.textStyle;
    rule.bgColor = globalRule.bgColor;
@@ -112,6 +113,7 @@ export const checkRules = (rules) => {
      ({
        pattern,
        selector,
+        keepSelector,
        translator,
        fromLang,
        toLang,
@@ -122,6 +124,7 @@ export const checkRules = (rules) => {
      }) => ({
        pattern: pattern.trim(),
        selector: type(selector) === "string" ? selector : "",
+        keepSelector: type(keepSelector) === "string" ? keepSelector : "",
        bgColor: type(bgColor) === "string" ? bgColor : "",
        textDiyStyle: type(textDiyStyle) === "string" ? textDiyStyle : "",
        translator: matchValue([GLOBAL_KEY, ...OPT_TRANS_ALL], translator),
--- a/src/libs/shortcut.js
+++ b/src/libs/shortcut.js
@@ -36,8 +36,8 @@ export const shortcutListener = (fn, target = document, timeout = 3000) => {
    }
  };

-  target.addEventListener("keydown", handleKeydown);
-  target.addEventListener("keyup", handleKeyup);
+  target.addEventListener("keydown", handleKeydown, true);
+  target.addEventListener("keyup", handleKeyup, true);
  return () => {
    if (timer) {
      clearTimeout(timer);
--- a/src/libs/translator.js
+++ b/src/libs/translator.js
@@ -13,6 +13,7 @@ import {
 import Content from "../views/Content";
 import { updateFetchPool, clearFetchPool } from "./fetch";
 import { debounce, genEventName } from "./utils";
+import { runFixer } from "./webfix";

 /**
 * 翻译类
@@ -20,6 +21,7 @@ import { debounce, genEventName } from "./utils";
 export class Translator {
  _rule = {};
  _setting = {};
+  _fixerSetting = null;
  _rootNodes = new Set();
  _tranNodes = new Map();
  _skipNodeNames = [
@@ -91,13 +93,14 @@ export class Translator {
    };
  };

-  constructor(rule, setting) {
+  constructor(rule, setting, fixerSetting) {
    const { fetchInterval, fetchLimit } = setting;
    updateFetchPool(fetchInterval, fetchLimit);
    this._overrideAttachShadow();

    this._setting = setting;
    this._rule = rule;
+    this._fixerSetting = fixerSetting;

    if (rule.transOpen === "true") {
      this._register();
@@ -235,6 +238,11 @@ export class Translator {
      return;
    }

+    // webfix
+    if (this._fixerSetting) {
+      runFixer(this._fixerSetting);
+    }
+
    // 搜索节点
    this._queryNodes();

@@ -352,6 +360,11 @@ export class Translator {
    }
  }, 500);

+  _invalidLength = (q) =>
+    !q ||
+    q.length < (this._setting.minLength ?? TRANS_MIN_LENGTH) ||
+    q.length > (this._setting.maxLength ?? TRANS_MAX_LENGTH);
+
  _render = (el) => {
    let traEl = el.querySelector(APP_LCNAME);

@@ -371,20 +384,45 @@ export class Translator {
      traEl.remove();
    }

-    const q = el.innerText.trim();
+    let q = el.innerText.trim();
    this._tranNodes.set(el, q);

    // 太长或太短
-    if (
-      !q ||
-      q.length < (this._setting.minLength ?? TRANS_MIN_LENGTH) ||
-      q.length > (this._setting.maxLength ?? TRANS_MAX_LENGTH)
-    ) {
+    if (this._invalidLength(q)) {
      return;
    }

    // console.log("---> ", q);

+    const keepSelector = this._rule.keepSelector || "";
+    const keeps = [];
+    if (keepSelector.trim()) {
+      let text = "";
+      el.childNodes.forEach((child) => {
+        if (child.nodeType === 1 && child.matches(keepSelector)) {
+          if (child.nodeName === "IMG") {
+            child.style.cssText += `width: ${child.width}px;`;
+            child.style.cssText += `height: ${child.height}px;`;
+          }
+          text += `#${keeps.length}#`;
+          keeps.push(child.outerHTML);
+        } else {
+          text += child.textContent;
+        }
+      });
+
+      // 太长或太短
+      if (this._invalidLength(text.replace(/#(\d+)#/g, "").trim())) {
+        return;
+      }
+
+      if (keeps.length > 0) {
+        q = text;
+      }
+    }
+
+    // console.log("---> ", q);
+
    traEl = document.createElement(APP_LCNAME);
    traEl.style.visibility = "visible";
    el.appendChild(traEl);
@@ -396,6 +434,6 @@ export class Translator {
    }

    const root = createRoot(traEl);
-    root.render(<Content q={q} translator={this} />);
+    root.render(<Content q={q} keeps={keeps} translator={this} />);
  };
 }
--- a/src/libs/webfix.js
+++ b/src/libs/webfix.js
@@ -218,28 +218,38 @@ export const loadOrFetchWebfix = async (url) => {
 };

 /**
- * 匹配站点
+ * 执行fixer
+ * @param {*} param0
 */
-export async function runWebfix({ injectWebfix }) {
+export async function runFixer({ selector, fixer, rootSelector }) {
  try {
-    if (!injectWebfix) {
-      return;
-    }
+    run(selector, fixerMap[fixer], rootSelector);
+  } catch (err) {
+    console.error(`[kiss-webfix run]: ${err.message}`);
+  }
+}

-    const href = document.location.href;
+/**
+ * 匹配fixer配置
+ */
+export async function matchFixer(href, { injectWebfix }) {
+  if (!injectWebfix) {
+    return null;
+  }
+
+  try {
    const userSites = await getWebfixRulesWithDefault();
    const subSites = await loadOrFetchWebfix(process.env.REACT_APP_WEBFIXURL);
    const sites = [...userSites, ...subSites];
    for (var i = 0; i < sites.length; i++) {
      var site = sites[i];
-      if (isMatch(href, site.pattern)) {
-        if (fixerMap[site.fixer]) {
-          run(site.selector, fixerMap[site.fixer], site.rootSelector);
-        }
-        break;
+      if (isMatch(href, site.pattern) && fixerMap[site.fixer]) {
+        return site;
      }
    }
  } catch (err) {
-    console.error(`[kiss-webfix]: ${err.message}`);
+    console.error(`[kiss-webfix match]: ${err.message}`);
  }
+
+  return null;
 }
--- a/src/views/Action/index.js
+++ b/src/views/Action/index.js
@@ -99,7 +99,7 @@ export default function Action({ translator, fab }) {
      contextMenus &&
        menuCommandIds.push(
          GM.registerMenuCommand(
-            "Toggle Translate (Alt+q)",
+            "Toggle Translate (Alt+Q)",
            (event) => {
              translator.toggle();
              sendIframeMsg(MSG_TRANS_TOGGLE);
@@ -108,7 +108,7 @@ export default function Action({ translator, fab }) {
            "Q"
          ),
          GM.registerMenuCommand(
-            "Toggle Style (Alt+c)",
+            "Toggle Style (Alt+C)",
            (event) => {
              translator.toggleStyle();
              sendIframeMsg(MSG_TRANS_TOGGLE_STYLE);
@@ -117,14 +117,14 @@ export default function Action({ translator, fab }) {
            "C"
          ),
          GM.registerMenuCommand(
-            "Open Menu (Alt+k)",
+            "Open Menu (Alt+K)",
            (event) => {
              setShowPopup((pre) => !pre);
            },
            "K"
          ),
          GM.registerMenuCommand(
-            "Open Setting (Alt+o)",
+            "Open Setting",
            (event) => {
              window.open(process.env.REACT_APP_OPTIONSPAGE, "_blank");
            },
--- a/src/views/Content/index.js
+++ b/src/views/Content/index.js
@@ -112,7 +112,7 @@ function StyledSpan({ textStyle, textDiyStyle, bgColor, children }) {
  }
 }

-export default function Content({ q, translator }) {
+export default function Content({ q, keeps, translator }) {
  const [rule, setRule] = useState(translator.rule);
  const { text, sameLang, loading } = useTranslate(q, rule, translator.setting);
  const { textStyle, bgColor = "", textDiyStyle = "" } = rule;
@@ -145,18 +145,28 @@ export default function Content({ q, translator }) {
    );
  }

-  if (text && !sameLang) {
-    return (
-      <>
-        {q.length >= newlineLength ? <br /> : " "}
-        <StyledSpan
-          textStyle={textStyle}
-          textDiyStyle={textDiyStyle}
-          bgColor={bgColor}
-        >
-          {text}
-        </StyledSpan>
-      </>
-    );
+  if (!text || sameLang) {
+    return;
  }
+
+  return (
+    <>
+      {q.length >= newlineLength ? <br /> : " "}
+      <StyledSpan
+        textStyle={textStyle}
+        textDiyStyle={textDiyStyle}
+        bgColor={bgColor}
+      >
+        {keeps.length > 0 ? (
+          <span
+            dangerouslySetInnerHTML={{
+              __html: text.replace(/#(\d+)#/g, (_, p) => keeps[parseInt(p)]),
+            }}
+          />
+        ) : (
+          text
+        )}
+      </StyledSpan>
+    </>
+  );
 }
--- a/src/views/Options/Apis.js
+++ b/src/views/Options/Apis.js
@@ -5,11 +5,13 @@ import CircularProgress from "@mui/material/CircularProgress";
 import {
  OPT_TRANS_ALL,
  OPT_TRANS_MICROSOFT,
+  OPT_TRANS_DEEPL,
  OPT_TRANS_DEEPLFREE,
  OPT_TRANS_BAIDU,
  OPT_TRANS_TENCENT,
  OPT_TRANS_OPENAI,
  OPT_TRANS_GEMINI,
+  OPT_TRANS_CLOUDFLAREAI,
  OPT_TRANS_CUSTOMIZE,
  URL_KISS_PROXY,
 } from "../../config";
@@ -96,6 +98,13 @@ function ApiFields({ translator }) {
    OPT_TRANS_TENCENT,
  ];

+  const mulkeysTranslators = [
+    OPT_TRANS_DEEPL,
+    OPT_TRANS_OPENAI,
+    OPT_TRANS_GEMINI,
+    OPT_TRANS_CLOUDFLAREAI,
+  ];
+
  return (
    <Stack spacing={3}>
      {!buildinTranslators.includes(translator) && (
@@ -113,6 +122,10 @@ function ApiFields({ translator }) {
            name="key"
            value={key}
            onChange={handleChange}
+            multiline={mulkeysTranslators.includes(translator)}
+            helperText={
+              mulkeysTranslators.includes(translator) ? i18n("mulkeys_help") : ""
+            }
          />
        </>
      )}
--- a/src/views/Options/Rules.js
+++ b/src/views/Options/Rules.js
@@ -65,6 +65,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
  const {
    pattern,
    selector,
+    keepSelector = "",
    translator,
    fromLang,
    toLang,
@@ -179,6 +180,16 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
          onFocus={handleFocus}
          multiline
        />
+        <TextField
+          size="small"
+          label={i18n("keep_selector")}
+          helperText={i18n("keep_selector_helper")}
+          name="keepSelector"
+          value={keepSelector}
+          disabled={disabled}
+          onChange={handleChange}
+          multiline
+        />

        <Box>
          <Grid container spacing={2} columns={12}>
--- a/src/views/Options/Tranbox.js
+++ b/src/views/Options/Tranbox.js
@@ -10,6 +10,7 @@ import Switch from "@mui/material/Switch";
 import { useCallback } from "react";
 import { limitNumber } from "../../libs/utils";
 import { useTranbox } from "../../hooks/Tranbox";
+import { isExt } from "../../libs/client";

 export default function Tranbox() {
  const i18n = useI18n();
@@ -159,11 +160,13 @@ export default function Tranbox() {
          <MenuItem value={true}>{i18n("hide")}</MenuItem>
        </TextField>

-        <ShortcutInput
-          value={tranboxShortcut}
-          onChange={handleShortcutInput}
-          label={i18n("trigger_tranbox_shortcut")}
-        />
+        {!isExt && (
+          <ShortcutInput
+            value={tranboxShortcut}
+            onChange={handleShortcutInput}
+            label={i18n("trigger_tranbox_shortcut")}
+          />
+        )}
      </Stack>
    </Box>
  );
--- a/src/views/Popup/index.js
+++ b/src/views/Popup/index.js
@@ -22,7 +22,6 @@ import {
  OPT_LANGS_FROM,
  OPT_LANGS_TO,
  OPT_STYLE_ALL,
-  OPT_STYLE_USE_COLOR,
 } from "../../config";
 import { sendIframeMsg } from "../../libs/iframe";
 import { saveRule } from "../../libs/rules";
@@ -130,7 +129,7 @@ export default function Popup({ setShowPopup, translator: tran }) {
    );
  }

-  const { transOpen, translator, fromLang, toLang, textStyle, bgColor } = rule;
+  const { transOpen, translator, fromLang, toLang, textStyle } = rule;

  return (
    <Box minWidth={300}>
@@ -156,11 +155,6 @@ export default function Popup({ setShowPopup, translator: tran }) {
            }
            label={i18n("translate_alt")}
          />
-          {!isExt && (
-            <Button variant="text" onClick={handleClearCache}>
-              {i18n("clear_cache")}
-            </Button>
-          )}
        </Stack>

        <TextField
@@ -227,7 +221,7 @@ export default function Popup({ setShowPopup, translator: tran }) {
          ))}
        </TextField>

-        {OPT_STYLE_USE_COLOR.includes(textStyle) && (
+        {/* {OPT_STYLE_USE_COLOR.includes(textStyle) && (
          <TextField
            size="small"
            name="bgColor"
@@ -235,7 +229,7 @@ export default function Popup({ setShowPopup, translator: tran }) {
            label={i18n("bg_color")}
            onChange={handleChange}
          />
-        )}
+        )} */}

        <Stack
          direction="row"
@@ -246,6 +240,11 @@ export default function Popup({ setShowPopup, translator: tran }) {
          <Button variant="text" onClick={handleSaveRule}>
            {i18n("save_rule")}
          </Button>
+          {!isExt && (
+            <Button variant="text" onClick={handleClearCache}>
+              {i18n("clear_cache")}
+            </Button>
+          )}
          <Button variant="text" onClick={handleOpenSetting}>
            {i18n("setting")}
          </Button>
--- a/src/views/Selection/DraggableResizable.js
+++ b/src/views/Selection/DraggableResizable.js
@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import Paper from "@mui/material/Paper";
 import Box from "@mui/material/Box";
+import { isMobile } from "../../libs/mobile";

 function Pointer({
  direction,
@@ -16,21 +17,23 @@ function Pointer({
  const [origin, setOrigin] = useState(null);

  function handlePointerDown(e) {
-    e.target.setPointerCapture(e.pointerId);
+    !isMobile && e.target.setPointerCapture(e.pointerId);
+    const { clientX, clientY } = isMobile ? e.targetTouches[0] : e;
    setOrigin({
      x: position.x,
      y: position.y,
      w: size.w,
      h: size.h,
-      clientX: e.clientX,
-      clientY: e.clientY,
+      clientX,
+      clientY,
    });
  }

  function handlePointerMove(e) {
+    const { clientX, clientY } = isMobile ? e.targetTouches[0] : e;
    if (origin) {
-      const dx = e.clientX - origin.clientX;
-      const dy = e.clientY - origin.clientY;
+      const dx = clientX - origin.clientX;
+      const dy = clientY - origin.clientY;
      let x = position.x;
      let y = position.y;
      let w = size.w;
@@ -101,16 +104,24 @@ function Pointer({
  }

  function handlePointerUp(e) {
+    e.stopPropagation();
    setOrigin(null);
  }

+  const touchProps = isMobile
+    ? {
+        onTouchStart: handlePointerDown,
+        onTouchMove: handlePointerMove,
+        onTouchEnd: handlePointerUp,
+      }
+    : {
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerUp,
+      };
+
  return (
-    <div
-      {...props}
-      onPointerDown={handlePointerDown}
-      onPointerMove={handlePointerMove}
-      onPointerUp={handlePointerUp}
-    >
+    <div {...props} {...touchProps}>
      {children}
    </div>
  );
@@ -162,6 +173,7 @@ export default function DraggableResizable({
  return (
    <Box
      style={{
+        touchAction: "none",
        position: "fixed",
        left: position.x,
        top: position.y,
--- a/src/views/Selection/TranBtn.js
+++ b/src/views/Selection/TranBtn.js
@@ -1,17 +1,27 @@
+import { isMobile } from "../../libs/mobile";
+
 export default function TranBtn({ onClick, position, tranboxSetting }) {
+  const left = position.x + tranboxSetting.btnOffsetX;
+  const top = position.y + tranboxSetting.btnOffsetY;
+
+  const touchProps = isMobile
+    ? {
+        onTouchEnd: onClick,
+      }
+    : {
+        onMouseUp: onClick,
+      };
+
  return (
    <div
      style={{
        cursor: "pointer",
        position: "absolute",
-        left: position.x + tranboxSetting.btnOffsetX,
-        top: position.y + tranboxSetting.btnOffsetY,
+        left,
+        top,
        zIndex: 2147483647,
      }}
-      onClick={onClick}
-      onMouseUp={(e) => {
-        e.stopPropagation();
-      }}
+      {...touchProps}
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
--- a/src/views/Selection/index.js
+++ b/src/views/Selection/index.js
@@ -2,20 +2,27 @@ import { useState, useEffect, useCallback } from "react";
 import TranBtn from "./TranBtn";
 import TranBox from "./TranBox";
 import { shortcutRegister } from "../../libs/shortcut";
-import { sleep } from "../../libs/utils";
-import { isGm } from "../../libs/client";
+import { sleep, limitNumber } from "../../libs/utils";
+import { isGm, isExt } from "../../libs/client";
 import { MSG_OPEN_TRANBOX, DEFAULT_TRANBOX_SHORTCUT } from "../../config";
+import { isMobile } from "../../libs/mobile";

 export default function Slection({ contextMenus, tranboxSetting, transApis }) {
+  const boxWidth = limitNumber(window.innerWidth, 300, 600);
+  const boxHeight = limitNumber(window.innerHeight, 200, 400);
+
  const [showBox, setShowBox] = useState(false);
  const [showBtn, setShowBtn] = useState(false);
  const [selectedText, setSelText] = useState("");
  const [text, setText] = useState("");
  const [position, setPosition] = useState({ x: 0, y: 0 });
-  const [boxSize, setBoxSize] = useState({ w: 600, h: 400 });
+  const [boxSize, setBoxSize] = useState({
+    w: boxWidth,
+    h: boxHeight,
+  });
  const [boxPosition, setBoxPosition] = useState({
-    x: (window.innerWidth - 600) / 2,
-    y: (window.innerHeight - 400) / 2,
+    x: (window.innerWidth - boxWidth) / 2,
+    y: (window.innerHeight - boxHeight) / 2,
  });

  const handleClick = (e) => {
@@ -42,6 +49,7 @@ export default function Slection({ contextMenus, tranboxSetting, transApis }) {

  useEffect(() => {
    async function handleMouseup(e) {
+      e.stopPropagation();
      await sleep(10);

      const selectedText = window.getSelection()?.toString()?.trim() || "";
@@ -51,18 +59,28 @@ export default function Slection({ contextMenus, tranboxSetting, transApis }) {
        return;
      }

+      const { pageX, pageY } = isMobile ? e.changedTouches[0] : e;
      !tranboxSetting.hideTranBtn && setShowBtn(true);
      // setPosition({ x: e.clientX, y: e.clientY });
-      setPosition({ x: e.pageX, y: e.pageY });
+      setPosition({ x: pageX, y: pageY });
    }

+    // todo: mobile support
    window.addEventListener("mouseup", handleMouseup);
+    // window.addEventListener(isMobile ? "touchend" : "mouseup", handleMouseup);
    return () => {
-      window.removeEventListener("mouseup", handleMouseup);
+      window.removeEventListener(
+        isMobile ? "touchend" : "mouseup",
+        handleMouseup
+      );
    };
  }, [tranboxSetting.hideTranBtn]);

  useEffect(() => {
+    if (isExt) {
+      return;
+    }
+
    const clearShortcut = shortcutRegister(
      tranboxSetting.tranboxShortcut || DEFAULT_TRANBOX_SHORTCUT,
      handleTranbox
Author	SHA1	Message	Date
Gabe Yuan	82ebbcb6d6	v1.7.16	2024-01-04 15:55:28 +08:00
Gabe Yuan	2db11070c5	fix: move clear_cache button to bottom of popup	2024-01-04 15:41:20 +08:00
Gabe Yuan	5efd2517e7	fix: tranbox shortcut in usserscript	2024-01-04 12:18:36 +08:00
Gabe Yuan	c0ba654678	fix: remove bgcolor input from popup	2024-01-04 10:49:44 +08:00
Gabe Yuan	546a5a549b	fix: comment text	2024-01-04 10:39:40 +08:00
Gabe Yuan	cbf02c34e3	fix: remove position limit for tranbtn	2024-01-04 10:34:12 +08:00
Gabe Yuan	74a7258f10	fix: optimize key pick	2024-01-04 09:40:03 +08:00
Gabe Yuan	1006c044bc	fix: update readme	2024-01-03 15:48:34 +08:00
Gabe	ef4ea719f3	fix: Update README.md	2024-01-03 15:47:24 +08:00
Gabe	8b34afe69f	fix: Update README.md	2024-01-03 15:25:40 +08:00
Gabe Yuan	01292af298	feat: move open_tranbox shortcurt to browser commands	2024-01-03 13:10:02 +08:00
Gabe Yuan	cff8b2fe39	feat: move open_tranbox shortcurt to browser commands	2024-01-03 11:59:41 +08:00
Gabe Yuan	2cb20b5cc0	fix: update rules	2024-01-03 10:43:02 +08:00
Gabe Yuan	8f2aed18fe	fix: contextMenus created on page and selection	2024-01-03 10:32:11 +08:00
Gabe Yuan	d85831cc9a	fix: keep the translated image size unchanged	2024-01-03 10:10:54 +08:00
Gabe Yuan	55dc3a5556	feat: keep unchanged elements	2024-01-02 17:57:04 +08:00
Gabe Yuan	591afe08bd	feat: keep unchanged elements	2024-01-02 17:55:59 +08:00
Gabe Yuan	748f2002ab	fix: run webfix before translate	2023-12-27 15:44:02 +08:00
Gabe Yuan	d2d18a2384	fix: instagram input translate: addEventListener keyup	2023-12-27 11:25:53 +08:00
Gabe Yuan	35f4fa6aa7	fix: register menu command when hide fab button	2023-12-26 10:08:36 +08:00
Gabe Yuan	66fc2d22ed	feat: toto: selection translation on mobile support	2023-12-25 17:25:00 +08:00
Gabe Yuan	16cf9ee1ed	feat: toto: selection translation on mobile support	2023-12-25 17:21:59 +08:00
Gabe Yuan	d9d97bf14c	fix: selection button position	2023-12-25 14:42:13 +08:00
Gabe Yuan	dc811bd3c7	feat: selection translation on mobile support	2023-12-25 11:50:30 +08:00
Gabe Yuan	b939d1849a	feat: multi key calling support	2023-12-22 11:35:46 +08:00